/* Shared site styles. Order preserves the established cascade. */
/* styles.css */
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400;font-display:swap;src:url("dm-sans-400.woff") format("woff")}@font-face{font-family:"DM Sans";font-style:normal;font-weight:500;font-display:swap;src:url("dm-sans-500.woff") format("woff")}@font-face{font-family:"DM Sans";font-style:normal;font-weight:600;font-display:swap;src:url("dm-sans-600.woff") format("woff")}@font-face{font-family:"DM Sans";font-style:normal;font-weight:700;font-display:swap;src:url("dm-sans-700.woff") format("woff")}
:root{--forest:#4b3026;--forest-2:#63d7eb;--table-blue:#a3ebfb;--table-blue-strong:#63d7eb;--cream:#faf5ec;--paper:#fffdf9;--ink:#4b3026;--azure:#159bb6;--azure-light:#c8f5fc;--logo-gold:#f4c542;--line:#dfd2c2;--sans:"DM Sans",sans-serif;--serif:"Fraunces",serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.65}img{display:block;max-width:100%}a{color:inherit}.skip{position:fixed;left:1rem;top:-5rem;z-index:100;background:#fff;padding:.75rem 1rem}.skip:focus{top:1rem}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.site-header{height:94px;padding:0 clamp(1.25rem,3vw,4rem);display:grid;grid-template-columns:minmax(190px,250px) 1fr auto;gap:clamp(1rem,2vw,2rem);align-items:center;background:var(--cream);color:var(--ink)}.site-header nav{display:flex;justify-content:center;gap:clamp(.8rem,1.6vw,1.8rem)}.site-header nav a{text-decoration:none;font-weight:600;font-size:.91rem}.site-header nav a:hover{color:#06758c}.menu-toggle{display:none;background:transparent;border:0;padding:.5rem}.menu-toggle span:not(.sr-only){display:block;width:24px;height:2px;background:var(--ink);margin:5px}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:.75rem 1.4rem;border-radius:2px;text-decoration:none;font-weight:700;transition:.2s ease}.button-primary{background:var(--azure);color:#fff}.button-primary:hover{background:#087d95;transform:translateY(-2px)}.button-light{background:#fff;color:var(--ink)}.button-ghost{border:1px solid rgba(255,255,255,.75);color:#fff}.button-ghost:hover{background:#fff;color:var(--ink)}
.hero{position:relative;min-height:calc(100vh - 94px);height:760px;max-height:900px;color:#fff;display:flex;align-items:center;overflow:hidden}.hero-image,.hero-overlay{position:absolute;inset:0}.hero-image img{width:100%;height:100%;object-fit:cover;object-position:center 44%}.hero-overlay{background:linear-gradient(90deg,rgba(8,39,46,.9) 0%,rgba(8,39,46,.58) 48%,rgba(8,39,46,.12) 78%)}.hero-content{position:relative;z-index:1;width:min(680px,80vw);margin-left:clamp(1.25rem,8vw,8.5rem);padding-bottom:2rem}.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;font-weight:700;color:var(--azure-light);margin:0 0 1.25rem}.eyebrow.dark{color:#087d91}.hero h1,.section h2,.values h2,.events h2,.visit h2{font-family:var(--serif);font-weight:600;line-height:1.02;letter-spacing:-.035em;margin:0}.hero h1{font-size:clamp(3.6rem,7vw,7rem)}.hero-copy{font-size:clamp(1.05rem,1.5vw,1.3rem);max-width:590px;margin:1.8rem 0 2rem}.hero-actions{display:flex;gap:.8rem;flex-wrap:wrap}.open-card{position:absolute;z-index:2;right:clamp(1.25rem,5vw,5rem);bottom:2rem;background:rgba(255,253,248,.95);color:var(--forest);padding:1rem 1.3rem;display:flex;align-items:flex-start;gap:.8rem;box-shadow:0 18px 45px rgba(0,0,0,.18)}.open-card strong,.open-card span{display:block}.open-card span{font-size:.8rem}.open-dot{width:9px;height:9px;border-radius:50%;background:var(--azure);margin-top:.5rem;flex:0 0 auto}
.section{padding:clamp(5rem,10vw,9rem) clamp(1.25rem,8vw,8.5rem)}.intro{display:grid;grid-template-columns:.45fr 1.15fr 1fr;gap:clamp(2rem,5vw,6rem);align-items:center;background:var(--cream)}.section-label{writing-mode:vertical-rl;transform:rotate(180deg);text-transform:uppercase;letter-spacing:.2em;font-size:.75rem;color:#7c796f}.intro h2,.moments h2,.visit h2{font-size:clamp(2.8rem,5vw,5.2rem)}.intro-copy>p:not(.eyebrow),.moments-copy>p:not(.eyebrow){max-width:590px;font-size:1.08rem;color:#4c554f}.text-link{display:inline-block;margin-top:1.2rem;color:var(--forest);font-weight:700;text-decoration:none;border-bottom:1px solid #b6aea0;padding-bottom:.25rem}.intro-image{margin:0}.intro-image img{width:100%;aspect-ratio:4/5;object-fit:cover}.intro-image figcaption{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;margin-top:.8rem;color:#736f66}
.daily-offer{display:flex;flex-direction:column;border-left:4px solid var(--azure);padding:.8rem 1rem;margin-top:1.5rem;background:rgba(255,255,255,.66);max-width:430px}.daily-offer span{font-size:.72rem;text-transform:uppercase;letter-spacing:.13em;color:#087d91;font-weight:700}.daily-offer strong{font-family:var(--serif);font-size:1.35rem;color:var(--ink)}.daily-offer small{font-size:.86rem;color:#68574c}
.section-cta{margin-top:1.3rem}.breakfast{display:grid;grid-template-columns:minmax(300px,.92fr) 1.08fr;gap:clamp(3rem,8vw,9rem);align-items:center;background:#fff}.breakfast figure{margin:0;position:relative}.breakfast figure:after{content:"";position:absolute;inset:1rem -1rem -1rem 1rem;border:2px solid var(--azure);z-index:0}.breakfast img{position:relative;z-index:1;width:100%;aspect-ratio:4/4.5;object-fit:cover}.breakfast h2{font-family:var(--serif);font-size:clamp(2.8rem,5vw,5.2rem);font-weight:600;line-height:1.02;letter-spacing:-.035em;margin:0 0 1.5rem}.breakfast div>p:not(.eyebrow){font-size:1.08rem;color:#4c5d61;max-width:650px}
.about{background:var(--paper)}.about-heading{display:grid;grid-template-columns:.62fr 1.38fr;gap:clamp(2rem,6vw,7rem);align-items:start}.about h2,.gallery-section h2{font-size:clamp(2.8rem,5vw,5.4rem);font-family:var(--serif);font-weight:600;line-height:1.02;letter-spacing:-.035em;margin:0}.about-lead{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(2rem,5vw,5rem);max-width:1120px;margin:4rem 0 5rem auto;font-size:1.12rem;color:#42565a}.about-lead p{margin:0}.about-lead strong{color:var(--forest)}.specialities{display:grid;grid-template-columns:1.15fr .85fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.specialities article{padding:2.3rem clamp(1.2rem,3vw,3rem) 2.6rem 0}.specialities article+article{border-left:1px solid var(--line);padding-left:clamp(1.2rem,3vw,3rem)}.specialities span{display:block;color:#087d91;text-transform:uppercase;letter-spacing:.13em;font-size:.74rem;font-weight:700}.specialities h3{font-family:var(--serif);font-size:1.6rem;margin:.9rem 0 .7rem}.specialities p{margin:0;color:#68574c}
.breakfast a,.specialities a{color:#087d91;font-weight:700}.team-intro{max-width:800px;margin:0 0 2rem}.team-intro h3{font-family:var(--serif);font-size:clamp(2rem,4vw,3.5rem);line-height:1.05;margin:0}.team-grid{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:5rem}.team-grid article{padding:2.2rem 3rem 2.4rem 0}.team-grid article+article{padding-left:3rem;border-left:1px solid var(--line)}.team-grid span{display:block;color:#087d91;text-transform:uppercase;letter-spacing:.13em;font-size:.74rem;font-weight:700}.team-grid h3{font-family:var(--serif);font-size:1.8rem;margin:.8rem 0}.team-grid p{margin:0;color:#68574c;max-width:570px}
.values{background:var(--forest);color:#fff;padding:clamp(5rem,9vw,8rem) clamp(1.25rem,8vw,8.5rem)}.values-heading{display:grid;grid-template-columns:.8fr 1.8fr;align-items:end;gap:3rem}.values h2{font-size:clamp(3rem,6vw,6rem)}.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:5rem;border-top:1px solid rgba(255,255,255,.25)}.value-grid article{padding:2.2rem 3rem 1rem 0;border-right:1px solid rgba(255,255,255,.25)}.value-grid article+article{padding-left:3rem}.value-grid article:last-child{border-right:0}.value-grid span{font-size:.76rem;color:var(--azure-light)}.value-grid h3{font-family:var(--serif);font-size:1.5rem;margin:1.2rem 0 .6rem}.value-grid p{color:#cbd3cf;margin:0}
.moments{display:grid;grid-template-columns:1fr .85fr 1fr;align-items:center;gap:clamp(2rem,5vw,5rem);background:#fff}.portrait{margin:0}.portrait img{width:100%;aspect-ratio:3/4;object-fit:cover}.portrait.offset{transform:translateY(3.5rem)}
.drinks{background:var(--paper)}.drinks-heading{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(2rem,7vw,8rem);align-items:end;margin-bottom:2.5rem}.drinks h2{font-family:var(--serif);font-size:clamp(2.8rem,5vw,5.4rem);font-weight:600;line-height:1.02;letter-spacing:-.035em;margin:0}.drinks-heading>div:last-child p{font-size:1.07rem;color:#68574c;margin:0 0 1.4rem}.price-note{padding:.85rem 1rem;background:var(--cream);border-left:4px solid var(--azure);font-size:.86rem;color:#53666a}.drinks-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin-top:2rem;align-items:start}.drinks details{border:1px solid var(--line);background:#fff}.drinks summary{cursor:pointer;list-style:none;padding:1.15rem 3.2rem 1.15rem 1.25rem;font-family:var(--serif);font-size:1.35rem;font-weight:600;position:relative;color:var(--forest)}.drinks summary::-webkit-details-marker{display:none}.drinks summary:after{content:"+";position:absolute;right:1.2rem;top:50%;transform:translateY(-50%);font-family:var(--sans);font-size:1.5rem;color:var(--azure)}.drinks details[open] summary:after{content:"−"}.drinks details[open] summary{border-bottom:1px solid var(--line)}.menu-note{margin:1rem 1.25rem 0;color:#69787b;font-size:.84rem}.menu-list{padding:.65rem 1.25rem 1.15rem}.menu-list>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:end;padding:.55rem 0;border-bottom:1px dotted #bdc9ca;line-height:1.35}.menu-list>div:last-child{border-bottom:0}.menu-list span{color:#68574c}.menu-list strong{text-align:right;white-space:nowrap;color:var(--forest);font-size:.92rem}.drinks-footer{display:grid;grid-template-columns:1fr 1.4fr;gap:2rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--line);font-size:.88rem;color:#586a6e}.drinks-footer p{margin:0}
.gallery-section{background:var(--cream)}.gallery-heading{display:grid;grid-template-columns:1.4fr .8fr;gap:clamp(2rem,7vw,8rem);align-items:end;margin-bottom:3.5rem}.gallery-heading>p,.gallery-intro>p{font-size:1.08rem;color:#68574c;margin:0 0 1.3rem}.photo-gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(190px,21vw,330px);gap:.75rem}.photo-gallery figure{margin:0;overflow:hidden;background:#dce8e8}.photo-gallery figure.gallery-wide{grid-column:span 2}.photo-gallery img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}.photo-gallery figure:hover img{transform:scale(1.025)}
.reviews{background:#fff}.reviews-heading{display:grid;grid-template-columns:.65fr 1.3fr .8fr;gap:clamp(2rem,5vw,6rem);align-items:start;margin-bottom:3.5rem}.reviews h2{font-family:var(--serif);font-size:clamp(2.5rem,4.7vw,5rem);line-height:1.02;letter-spacing:-.035em;margin:0}.reviews-heading>p:last-child{color:#68574c;font-size:1.04rem;margin:.4rem 0 0}.review-grid{display:grid;grid-template-columns:1.25fr .75fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.review-grid article{padding:2.5rem 3.5rem 2.7rem 0}.review-grid article+article{padding-left:3.5rem;border-left:1px solid var(--line)}.stars{color:#a66d00;letter-spacing:.16em}.review-grid blockquote{font-family:var(--serif);font-size:clamp(1.35rem,2.2vw,2rem);line-height:1.35;margin:1.2rem 0 1.8rem}.review-grid article>p{display:flex;flex-direction:column;margin:0}.review-grid article>p span{font-size:.82rem;color:#78685e}
.events{background:linear-gradient(120deg,rgba(11,41,47,.98),rgba(11,41,47,.88)),url("hero-bistro.webp") center/cover;color:#fff;padding:clamp(5rem,11vw,10rem) 1.25rem}.events-inner{max-width:1180px;margin:auto;text-align:center}.events h2{font-size:clamp(3rem,6vw,6.2rem)}.events-inner>p:not(.eyebrow){max-width:790px;margin:2rem auto;color:#e0e5e2;font-size:1.08rem}.event-options{display:grid;grid-template-columns:repeat(3,1fr);margin-top:3.5rem;text-align:left;border-top:1px solid rgba(255,255,255,.3);border-bottom:1px solid rgba(255,255,255,.3)}.event-options article{padding:2.5rem clamp(1.4rem,2.6vw,2.6rem) 2.8rem 0}.event-options article+article{border-left:1px solid rgba(255,255,255,.3);padding-left:clamp(1.4rem,2.6vw,2.6rem)}.event-options span{color:var(--azure-light);font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.13em}.event-options h3{font-family:var(--serif);font-size:2rem;margin:.8rem 0}.event-options p{color:#d9e4e5}.light-link{color:#fff;border-color:rgba(255,255,255,.55)}
.capacity-note{padding:.9rem 1.2rem;border:1px solid rgba(75,48,38,.3);width:max-content;max-width:100%}.seating-summary{margin:3rem 0 0;padding-top:1.4rem;border-top:1px solid var(--line);color:#68574c}
.visit{background:var(--cream)}.visit>div:first-child{margin-bottom:4rem}.visit-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}.visit-grid>div{padding:2rem 2rem 0 0}.visit-grid h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.12em}.visit-grid p{font-size:1.06rem}.visit-grid a{text-decoration:none}
footer{padding:3rem clamp(1.25rem,8vw,8.5rem);background:var(--cream);color:#dbe1de;display:grid;grid-template-columns:200px 1fr auto;gap:3rem;align-items:center}footer img{width:180px}footer p{margin:0}footer div{display:flex;gap:1.5rem}footer a{text-decoration:none;font-size:.88rem}.mobile-actions{display:none}
@media(max-width:920px){.site-header{height:78px;grid-template-columns:1fr auto auto;padding:0 1.25rem}.brand img{width:165px}.menu-toggle{display:block}.site-header nav{display:none;position:absolute;z-index:20;left:0;right:0;top:78px;background:var(--forest);padding:1rem 1.25rem 1.5rem;flex-direction:column}.site-header nav.open{display:flex}.header-cta{display:none}.hero{min-height:720px;height:calc(100svh - 78px);align-items:flex-end;padding-bottom:7rem}.hero-overlay{background:linear-gradient(0deg,rgba(14,28,23,.92),rgba(14,28,23,.16) 78%)}.hero-content{margin:0 1.25rem;width:auto;padding:0}.hero h1{font-size:clamp(3.1rem,13vw,5.4rem)}.open-card{display:none}.intro,.breakfast,.about-heading,.about-lead,.specialities,.values-heading,.value-grid,.moments,.drinks-heading,.drinks-grid,.drinks-footer,.gallery-heading,.event-options,.visit-grid{grid-template-columns:1fr}.section-label{display:none}.intro-image{order:-1}.intro-image img{aspect-ratio:16/11}.breakfast figure{margin-right:1rem}.about-lead{margin:2.5rem 0 3rem}.specialities article,.specialities article+article{padding:1.8rem 0;border-left:0;border-bottom:1px solid var(--line)}.specialities article:last-child{border-bottom:0}.value-grid article,.value-grid article+article{padding:1.7rem 0;border-right:0;border-bottom:1px solid rgba(255,255,255,.22)}.value-grid article:last-child{border-bottom:0}.portrait img{aspect-ratio:4/3}.portrait.offset{transform:none}.moments-copy{padding:1.5rem 0}.drinks-grid{gap:.6rem}.menu-list>div{grid-template-columns:1fr;gap:.2rem}.menu-list strong{text-align:left;white-space:normal;color:#087d91}.photo-gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(180px,54vw,290px)}.photo-gallery figure.gallery-wide{grid-column:span 2}.event-options article,.event-options article+article{padding:2rem 0;border-left:0;border-bottom:1px solid rgba(255,255,255,.3)}.event-options article:last-child{border-bottom:0}.visit-grid>div{padding:1.5rem 0;border-top:1px solid var(--line)}footer{grid-template-columns:1fr;text-align:center;justify-items:center;gap:1rem;padding-bottom:6rem}footer div{justify-content:center}.mobile-actions{position:fixed;z-index:30;display:grid;grid-template-columns:repeat(3,1fr);left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);padding:.55rem}.mobile-actions a{text-decoration:none;text-align:center;padding:.6rem .25rem;font-size:.83rem;font-weight:700;border-right:1px solid var(--line)}.mobile-actions a:last-child{border:0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}}

/* Kaffee-Identität mit azurblauer Markenwelt */
.brand,.footer-brand{display:flex;align-items:center;gap:.65rem;width:max-content;text-decoration:none;text-transform:uppercase;line-height:.88;letter-spacing:.08em}
.brand>img,.footer-brand>img{width:47px;height:35px;object-fit:contain;flex:0 0 auto}
.brand-copy{display:flex;flex-direction:column}
.brand-copy strong{font-family:var(--serif);font-size:1.65rem;font-weight:600;letter-spacing:.025em;color:var(--logo-gold)}
.brand-copy>span{font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.22em;margin-top:.45rem;color:var(--logo-gold)}
.hero-image img{object-position:center 52%}
.hero-overlay{background:linear-gradient(90deg,rgba(14,28,23,.9) 0%,rgba(14,28,23,.58) 46%,rgba(14,28,23,.12) 80%)}
footer>div:last-child{display:flex;gap:1.5rem}
.footer-brand .brand-copy>span{color:var(--logo-gold)}
@media(max-width:920px){.brand>img,.footer-brand>img{width:40px;height:30px}.brand-copy strong{font-size:1.4rem}.brand-copy>span{font-size:.61rem}}

/* Terrassentisch-Farbwelt: Originalton #a3ebfb */
.hero-overlay{background:linear-gradient(90deg,rgba(58,39,29,.92) 0%,rgba(88,60,43,.58) 48%,rgba(244,234,219,.08) 80%)}
.values{background:var(--cream);color:var(--ink)}
.value-grid{border-color:rgba(75,48,38,.25)}
.value-grid article{border-color:rgba(75,48,38,.25)}
.value-grid span{color:#7c5600}
.value-grid p{color:#68574c}
.events{background:linear-gradient(120deg,rgba(244,234,219,.97),rgba(244,234,219,.90)),url("hero-bistro.webp") center/cover;color:var(--ink)}
.events-inner>p:not(.eyebrow),.event-options p{color:#68574c}
.event-options{border-color:rgba(75,48,38,.28)}
.event-options article+article{border-color:rgba(75,48,38,.28)}
.event-options span{color:#765000}
.light-link{color:var(--ink);border-color:rgba(75,48,38,.5)}
footer{background:var(--table-blue-strong);color:var(--ink)}
.brand-copy strong,.brand-copy>span{text-shadow:0 1px 1px rgba(83,50,0,.5)}
@media(max-width:920px){.site-header nav{background:var(--cream)}.hero-overlay{background:linear-gradient(0deg,rgba(58,39,29,.94),rgba(88,60,43,.28) 78%)}.value-grid article,.value-grid article+article{border-color:rgba(75,48,38,.25)}.event-options article,.event-options article+article{border-color:rgba(75,48,38,.28)}}

/* Vollständige Galerie */
.gallery-page{background:var(--paper)}.gallery-page-hero{padding:clamp(4rem,8vw,7rem) clamp(1.25rem,8vw,8.5rem);background:var(--cream);color:var(--ink)}.gallery-page-hero h1{font-family:var(--serif);font-size:clamp(3.4rem,7vw,7rem);line-height:.98;letter-spacing:-.045em;margin:0}.gallery-page-hero>p:last-child{max-width:720px;font-size:1.1rem;margin:1.5rem 0 0}.gallery-controls{padding:1.2rem clamp(1.25rem,8vw,8.5rem);display:flex;gap:.55rem;flex-wrap:wrap;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}.gallery-filter{border:1px solid var(--line);background:#fff;color:var(--ink);padding:.62rem 1rem;border-radius:100px;font:600 .88rem var(--sans);cursor:pointer}.gallery-filter:hover,.gallery-filter.active{background:var(--azure);border-color:var(--azure);color:#fff}.gallery-all{padding:clamp(3.5rem,7vw,6rem) clamp(1.25rem,5vw,5.5rem)}.gallery-group{margin-bottom:clamp(4rem,8vw,7rem)}.gallery-group[hidden]{display:none}.gallery-group-heading{display:flex;align-items:end;justify-content:space-between;gap:2rem;margin:0 auto 1.5rem;max-width:1400px;border-bottom:1px solid var(--line);padding-bottom:1rem}.gallery-group-heading h2{font-family:var(--serif);font-size:clamp(2rem,4vw,3.5rem);line-height:1;margin:0}.gallery-group-heading span{color:#78685e;font-size:.9rem}.gallery-masonry{columns:4 250px;column-gap:.75rem;max-width:1400px;margin:auto}.gallery-tile{display:block;width:100%;padding:0;border:0;background:#f4eadb;cursor:zoom-in;break-inside:avoid;margin:0 0 .75rem;overflow:hidden}.gallery-tile img{display:block;width:100%;height:auto;transition:transform .35s ease}.gallery-tile:hover img{transform:scale(1.02)}.gallery-dialog{width:min(94vw,1200px);max-height:92vh;padding:0;border:0;background:transparent}.gallery-dialog::backdrop{background:rgba(58,39,29,.88)}.gallery-dialog img{max-width:100%;max-height:88vh;margin:auto}.gallery-close{position:fixed;right:1.2rem;top:1.2rem;width:44px;height:44px;border:0;border-radius:50%;background:#fff;color:var(--ink);font-size:1.7rem;cursor:pointer;box-shadow:0 6px 22px rgba(0,0,0,.25)}@media(max-width:700px){.gallery-controls{position:static}.gallery-all{padding-left:.75rem;padding-right:.75rem}.gallery-group-heading{margin-left:.5rem;margin-right:.5rem}.gallery-masonry{columns:2 145px}.gallery-filter{font-size:.8rem;padding:.55rem .8rem}}@media(max-width:920px){.team-grid{grid-template-columns:1fr}.team-grid article,.team-grid article+article{padding:1.8rem 0;border-left:0;border-bottom:1px solid var(--line)}.team-grid article:last-child{border-bottom:0}.capacity-note{width:auto}}

/* content-updates.css */
@media (max-width: 920px) {
  .reviews-heading,
  .review-grid {
    grid-template-columns: 1fr;
  }

  .review-grid article,
  .review-grid article + article {
    padding: 1.8rem 0;
    border-left: 0;
    border-bottom: 1px solid var(--line);
  }

  .review-grid article:last-child {
    border-bottom: 0;
  }
}

/* Galerie als gleichmässiger Filmstreifen */
.gallery-page .gallery-masonry {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
  columns: unset;
}

.gallery-page .gallery-group[data-group="bistro"] .gallery-masonry {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gallery-page .gallery-tile {
  height: clamp(190px, 18vw, 280px);
  margin: 0;
}

.gallery-page .gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 700px) {
  .gallery-page .gallery-masonry,
  .gallery-page .gallery-group[data-group="bistro"] .gallery-masonry {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gallery-page .gallery-tile {
    height: clamp(145px, 42vw, 210px);
  }
}

/* Rechtliche Seiten: ruhig, lesbar und in der bestehenden Markenwelt */
.legal-page {
  background: #faf5ec;
  color: #4b3026;
}

.legal-heading {
  padding: clamp(4.5rem, 9vw, 8rem) max(6vw, calc((100vw - 1180px) / 2));
  background: #f4eadb;
}

.legal-heading h1 {
  max-width: 900px;
  margin: .35rem 0 1rem;
  font-size: clamp(2.65rem, 7vw, 6rem);
  line-height: .98;
  letter-spacing: -.045em;
}

.legal-heading > p:last-child {
  max-width: 720px;
  margin: 0;
  font-size: clamp(1rem, 1.8vw, 1.25rem);
}

.legal-content {
  width: min(900px, 88vw);
  margin: 0 auto;
  padding: clamp(3.5rem, 7vw, 7rem) 0;
}

.legal-content section {
  padding: 0 0 2rem;
  margin: 0 0 2rem;
  border-bottom: 1px solid rgba(7, 63, 80, .2);
}

.legal-content h2 {
  margin: 0 0 .85rem;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  line-height: 1.2;
}

.legal-content p,
.legal-content li,
.legal-content address {
  font-size: 1rem;
  line-height: 1.75;
}

.legal-content p,
.legal-content address {
  margin: 0 0 1rem;
}

.legal-content address {
  font-style: normal;
}

.legal-content ul {
  margin: .6rem 0 1rem;
  padding-left: 1.35rem;
}

.legal-content a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

.legal-version {
  margin: 0;
  color: #68574c;
}

footer a[aria-current="page"] {
  text-decoration-thickness: 2px;
}

:where(a, button, summary):focus-visible {
  outline: 3px solid #8a5a00;
  outline-offset: 4px;
}

.menu-toggle {
  border-radius: 4px;
}

.menu-toggle[aria-expanded="true"] {
  background: rgba(21, 155, 182, .12);
}

/* Kompakte Startseite: Wegweiser statt wiederholter Unterseiten */
.home-guide {
  background: #fff;
}

.home-guide-heading {
  display: grid;
  grid-template-columns: .65fr 1.35fr;
  gap: clamp(2rem, 6vw, 7rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.home-guide-heading h2,
.home-story h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.8rem, 5vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -.035em;
}

.home-guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.home-guide-grid > a {
  min-height: 245px;
  padding: clamp(1.7rem, 3vw, 2.8rem);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}

.home-guide-grid > a:hover {
  background: var(--cream);
}

.home-guide-grid span {
  display: block;
  color: #087d91;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.home-guide-grid h3 {
  margin: .8rem 0 .65rem;
  font-family: var(--serif);
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  line-height: 1.1;
}

.home-guide-grid p {
  max-width: 500px;
  margin: 0 0 1.25rem;
  color: #68574c;
}

.home-guide-grid strong {
  color: #087d91;
}

.home-story {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(3rem, 8vw, 9rem);
  align-items: start;
  background: var(--cream);
}

.home-story > div:last-child {
  padding-top: .3rem;
  font-size: 1.08rem;
}

.home-story > div:last-child p:first-child {
  margin-top: 0;
}

@media (max-width: 1150px) and (min-width: 921px) {
  .site-header {
    position: relative;
    height: 78px;
    grid-template-columns: 1fr auto;
  }

  .menu-toggle {
    display: block;
    width: 44px;
    height: 44px;
    padding: 10px;
  }

  .site-header nav {
    display: none;
    position: absolute;
    z-index: 20;
    top: 78px;
    right: 0;
    left: 0;
    flex-direction: column;
    gap: 0;
    max-height: calc(100vh - 78px);
    overflow-y: auto;
    padding: 1rem 1.5rem 1.5rem;
    background: #f4eadb;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 14px 30px rgba(75,48,38, .12);
  }

  .site-header nav.open {
    display: flex;
  }

  .site-header nav a {
    min-height: 44px;
    padding: .6rem 0;
    font-size: .9rem;
  }
}

@media (max-width: 700px) {
  .home-guide-heading,
  .home-story,
  .home-guide-grid {
    grid-template-columns: 1fr;
  }

  .home-guide-grid > a {
    min-height: 0;
  }

  .home-story {
    gap: 2rem;
  }

  .gallery-group-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: .45rem;
  }

  .gallery-group-heading span {
    line-height: 1.35;
  }
}

@media (max-width: 700px) {
  .legal-heading {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .legal-content {
    width: min(100% - 2rem, 900px);
    padding-top: 3rem;
    padding-bottom: 4.5rem;
  }
}

/* Aufgabe 5: ruhige, Buchmann-nahe Typografie */
:root {
  --sans: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

body {
  font-size: 18px;
  line-height: 1.55;
}

button,
input,
select,
textarea {
  font-family: var(--sans);
}

.eyebrow {
  font-size: .82rem;
  font-weight: 600;
}

@media (max-width: 920px) {
  body {
    font-size: 17px;
  }

}

/* Eigenständige Inhaltsseiten */
.site-header {
  grid-template-columns: minmax(190px, 250px) 1fr;
}

.brand > img.brand-logo,
.footer-brand > img.brand-logo {
  width: 230px;
  height: auto;
  object-fit: contain;
}

.subpage {
  background: var(--paper);
}

.subpage-hero {
  padding: clamp(5rem, 10vw, 9rem) clamp(1.25rem, 8vw, 8.5rem);
  background: var(--cream);
  color: var(--ink);
}

.subpage-hero h1 {
  max-width: 1100px;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3.4rem, 7vw, 7rem);
  line-height: .98;
  letter-spacing: -.045em;
}

.subpage-hero > p:last-child {
  max-width: 760px;
  margin: 1.6rem 0 0;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.7;
  color: #68574c;
}

.subpage-content {
  padding: clamp(4rem, 8vw, 7rem) clamp(1.25rem, 8vw, 8.5rem);
}

.split-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr);
  align-items: center;
  gap: clamp(3rem, 8vw, 8rem);
}

.split-feature.reverse > figure {
  order: -1;
}

.split-feature h2,
.subpage-band h2 {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 5vw, 5rem);
  line-height: 1;
  letter-spacing: -.035em;
}

.split-feature figure {
  margin: 0;
}

.split-feature figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.split-feature figcaption {
  margin-top: .7rem;
  color: #78685e;
  font-size: .88rem;
}

.subpage-band {
  padding: clamp(4rem, 7vw, 6rem) clamp(1.25rem, 8vw, 8.5rem);
  background: var(--cream);
  text-align: center;
}

.subpage-band h2,
.subpage-band p {
  max-width: 850px;
  margin-left: auto;
  margin-right: auto;
}

.story-lead {
  max-width: 900px;
  margin: 0 auto clamp(3rem, 6vw, 5rem);
  font-family: var(--serif);
  font-size: clamp(1.65rem, 3vw, 2.65rem);
  line-height: 1.25;
}

.subpage-events {
  padding-top: clamp(4rem, 7vw, 6rem);
}

.subpage-events .capacity-note {
  margin-top: 0;
}

nav a[aria-current="page"] {
  border-bottom-color: currentColor;
}

/* Bankette & Catering: bildbetont, persönlich und klar gegliedert */
.event-hero {
  position: relative;
  min-height: clamp(520px, 75vh, 820px);
  overflow: hidden;
}

.event-hero-images {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.event-hero-images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.event-hero-images img:first-child {
  object-position: 52% center;
}

.event-hero-images img:nth-child(2) {
  object-position: center;
}

.event-hero-images img:last-child {
  object-position: 48% center;
}

.event-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(58,39,29, .78), rgba(58,39,29, .12) 72%);
}

.event-hero-copy {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: inherit;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(3rem, 8vw, 7rem) clamp(1.25rem, 8vw, 8.5rem);
  color: #fff;
}

.event-hero-copy h1 {
  margin: .5rem 0 0;
  font-family: var(--serif);
  font-size: clamp(4rem, 9vw, 9rem);
  line-height: .82;
  letter-spacing: -.055em;
}

.event-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 8vw, 8rem);
  padding: clamp(5rem, 9vw, 8rem) clamp(1.25rem, 8vw, 8.5rem);
}

.event-story h2,
.event-offers h2,
.event-capacity h2 {
  margin: .5rem 0 0;
  font-family: var(--serif);
  font-size: clamp(2.8rem, 5.4vw, 5.6rem);
  line-height: .98;
  letter-spacing: -.04em;
}

.event-story > div:last-child {
  max-width: 650px;
  font-size: 1.12rem;
  line-height: 1.75;
}

.event-photo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(210px, 28vw, 430px);
  gap: .7rem;
  padding: 0 clamp(.7rem, 2vw, 2rem);
}

.event-photo-grid figure {
  margin: 0;
  overflow: hidden;
}

.event-photo-grid .event-photo-wide {
  grid-column: span 2;
}

.event-photo-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.event-offers {
  padding: clamp(5rem, 9vw, 8rem) clamp(1.25rem, 8vw, 8.5rem);
}

.event-offers-heading {
  max-width: 760px;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.event-offer-list {
  border-top: 1px solid var(--line);
}

.event-offer-list article {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: clamp(2.5rem, 5vw, 4.5rem) 0;
  border-bottom: 1px solid var(--line);
}

.event-offer-list article > span {
  font-family: var(--serif);
  font-size: 2.5rem;
  color: #765000;
}

.event-offer-list article > div {
  max-width: 760px;
}

.event-offer-list h3 {
  margin: .4rem 0 1rem;
  font-family: var(--serif);
  font-size: clamp(2.3rem, 4vw, 4rem);
}

.event-capacity {
  padding: clamp(5rem, 9vw, 8rem) clamp(1.25rem, 8vw, 8.5rem);
  background: var(--cream);
  text-align: center;
}

.event-capacity h2,
.event-capacity > p:not(.eyebrow) {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.button-mail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
}

.button-mail svg {
  width: 2rem;
  height: 1.5rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Getränkekarte: einspaltiges Schachtelsystem */
.beverage-menu {
  padding: clamp(4rem, 8vw, 7rem) clamp(1.25rem, 8vw, 8.5rem);
}

.beverage-intro {
  max-width: 760px;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.beverage-intro h2 {
  margin: .5rem 0 1rem;
  font-family: var(--serif);
  font-size: clamp(2.8rem, 5vw, 5rem);
  line-height: 1;
}

.drinks-grid {
  grid-template-columns: minmax(0, 1fr);
  max-width: 980px;
  margin: 0 auto;
}

.beverage-menu .drinks-grid details {
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 12px 32px rgba(75,48,38, .05);
}

.beverage-menu .drinks-grid summary {
  padding: 1.55rem 1.65rem;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
}

.beverage-menu .drinks-grid details[open] summary {
  background: var(--cream);
}

.beverage-menu .menu-list,
.beverage-menu .menu-note {
  margin-left: 1.65rem;
  margin-right: 1.65rem;
}

.beverage-menu .drinks-grid {
  gap: 1.1rem;
}

.beverage-menu .menu-list > div {
  padding-top: .8rem;
  padding-bottom: .8rem;
}

.beverage-menu .drinks-footer {
  max-width: 980px;
  margin: 2rem auto 0;
}

/* À-la-carte-Karte */
.alacarte-menu {
  padding: clamp(4rem, 8vw, 7rem) clamp(1.25rem, 8vw, 8.5rem);
}

.alacarte-heading {
  display: grid;
  grid-template-columns: minmax(170px, .55fr) 2.25fr;
  align-items: end;
  gap: clamp(1.5rem, 4vw, 4rem);
  margin-bottom: clamp(3.5rem, 7vw, 6rem);
}

.alacarte-heading h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.8rem, 5vw, 5.2rem);
  line-height: .98;
  letter-spacing: -.04em;
}

.alacarte-heading > p:last-child {
  margin: 0;
  color: #68574c;
  line-height: 1.7;
}

.alacarte-sections {
  max-width: 1120px;
  margin: 0 auto;
  border-top: 1px solid var(--line);
}

.menu-category {
  display: grid;
  grid-template-columns: minmax(210px, .62fr) 1.6fr;
  gap: clamp(2rem, 6vw, 6rem);
  padding: clamp(2.8rem, 5vw, 4.8rem) 0;
  border-bottom: 1px solid var(--line);
}

.menu-category > header {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
}

.menu-category > header span {
  color: #765000;
  font-family: var(--serif);
  font-size: 1.4rem;
}

.menu-category h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.2vw, 2.15rem);
  line-height: 1.15;
  overflow-wrap: normal;
}

.dish-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  padding: 0 0 1.8rem;
  margin-bottom: 1.8rem;
  border-bottom: 1px dotted #9fb4b8;
}

.dish-list article:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}

.dish-list h4 {
  margin: 0 0 .4rem;
  font-size: 1.18rem;
}

.dish-list p {
  margin: 0;
  color: #68574c;
}

.dish-list strong {
  text-align: right;
  line-height: 1.65;
  white-space: nowrap;
}

.menu-information {
  max-width: 1120px;
  margin: clamp(3rem, 6vw, 5rem) auto 0;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--cream);
}

.menu-information p {
  margin: .55rem 0;
  line-height: 1.65;
}

@media (max-width: 1100px) and (min-width: 921px) {
  .site-header nav {
    gap: .7rem;
  }

  .site-header nav a {
    font-size: .82rem;
  }
}

.event-capacity > p:not(.eyebrow) {
  margin-top: 1.8rem;
  margin-bottom: 2rem;
  font-size: 1.08rem;
}

@media (max-width: 920px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }

  .brand > img.brand-logo,
  .footer-brand > img.brand-logo {
    width: 190px;
    height: auto;
  }

  .split-feature {
    grid-template-columns: 1fr;
  }

  .split-feature figure,
  .split-feature.reverse > figure {
    order: -1;
  }

  .subpage-hero {
    padding-top: 4rem;
  }

  .event-story {
    grid-template-columns: 1fr;
  }

  .event-photo-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: clamp(180px, 48vw, 300px);
  }

  .event-offer-list article {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .alacarte-heading,
  .menu-category {
    grid-template-columns: 1fr;
  }

  .alacarte-heading {
    align-items: start;
  }

  .menu-category {
    gap: 2rem;
  }

  .dish-list article {
    gap: 1rem;
  }
}

/* Typografie muss als letzte Regel im Stylesheet gelten. */
.site-header nav a {
  font-size: 1rem;
  font-weight: 500;
}

.hero h1,
.subpage-hero h1 {
  font-size: clamp(3.25rem, 6vw, 5.5rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.035em;
}

.event-hero h1 {
  font-size: clamp(3.5rem, 6.5vw, 5.75rem);
  font-weight: 500;
  line-height: .96;
  letter-spacing: -0.04em;
}

.section h2,
.values h2,
.events h2,
.visit h2,
.breakfast h2,
.about h2,
.gallery-section h2,
.drinks h2,
.reviews h2,
.subpage-content h2,
.beverage-intro h2,
.event-offers-heading h2,
.gallery-group-heading h2 {
  font-size: clamp(2.25rem, 3.8vw, 3.75rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

h3,
.team-intro h3,
.specialities h3,
.team-grid h3,
.event-options h3,
.drinks summary {
  font-weight: 500;
  letter-spacing: -0.015em;
}

.subpage-hero > p:last-child,
.hero-copy,
.intro-copy > p:not(.eyebrow),
.breakfast div > p:not(.eyebrow),
.moments-copy > p:not(.eyebrow) {
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.55;
}

@media (max-width: 920px) {
  .site-header nav a {
    font-size: 1rem;
  }

  .hero h1,
  .subpage-hero h1,
  .event-hero h1 {
    font-size: clamp(2.75rem, 11vw, 4.6rem);
  }
}

/* Öffnungszeiten und Gutscheine */
.voucher-section {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
  align-items: center;
  gap: clamp(2.5rem, 7vw, 7rem);
  padding: clamp(4.5rem, 9vw, 8rem) clamp(1.25rem, 8vw, 8.5rem);
  background: var(--cream);
}

.voucher-section figure {
  margin: 0;
  padding: clamp(.55rem, 1vw, .85rem);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 22px 55px rgba(75,48,38, .13);
  transform: rotate(-1deg);
}

.voucher-section img {
  width: 100%;
  height: auto;
}

.voucher-section h2 {
  margin: 0 0 1.25rem;
  font-size: clamp(2.5rem, 4.5vw, 4.5rem);
  font-weight: 500;
  line-height: 1.03;
  letter-spacing: -.035em;
}

.voucher-section div > p:not(.eyebrow) {
  max-width: 620px;
  margin: 0 0 1.8rem;
  font-size: 1.15rem;
  line-height: 1.6;
  color: #68574c;
}

.button-gold {
  background: var(--logo-gold);
  color: var(--ink);
}

.button-gold:hover {
  background: #ffd65e;
  transform: translateY(-2px);
}

@media (max-width: 920px) {
  .voucher-section {
    grid-template-columns: 1fr;
  }

  .voucher-section figure {
    transform: none;
  }
}

/* Dreispaltiger Servicebereich nach Huberta-Prinzip */
.service-hub {
  padding: clamp(3.5rem, 7vw, 6rem) clamp(1.25rem, 6vw, 6rem);
  background: var(--cream);
  color: var(--ink);
  border-top: 1px solid rgba(75,48,38, .2);
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1500px;
  margin: 0 auto;
}

.service-grid article {
  min-width: 0;
  padding: 0 clamp(1.5rem, 3vw, 3.5rem);
}

.service-grid article:first-child {
  padding-left: 0;
}

.service-grid article:last-child {
  padding-right: 0;
}

.service-grid article + article {
  border-left: 1px solid rgba(75,48,38, .24);
}

.service-grid h2 {
  margin: 0 0 1.6rem;
  font-size: clamp(2rem, 3vw, 3.2rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.025em;
}

.service-grid p {
  margin: 0 0 1.15rem;
  line-height: 1.55;
}

.service-grid a:not(.button) {
  color: inherit;
  text-underline-offset: .18em;
}

.voucher-preview {
  display: block;
  align-items: center;
  gap: .8rem;
  width: 100%;
  margin: .8rem 0 1.2rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: zoom-in;
}

.voucher-preview span {
  display: none;
}

.voucher-preview img {
  width: 160px;
  height: auto;
  object-fit: contain;
}

.voucher-preview:hover {
  background: transparent;
}

.footer-pending {
  font-size: .88rem;
}

.wine-entry span {
  display: grid;
  gap: .25rem;
}

.wine-category {
  margin: 1.3rem 0 .15rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.wine-category:first-child {
  margin-top: .35rem;
}

.wine-entry b {
  color: var(--ink);
  font-size: 1rem;
}

.wine-entry small {
  color: #68574c;
  font-size: .88rem;
  line-height: 1.5;
}

.wine-entry em {
  color: #78685e;
}

.drinks-footer.drinks-footer-full {
  grid-template-columns: 1fr;
  gap: .5rem;
}

.voucher-lightbox {
  width: min(94vw, 1200px);
  max-height: 94vh;
  padding: 0;
  border: 0;
  background: transparent;
}

.voucher-lightbox::backdrop {
  background: rgba(58,39,29, .88);
}

.voucher-lightbox img {
  display: block;
  max-width: 100%;
  max-height: 90vh;
  margin: auto;
}

.voucher-lightbox-close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font: 500 1.8rem/1 var(--sans);
  cursor: pointer;
}

@media (max-width: 920px) {
  .service-grid {
    grid-template-columns: 1fr;
  }

  .service-grid article,
  .service-grid article:first-child,
  .service-grid article:last-child {
    padding: 2rem 0;
  }

  .service-grid article + article {
    border-left: 0;
    border-top: 1px solid rgba(75,48,38, .24);
  }
}

/* Aufgabe 7: hellere, luftige Farbwelt */
:root {
  --table-blue: #f4eadb;
  --table-blue-strong: #a3ebfb;
  --cream: #faf5ec;
  --paper: #ffffff;
  --azure-light: #e2f9fd;
  --line: #dfd2c2;
}

body,
.subpage,
.gallery-page {
  background: #fff;
}

.site-header {
  background: #f4eadb;
  border-bottom: 1px solid rgba(75,48,38, .08);
}

.intro,
.gallery-section,
.visit {
  background: #faf5ec;
}

.values,
.subpage-hero,
.subpage-band,
.event-capacity,
.menu-information,
.gallery-page-hero,
.service-hub {
  background: #f4eadb;
}

.events {
  background:
    linear-gradient(120deg, rgba(244,234,219, .96), rgba(250,245,236, .94)),
    url("hero-bistro.webp") center / cover;
}

footer {
  background: #f4eadb;
}

.hero-overlay {
  background: linear-gradient(
    90deg,
    rgba(58,39,29, .82) 0%,
    rgba(88,60,43, .40) 48%,
    rgba(250,245,236, .05) 80%
  );
}

.event-hero::after {
  background: linear-gradient(
    90deg,
    rgba(58,39,29, .70),
    rgba(58,39,29, .08) 72%
  );
}

.beverage-menu .drinks-grid details {
  border-color: #dfd2c2;
  box-shadow: 0 10px 28px rgba(75,48,38, .035);
}

@media (max-width: 920px) {
  .site-header nav {
    background: #f4eadb;
    max-height: calc(100vh - 142px);
    max-height: calc(100svh - 142px - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .site-header nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: .55rem 0;
  }

  .menu-toggle {
    width: 44px;
    height: 44px;
    padding: 10px;
  }

  .mobile-actions {
    padding-bottom: max(.55rem, env(safe-area-inset-bottom, 0px));
  }

  .mobile-actions a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }

  .drinks .menu-list strong,
  .beverage-menu .menu-list strong {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    font-size: clamp(.78rem, 3.15vw, .9rem);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.015em;
    scrollbar-width: none;
  }

  .drinks .menu-list strong::-webkit-scrollbar,
  .beverage-menu .menu-list strong::-webkit-scrollbar {
    display: none;
  }

  .hero-overlay {
    background: linear-gradient(
      0deg,
      rgba(58,39,29, .88),
      rgba(88,60,43, .22) 78%
    );
  }
}

@media (max-width: 480px) {
  .drinks .menu-list {
    padding-right: .75rem;
    padding-left: .75rem;
  }

  .beverage-menu .menu-list {
    margin-right: .75rem;
    margin-left: .75rem;
    padding-right: .5rem;
    padding-left: .5rem;
  }
}

/* Long-form text on the legal detail pages. */
.legal-content p,
.legal-content li,
.legal-heading > p:last-child {
  text-align: justify;
  text-align-last: left;
  hyphens: auto;
}

/* Keep the entire business number together on narrow screens. */
a[href="tel:+41433116045"] {
  white-space: nowrap;
  display: inline-block;
}

/* Einheitliche Hero-Position und ausgewogene Zeilenumbrüche */
.hero-content {
  transform: translateY(-.85rem);
}

/* Startseite auf Laptop-Displays vollständig im ersten Sichtbereich halten. */
@media (min-width: 921px) {
  .home .hero {
    height: calc(100svh - 94px);
    min-height: 560px;
    max-height: 820px;
  }

  .home .hero-content {
    transform: translateY(-2.6rem);
  }

  .home .open-card {
    bottom: clamp(3.75rem, 8vh, 5.75rem);
  }
}

@media (min-width: 921px) and (max-height: 700px) {
  .home .hero {
    min-height: calc(100svh - 94px);
  }

  .home .hero-content {
    transform: translateY(-1.8rem);
  }

  .home .hero h1 {
    font-size: clamp(3rem, 5.4vw, 4.8rem);
  }

  .home .hero-copy {
    margin-top: 1.15rem;
    margin-bottom: 1.35rem;
  }

  .home .open-card {
    bottom: 2.75rem;
  }
}

.subpage-hero > * {
  position: relative;
  transform: translateY(-.85rem);
}

.event-hero-copy {
  transform: translateY(-.85rem);
}

.home main h1,
.home main h2,
.home main h3 {
  text-wrap: balance;
}

.home main p {
  text-wrap: pretty;
}

/* Hauptaktionen: Tagesmenüs und Reservation sind geometrisch identisch. */
.hero-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 11rem));
  width: max-content;
  max-width: 100%;
}

.hero-actions .button {
  width: 100%;
  height: 52px;
  min-height: 52px;
}

@media (max-width: 920px) {
  .hero {
    min-height: calc(100svh - 78px);
    height: auto;
    padding-top: clamp(3.5rem, 9vh, 5.5rem);
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
  }

  .hero-content {
    transform: translateY(-1rem);
    padding-bottom: 0;
  }

  .subpage-hero > *,
  .event-hero-copy {
    transform: translateY(-1rem);
  }

  .hero-actions {
    align-items: stretch;
  }

  .hero-actions .button {
    height: 52px;
    min-height: 52px;
  }
}

@media (max-width: 380px) {
  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .hero-actions .button {
    width: 100%;
  }
}

/* Vollständige Wortmarke: BISTRO / ALBISRIEDEN / SEIT 2005. */
.brand-lockup {
  display: grid;
  grid-template-columns: 42% 58%;
  align-items: center;
  width: clamp(210px, 18vw, 260px);
  flex: 0 0 auto;
}

.brand-lockup > .brand-bean {
  display: block;
  width: 100%;
  height: auto;
}

.brand-wordmark {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: .18em;
  min-width: 0;
  color: #5a3526;
  font-family: var(--sans);
  font-weight: 600;
  line-height: 1.08;
  text-align: center;
  white-space: nowrap;
}

.brand-wordmark > span {
  display: block;
  width: 100%;
  color: #5a3526;
}

.brand-title {
  font-size: clamp(1.05rem, 1.55vw, 1.48rem);
  font-weight: 500;
  letter-spacing: .075em;
}

.brand-place {
  font-size: clamp(.55rem, .77vw, .74rem);
  letter-spacing: .135em;
}

.brand-year {
  margin-top: .12em;
  font-size: clamp(.46rem, .6vw, .58rem);
  font-weight: 700;
  letter-spacing: .2em;
}

.footer-brand .brand-lockup {
  width: 260px;
}

.footer-brand .brand-title {
  font-size: 1.48rem;
}

.footer-brand .brand-place {
  font-size: .74rem;
}

.footer-brand .brand-year {
  font-size: .58rem;
}

@media (max-width: 920px) {
  .brand .brand-lockup {
    width: 196px;
  }

  .footer-brand .brand-lockup {
    width: 240px;
  }

  .brand .brand-title {
    font-size: 1.08rem;
  }

  .brand .brand-place {
    font-size: .56rem;
  }

  .brand .brand-year {
    font-size: .46rem;
  }
}

@media (max-width: 380px) {
  .brand .brand-lockup {
    width: 182px;
  }

  .footer-brand .brand-lockup {
    width: 225px;
  }
}

/* Direkte Reservationsauswahl */
.reservation-dialog {
  width: min(96vw, 860px);
  padding: clamp(1.6rem, 5vw, 2.8rem);
  border: 0;
  border-radius: .65rem;
  background: #faf5ec;
  color: var(--ink);
  box-shadow: 0 28px 80px rgba(58,39,29, .34);
}

.reservation-dialog::backdrop {
  background: rgba(58,39,29, .78);
}

.reservation-dialog h2 {
  margin: .2rem 2.5rem .8rem 0;
  font-family: var(--serif);
  font-size: clamp(2rem, 6vw, 3.35rem);
  line-height: 1.04;
  letter-spacing: -.035em;
}

.reservation-dialog > p:not(.eyebrow) {
  max-width: 52ch;
}

.reservation-dialog-close {
  position: absolute;
  top: .8rem;
  right: .8rem;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(75,48,38, .18);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font: 400 1.7rem/1 var(--sans);
  cursor: pointer;
}

.reservation-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.6rem 0 1rem;
}

.reservation-options .button {
  display: flex;
  min-width: 0;
  min-height: 88px;
  flex-direction: column;
  gap: .18rem;
  padding: 1rem;
  text-align: center;
}

.reservation-options span {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.reservation-options strong {
  max-width: none;
  white-space: nowrap;
  overflow-wrap: normal;
  font-size: clamp(.82rem, 1.8vw, 1.08rem);
  line-height: 1.2;
}

.reservation-note {
  margin: 0;
  color: #68574c;
  font-size: .9rem;
}

.reservation-email-form {
  margin: 0 0 1.2rem;
  padding: 1.2rem;
  border: 1px solid rgba(75,48,38, .2);
  border-radius: .45rem;
  background: rgba(255, 255, 255, .62);
}

.reservation-email-form[hidden] {
  display: none;
}

.reservation-dialog [hidden] {
  display: none;
}

.reservation-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem 1rem;
}

.reservation-form-grid label {
  display: grid;
  gap: .35rem;
  font-size: .9rem;
  font-weight: 700;
}

.reservation-form-grid input {
  width: 100%;
  min-height: 48px;
  padding: .7rem .8rem;
  border: 1px solid rgba(75,48,38, .35);
  border-radius: .3rem;
  background: #fff;
  color: var(--ink);
  font: inherit;
}

.reservation-form-grid textarea {
  width: 100%;
  min-height: 112px;
  resize: vertical;
  padding: .7rem .8rem;
  border: 1px solid rgba(75,48,38, .35);
  border-radius: .3rem;
  background: #fff;
  color: var(--ink);
  font: inherit;
}

.reservation-form-wide {
  grid-column: 1 / -1;
}

.reservation-form-guidance {
  margin: 0 0 1.2rem;
  font-size: 1rem;
  line-height: 1.55;
}

.reservation-form-grid input:focus,
.reservation-form-grid textarea:focus {
  outline: 3px solid rgba(20, 166, 191, .35);
  outline-offset: 1px;
}

.reservation-submit {
  width: 100%;
  margin-top: 1rem;
}

.voucher-order-status {
  margin: .8rem 0 0;
  font-size: .9rem;
}

.voucher-order-status:empty {
  display: none;
}

.reservation-form-hint {
  margin: .75rem 0 0;
  color: #68574c;
  font-size: .82rem;
  line-height: 1.45;
}

.back-to-top {
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 2.35rem;
  font-weight: 700;
  line-height: 1;
}

.back-to-top span {
  transform: translateY(-2px);
}

/* Kompakte, einheitliche Mobiltypografie und natürliche Bildproportionen */
@media (max-width: 700px) {
  body {
    font-size: 1rem;
    line-height: 1.58;
  }

  .hero h1,
  .subpage-hero h1,
  .event-hero h1,
  .gallery-page-hero h1 {
    font-size: clamp(2.3rem, 9.5vw, 3.2rem);
    line-height: 1;
    letter-spacing: -.035em;
  }

  .section h2,
  .values h2,
  .events h2,
  .visit h2,
  .breakfast h2,
  .about h2,
  .gallery-section h2,
  .drinks h2,
  .subpage-content h2,
  .beverage-intro h2,
  .event-offers-heading h2,
  .gallery-group-heading h2,
  .visit-practical-heading h2 {
    font-size: clamp(1.9rem, 7.5vw, 2.65rem);
    line-height: 1.08;
  }

  h3,
  .team-intro h3,
  .specialities h3,
  .team-grid h3,
  .event-options h3,
  .visit-practical-grid h3 {
    font-size: clamp(1.2rem, 5vw, 1.5rem);
    line-height: 1.18;
  }

  .hero-copy,
  .subpage-hero > p:last-child,
  .event-offers-heading p,
  .gallery-page-hero > p:last-child {
    font-size: 1rem;
    line-height: 1.5;
  }

  .eyebrow {
    margin-bottom: .85rem;
    font-size: .72rem;
  }

  .section,
  .values,
  .about,
  .gallery-section,
  .visit,
  .subpage-content,
  .event-story,
  .event-offers,
  .visit-practical {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .home .hero {
    height: min(650px, calc(100svh - 78px));
    min-height: 560px;
    max-height: 650px;
    padding-top: 3rem;
    padding-bottom: 4.75rem;
  }

  .event-hero,
  .gallery-page-hero,
  .photo-subpage-hero {
    height: clamp(410px, 52svh, 460px);
    min-height: clamp(410px, 52svh, 460px);
  }

  .event-hero-copy,
  .subpage-hero {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .breakfast img,
  .intro-image img,
  .portrait img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  .event-photo-grid {
    grid-auto-rows: clamp(150px, 42vw, 220px);
  }

  .photo-gallery {
    grid-auto-rows: clamp(155px, 46vw, 220px);
  }
}

/* Einheitlicher Logo-Lockup mit dem Zusatz SEIT 2005 */
.brand > img.brand-logo {
  width: clamp(190px, 16vw, 230px);
  height: auto;
}

.footer-brand > img.brand-logo {
  width: 230px;
  height: auto;
}

@media (max-width: 920px) {
  .brand > img.brand-logo {
    width: 176px;
  }

  .footer-brand > img.brand-logo {
    width: 220px;
  }
}

/* Zurückhaltende, gut bedienbare Nach-oben-Navigation */
.back-to-top {
  width: 46px;
  height: 46px;
  flex-basis: 46px;
  border: 1px solid rgba(75,48,38, .48);
  background: rgba(255, 255, 255, .22);
  color: var(--ink);
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.back-to-top span {
  display: grid;
  transform: none;
}

.back-to-top svg {
  width: 21px;
  height: 21px;
}

.back-to-top:hover,
.back-to-top:focus-visible {
  border-color: var(--ink);
  background: rgba(255, 255, 255, .58);
  transform: translateY(-2px);
}

@media (max-width: 600px) {
  .reservation-options {
    grid-template-columns: 1fr;
  }

  .reservation-dialog {
    width: min(96vw, 620px);
    padding: 1.2rem;
  }

  .reservation-options strong {
    font-size: clamp(.8rem, 3.8vw, .98rem);
  }

  .reservation-form-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 380px) {
  .reservation-options strong {
    font-size: .78rem;
    letter-spacing: -.025em;
  }
}

/* Flächige Aktionsbuttons mit klarer Gewichtung. */
.button,
.button-primary,
.button-light,
.button-ghost,
.button-gold,
.button-mail {
  color: #4b3026;
  background: #f4c542;
  border: 0;
  border-radius: 4px;
  box-shadow: none;
  text-shadow: none;
  transition: background-color .2s ease, color .2s ease;
}

.button:hover,
.button-primary:hover,
.button-light:hover,
.button-ghost:hover,
.button-gold:hover,
.button-mail:hover {
  color: #4b3026;
  background: #e5b52e;
  box-shadow: none;
  transform: none;
}

.hero-actions .button-ghost {
  color: #4b3026;
  background: #fffdf9;
}

.hero-actions .button-ghost:hover {
  color: #4b3026;
  background: #e7f7fa;
}

.button:focus-visible {
  outline: 3px solid #4b3026;
  outline-offset: 3px;
}

.hero-actions .button:focus-visible {
  outline-color: #fffdf9;
}

.button:active {
  box-shadow: none;
  transform: none;
}

/* Besuch und Anreise */
.visit-practical {
  padding: clamp(4rem, 8vw, 7rem) clamp(1.25rem, 8vw, 8.5rem);
  background: #faf5ec;
}

.visit-practical-heading {
  max-width: 760px;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.visit-practical-heading h2 {
  margin: .45rem 0 1rem;
  font-family: var(--serif);
  font-size: clamp(2.6rem, 5vw, 4.8rem);
  line-height: 1;
}

.visit-practical-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.visit-practical-grid article {
  padding: clamp(1.5rem, 3vw, 2.4rem);
  background: #fff;
  border: 1px solid var(--line);
}

.visit-practical-grid h3 {
  margin: 0 0 .8rem;
  font-family: var(--serif);
  font-size: 1.5rem;
}

.visit-practical-grid p {
  margin: 0 0 1rem;
  color: #68574c;
  line-height: 1.65;
}

.visit-practical-grid .practical-note {
  margin-bottom: 0;
  color: #78685e;
  font-size: .9rem;
}

.visit-practical-grid .practical-subheading {
  margin-top: 1.5rem;
}

.privacy-map {
  display: grid;
  min-height: 390px;
  margin-top: 1rem;
  place-items: center;
  overflow: hidden;
  background: #f4eadb;
  border: 1px solid var(--line);
}

.privacy-map-consent {
  max-width: 600px;
  padding: 2rem;
  text-align: center;
}

.privacy-map-consent h3 {
  margin: 0 0 .75rem;
  font-family: var(--serif);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
}

.privacy-map-consent p {
  margin: 0 auto 1.4rem;
  line-height: 1.6;
}

.privacy-map iframe {
  width: 100%;
  min-height: 390px;
  border: 0;
}

@media (max-width: 700px) {
  .visit-practical-grid {
    grid-template-columns: 1fr;
  }
}

.daily-offer-items {
  display: grid;
  gap: 0;
  margin-top: .55rem;
}

.daily-offer-items p {
  display: grid;
  gap: .1rem;
  margin: 0;
  padding: .7rem 0;
  border-top: 1px solid rgba(75,48,38, .16);
}

.daily-offer-items strong {
  font-size: 1.08rem;
  line-height: 1.25;
}

.daily-offer-items small {
  color: #68574c;
  font-size: .84rem;
}

.daily-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
  overflow: hidden;
  background: #fff;
}

.intro-image .daily-photo-grid {
  aspect-ratio: 4 / 5;
}

.split-feature .daily-photo-grid {
  aspect-ratio: 4 / 3;
}

.intro-image .daily-photo-grid img,
.split-feature .daily-photo-grid img {
  width: 100%;
  height: 100%;
  min-width: 0;
  object-fit: cover;
  aspect-ratio: auto;
}

@media (max-width: 920px) {
  .intro-image .daily-photo-grid,
  .split-feature .daily-photo-grid {
    aspect-ratio: 4 / 3;
  }
}

.warm-kitchen-note {
  width: fit-content;
  max-width: 100%;
  margin: 1.35rem 0 0;
  padding: .7rem 1rem;
  border-left: 4px solid var(--azure);
  background: rgba(255, 255, 255, .88);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.4;
}

.warm-kitchen-note strong,
.warm-kitchen-hours strong,
.warm-kitchen-card {
  font-weight: 800;
}

.warm-kitchen-hours {
  padding: .7rem .85rem;
  border-left: 4px solid var(--azure);
  background: rgba(255, 255, 255, .45);
  line-height: 1.45;
}

.open-card .warm-kitchen-card {
  margin-top: .35rem;
  color: #087d91;
  font-size: .86rem;
  line-height: 1.25;
}

.gallery-page-hero {
  position: relative;
  display: flex;
  min-height: clamp(480px, 62vh, 680px);
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background-image: url("galerie-mosaik.webp");
  background-position: center;
  background-size: cover;
  color: #fff;
}

.gallery-page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(58,39,29, .82), rgba(58,39,29, .28) 78%);
}

.gallery-page-hero > * {
  z-index: 1;
}

.gallery-page-hero .eyebrow.dark {
  color: #f4eadb;
}

.gallery-page-hero > p:last-child {
  color: #fff;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .35);
}

@media (max-width: 700px) {
  .gallery-page-hero {
    min-height: 520px;
    background-position: center;
  }

  .gallery-page-hero::after {
    background: linear-gradient(90deg, rgba(58,39,29, .86), rgba(58,39,29, .42));
  }
}

.photo-subpage-hero {
  position: relative;
  display: flex;
  min-height: clamp(460px, 58vh, 650px);
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background-color: #4b3026;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
}

.photo-subpage-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(58,39,29, .88), rgba(58,39,29, .18) 82%);
}

.photo-subpage-hero > * {
  z-index: 1;
}

.photo-subpage-hero .eyebrow.dark {
  color: #f4eadb;
}

.photo-subpage-hero > p:last-child {
  color: #fff;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .4);
}

.hero-tagesangebote {
  background-image: url("tagesgericht.webp");
  background-position: center 52%;
}

.hero-a-la-carte {
  background-image: url("galerie-alle/Herbst_Sina_sina_046.webp");
  background-position: center 58%;
}

.hero-fruehstueck {
  background-image: url("fruehstueck-kaffee.webp");
  background-position: center 48%;
}

.breakfast-hero .event-hero-images img:first-child {
  object-position: center;
}

.breakfast-hero .event-hero-images img:nth-child(2) {
  object-position: center 58%;
}

.breakfast-hero .event-hero-images img:last-child {
  object-position: center;
}

.menu-category-time {
  margin: .55rem 0 0;
  color: #68574c;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

@media (min-width: 921px) and (max-width: 1250px) {
  .site-header {
    grid-template-columns: minmax(160px, 185px) 1fr;
    gap: .75rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .site-header nav {
    gap: .55rem;
  }

  .site-header nav a {
    font-size: .78rem;
  }

  .brand > img.brand-logo {
    width: 180px;
  }
}

.hero-getraenke {
  background-image: url("fruehstueck-kaffee.webp");
  background-position: center 48%;
}

.hero-ueber-uns {
  background-image: url("galerie-kueche.webp");
  background-position: center 42%;
}

.hero-kontakt {
  background-image: url("hero-bistro.webp");
  background-position: center 48%;
}

@media (max-width: 700px) {
  .photo-subpage-hero {
    min-height: 520px;
  }

  .photo-subpage-hero::after {
    background: linear-gradient(90deg, rgba(58,39,29, .9), rgba(58,39,29, .36));
  }

  .hero-ueber-uns {
    background-position: 56% center;
  }
}

/* Einheitliche Bildfläche für sämtliche Unterseiten */
.event-hero,
.gallery-page-hero,
.photo-subpage-hero {
  width: 100%;
  height: clamp(520px, 68vh, 720px);
  min-height: clamp(520px, 68vh, 720px);
}

.event-hero-copy {
  height: 100%;
  min-height: 100%;
}

@media (max-width: 700px) {
  .event-hero,
  .gallery-page-hero,
  .photo-subpage-hero {
    width: 100%;
    height: 520px;
    min-height: 520px;
  }

  .event-hero-images {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 1.08fr .92fr;
  }

  .event-hero-images img:first-child {
    grid-column: 1 / -1;
  }
}

/* Abschliessende Mobiloptimierung: lesbare Preise, kompakte Navigation und
   grosszuegige Bildaufteilung auf schmalen Displays. */
@media (max-width: 1150px) {
  .site-header nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .45rem;
  }

  .site-header nav.open {
    display: grid;
  }

  .site-header nav a {
    justify-content: center;
    min-width: 0;
    padding: .65rem .45rem;
    text-align: center;
    background: rgba(255, 255, 255, .42);
    border: 1px solid rgba(75,48,38, .10);
    border-radius: .35rem;
  }
}

@media (max-width: 920px) {
  .site-header nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .4rem;
    padding: .85rem 1rem 1rem;
  }

  .site-header nav a {
    min-height: 44px;
    font-size: .88rem;
    line-height: 1.2;
  }

  .drinks .menu-list > div,
  .beverage-menu .menu-list > div {
    grid-template-columns: minmax(0, 1fr);
    gap: .35rem;
  }

  .drinks .menu-list strong,
  .beverage-menu .menu-list strong {
    display: block;
    width: 100%;
    max-width: none;
    overflow: visible;
    white-space: nowrap;
    color: #087d91;
    font-size: .875rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.025em;
    line-height: 1.4;
    text-align: right;
  }
}

@media (max-width: 600px) {
  .breakfast-hero .event-hero-images {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 1.08fr .92fr;
  }

  .breakfast-hero .event-hero-images img:first-child {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .breakfast-hero .event-hero-images img:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }

  .breakfast-hero .event-hero-images img:last-child {
    grid-column: 2;
    grid-row: 2;
  }
}

@media (max-width: 380px) {
  .beverage-menu {
    padding-right: .65rem;
    padding-left: .65rem;
  }

  .beverage-menu .menu-list,
  .beverage-menu .menu-note {
    margin-right: 0;
    margin-left: 0;
  }

  .beverage-menu .menu-list {
    padding-right: .65rem;
    padding-left: .65rem;
  }

  .beverage-menu .menu-list strong {
    font-size: .875rem;
    letter-spacing: -.04em;
  }

  .site-header nav {
    padding-right: .7rem;
    padding-left: .7rem;
  }

  .site-header nav a {
    padding-right: .25rem;
    padding-left: .25rem;
    font-size: .81rem;
  }
}

/* iPhone-Optimierung: Aktionsbeschriftungen bleiben vollständig einzeilig. */
.button,
.button-primary,
.button-light,
.button-ghost,
.button-gold,
.button-mail,
.mobile-actions a {
  max-width: 100%;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

@media (max-width: 600px) {
  .button,
  .button-primary,
  .button-light,
  .button-ghost,
  .button-gold,
  .button-mail {
    min-width: 0;
    padding-right: clamp(.65rem, 3vw, 1rem);
    padding-left: clamp(.65rem, 3vw, 1rem);
    font-size: clamp(.82rem, 3.7vw, .96rem);
    line-height: 1.2;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .hero-actions .button,
  .section-cta,
  .reservation-submit {
    width: 100%;
  }

  .button-mail {
    gap: .55rem;
  }

  .mobile-actions a {
    min-width: 0;
    font-size: clamp(.76rem, 3.6vw, .88rem);
  }

  .reservation-dialog {
    max-height: calc(100svh - 1rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .reservation-form-grid label,
  .reservation-form-grid input,
  .reservation-form-grid textarea {
    min-width: 0;
  }
}

/* Mobile Aktionsflaechen: alle regulaeren CTA-Buttons nutzen dieselbe volle
   Inhaltsbreite. Bild-, Menue-, Schliessen- und Pfeil-Steuerungen bleiben
   bewusst in ihrer eigenen Geometrie. */
@media (max-width: 700px) {
  main .button,
  .service-hub .button,
  .reservation-dialog .button {
    display: flex;
    width: 100%;
    max-width: none;
    min-height: 54px;
    margin-right: 0;
    margin-left: 0;
    box-sizing: border-box;
    justify-content: center;
    text-align: center;
  }
}

/* Finale mobile Priorität: spätere Altregeln dürfen die kompakten Masse nicht überschreiben. */
@media (max-width: 920px) {
  .brand > img.brand-logo {
    width: 176px;
    height: auto;
  }

  .footer-brand > img.brand-logo {
    width: 220px;
    height: auto;
  }
}

@media (max-width: 700px) {
  .home .hero {
    height: min(650px, calc(100svh - 78px));
    min-height: 560px;
    max-height: 650px;
  }

  .event-hero,
  .gallery-page-hero,
  .photo-subpage-hero {
    height: clamp(410px, 52svh, 460px);
    min-height: clamp(410px, 52svh, 460px);
  }

  footer > div:last-child {
    flex-wrap: nowrap;
    gap: clamp(.65rem, 3vw, 1.1rem);
  }

  footer > div:last-child > a:not(.back-to-top) {
    font-size: .8rem;
  }
}

@media (max-width: 380px) {
  .brand > img.brand-logo {
    width: 164px;
  }

  .footer-brand > img.brand-logo {
    width: 205px;
  }

  footer > div:last-child {
    gap: .6rem;
  }

  footer > div:last-child > a:not(.back-to-top) {
    font-size: .76rem;
  }

  .back-to-top {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }
}

/* Letzte Priorität für die mobile Bildregie. */
@media (max-width: 700px) {
  .event-hero,
  .gallery-page-hero,
  .photo-subpage-hero {
    height: clamp(330px, 41svh, 390px);
    min-height: clamp(330px, 41svh, 390px);
  }

  .event-hero-images,
  .breakfast-hero .event-hero-images {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 62% 38%;
  }

  .event-hero-images img:first-child,
  .breakfast-hero .event-hero-images img:first-child {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .event-hero-images img:nth-child(2),
  .breakfast-hero .event-hero-images img:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }

  .event-hero-images img:last-child,
  .breakfast-hero .event-hero-images img:last-child {
    grid-column: 2;
    grid-row: 2;
  }

  .event-hero::after {
    background: linear-gradient(90deg, rgba(58,39,29, .82) 0%, rgba(58,39,29, .42) 54%, rgba(58,39,29, .08) 100%);
  }

  .event-hero-copy {
    justify-content: center;
    width: min(72%, 330px);
    height: 100%;
    padding: 1.5rem 1.25rem;
  }

  .event-hero-copy .eyebrow {
    margin: 0 0 .65rem;
    font-size: .68rem;
    line-height: 1.3;
  }

  .event-hero-copy h1,
  .gallery-page-hero h1,
  .photo-subpage-hero h1 {
    font-size: clamp(2.15rem, 9vw, 2.75rem);
    line-height: .98;
  }

  .subpage-hero,
  .gallery-page-hero {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .event-story,
  .event-offers,
  .alacarte-menu,
  .beverage-menu,
  .subpage-content,
  .visit-practical,
  .gallery-all {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  main {
    padding-bottom: 76px;
  }
}

@media (max-width: 380px) {
  .event-hero,
  .gallery-page-hero,
  .photo-subpage-hero {
    height: 320px;
    min-height: 320px;
  }

  .event-hero-copy h1,
  .gallery-page-hero h1,
  .photo-subpage-hero h1 {
    font-size: 2.1rem;
  }
}

/* menu-refinement.css */
/* One shared, compact menu system; each serving/price remains an indivisible line. */
.service-grid .service-voucher > p,
.service-grid .service-voucher > .voucher-preview,
.service-grid .service-voucher > .button {
  width: 100%;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
  margin-left: 0;
  margin-right: 0;
}
.service-grid .service-voucher > .voucher-preview {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
}
.service-grid .service-voucher > .voucher-preview img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  object-fit: contain;
}
.service-grid .service-voucher > .button {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.beverage-menu .menu-list > div,
.dish-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: start;
  gap: .75rem;
  padding: .8rem 0;
  margin: 0;
  min-height: 0;
}
.beverage-menu .menu-list > div > span,
.dish-list article > div { min-width: 0; overflow-wrap: anywhere; }
.beverage-menu .menu-list small {
  display: block;
  margin-top: .25rem;
  color: #68574c;
  font-size: .875rem;
  line-height: 1.4;
  font-weight: 400;
}
.beverage-menu .menu-list strong,
.dish-list article > strong {
  width: auto;
  max-width: none;
  overflow: visible;
  white-space: nowrap;
  font-size: .9375rem;
  line-height: 1.4;
  letter-spacing: normal;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: #4b3026;
}
.beverage-menu .menu-list .price-option {
  display: block;
  white-space: nowrap;
  color: inherit;
}
.price-option + .price-option { margin-top: .2rem; }
.kitchen-time { white-space: nowrap; }
.kitchen-days-short { display: none; }
.open-card .kitchen-time,
.open-card .kitchen-days-full { display: inline; }
.open-card .kitchen-days-short { display: none; }
.warm-kitchen-hours { container-type: inline-size; }
@container (max-width: 320px) {
  .kitchen-days-full { display: none; }
  .kitchen-days-short { display: inline; }
  .kitchen-time { font-size: .875rem; }
}
@media (max-width: 920px) {
  .beverage-menu .menu-list { margin: 0; padding: .25rem 1rem .6rem; }
  .beverage-menu .menu-note { margin: .75rem 1rem .25rem; padding: 0; font-size: .875rem; line-height: 1.45; }
  .beverage-menu .drinks-grid summary { padding: .9rem 1rem; font-size: 1.125rem; line-height: 1.35; min-height: 44px; }
  .beverage-menu .drinks-grid { gap: .75rem; }
  .beverage-menu .menu-list > div { padding: .65rem 0; font-size: 1rem; line-height: 1.4; }
  .dish-list h4 { font-size: 1rem; line-height: 1.4; margin: 0; }
  .dish-list p { font-size: .875rem; line-height: 1.45; margin-top: .25rem; }
  .dish-list article { padding: .85rem 0; margin: 0; gap: .65rem; }
  .menu-category { padding: 1.5rem 0; gap: 1rem; }
  .menu-category h3 { font-size: 1.35rem; }
  .daily-offer-items p { padding: .65rem 0; margin: 0; }
  .daily-offer-items small { font-size: .875rem; line-height: 1.4; }
  .warm-kitchen-note { width: 100%; }
  .warm-kitchen-note strong,
  .warm-kitchen-hours strong,
  .open-card .warm-kitchen-card { font-size: 1rem; line-height: 1.5; }
}
@media (max-width: 480px) {
  .kitchen-days-full,
  .open-card .kitchen-days-full { display: none; }
  .kitchen-days-short,
  .open-card .kitchen-days-short { display: inline; }
  .kitchen-time,
  .open-card .kitchen-time { font-size: .875rem; }
}

/* Warmes Creme, Kaffeebraun und gezielte Türkis-Akzente. */
:root {
  --ink: #4b3026;
  --forest: #4b3026;
  --cream: #faf5ec;
  --paper: #fffdf9;
  --line: #dfd2c2;
  --table-blue: #a3ebfb;
  --table-blue-strong: #63d7eb;
  --azure: #087d91;
  --logo-gold: #f4c542;
}
body, .subpage, .gallery-page, .legal-page { background: var(--paper); color: var(--ink); }
.site-header, .site-header nav { background: var(--cream); }
.home-story, .values, .service-hub, footer { background: #f4eadb; color: var(--ink); }
.home-guide, .gallery-controls, .mobile-actions { background: var(--paper); }
.open-card { background: rgba(255,253,249,.96); color: var(--ink); }
.eyebrow.dark, .section-label, .home-guide-card > span, .text-link { color: var(--azure); }