:root {
    --bordeaux: #681f27; --bordeaux-dark: #48141a; --safran: #e9b93f;
    --creme: #fbf5e9; --paper: #fffdf8; --ink: #2d211d; --muted: #6f6058;
    --line: #e7d9c7; --shadow: 0 16px 45px rgba(72,20,26,.11);
    --radius: 1.25rem; --content: 1120px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
body { margin: 0; background: var(--creme); color: var(--ink); font-family: "Segoe UI", Arial, sans-serif; line-height: 1.65; }
img { max-width: 100%; } a { color: inherit; text-decoration: none; } button,input,textarea,select { font: inherit; }
:focus-visible { outline: 3px solid var(--safran); outline-offset: 3px; }
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(104,31,39,.98); color: #fff; box-shadow: 0 5px 20px rgba(0,0,0,.12); }
.header-inner { width: min(var(--content),calc(100% - 2rem)); min-height: 4.75rem; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.logo { display: inline-flex; align-items: center; }
.logo img { width: auto; height: 3.75rem; display: block; }
.main-nav { display: flex; align-items: center; gap: 1.4rem; }
.main-nav a { color: #fff; font-size: .95rem; font-weight: 600; }
.main-nav a:hover,.main-nav a[aria-current="page"] { color: var(--safran); }
.menu-toggle { display: none; border: 0; background: transparent; color: #fff; font-size: 1.7rem; cursor: pointer; }
.cafe-subnav { position: sticky; top: 4.75rem; z-index: 90; overflow-x: auto; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 4px 14px rgba(72,20,26,.08); scrollbar-width: thin; }
.cafe-subnav-inner { width: min(var(--content),calc(100% - 2rem)); min-height: 3.25rem; margin: auto; display: flex; align-items: center; gap: 1.25rem; white-space: nowrap; }
.cafe-subnav a { color: var(--bordeaux); font-size: .9rem; font-weight: 700; }
.cafe-subnav a:hover { color: var(--ink); }
.hero { min-height: 73vh; display: grid; place-items: center; padding: 5rem 1.25rem; text-align: center; color: #fff; background: linear-gradient(rgba(35,17,13,.45),rgba(35,17,13,.72)),url('Bilder/Pauli/tresen-pauli.jpeg') center/cover; }
.hero-content { max-width: 780px; }
.eyebrow { margin: 0 0 .8rem; color: var(--safran); font-size: .8rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
h1,h2,h3 { font-family: "Segoe UI",system-ui,sans-serif; line-height: 1.16; }
.hero .eyebrow { color: var(--bordeaux); text-shadow: 0 1px 5px rgba(255,255,255,.2); }
.hero h1 { margin: 0; color: var(--safran); font-size: clamp(2.35rem,6vw,4.8rem); text-shadow: 0 3px 20px rgba(0,0,0,.65); }
.hero .lead { max-width: 650px; margin: 1.2rem auto 1.8rem; font-size: clamp(1.05rem,2.2vw,1.3rem); }
.button-row { display: flex; justify-content: center; flex-wrap: wrap; gap: .8rem; }
.btn { display: inline-flex; min-height: 3rem; align-items: center; justify-content: center; padding: .75rem 1.35rem; border: 2px solid var(--safran); border-radius: 999px; background: var(--safran); color: var(--ink); font-weight: 750; cursor: pointer; transition: transform .18s ease; }
.btn:hover { transform: translateY(-2px); } .btn-outline { background: transparent; color: inherit; } .btn-dark-outline { border-color: var(--bordeaux); background: transparent; color: var(--bordeaux); }
.section,.container { width: min(var(--content),calc(100% - 2rem)); margin-inline: auto; padding: 4.5rem 0; }
#cafes { padding-top: 2.25rem; }
.container { max-width: 920px; padding-top: 2.5rem; }
.section-heading { max-width: 720px; margin-bottom: 2rem; } .section-heading.center { margin-inline: auto; text-align: center; }
h1 { font-size: clamp(2rem,5vw,3.4rem); color: var(--bordeaux); } h2 { margin: 0 0 1rem; color: var(--bordeaux); font-size: clamp(1.8rem,4vw,2.7rem); } h3 { color: var(--bordeaux); }
.intro,.subtitle { color: var(--muted); font-size: 1.12rem; }
.cafes-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.2rem; }
.cafe-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow); }
.cafe-card-link { display: block; transition: transform .2s ease, box-shadow .2s ease; }
.cafe-card-link:hover { transform: translateY(-5px); box-shadow: 0 20px 52px rgba(72,20,26,.17); }
.cafe-card-link:focus-visible { border-radius: var(--radius); }
.cafe-card img { width: 100%; height: 190px; display: block; object-fit: cover; } .cafe-card-content { padding: 1.25rem; }
.cafe-card h3 { margin: 0 0 .3rem; font-size: 1.35rem; } .cafe-card p { margin: 0 0 .8rem; color: var(--muted); }
.text-link { color: var(--bordeaux); font-weight: 750; } .text-link.disabled { color: var(--muted); font-weight: 600; }
.feature-band { width: min(var(--content),calc(100% - 2rem)); margin: 1rem auto 4rem; overflow: hidden; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.08fr); align-items: stretch; border-radius: calc(var(--radius) + .5rem); background: var(--bordeaux); color: #fff; }
.feature-band-image { width: 100%; height: 100%; min-height: 430px; display: block; object-fit: cover; }
.feature-band-content { display: flex; padding: clamp(2rem,5vw,4rem); flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.feature-band h2 { color: var(--safran); } .feature-band p { max-width: 670px; margin: 0 auto 1.25rem; font-size: 1.08rem; } .jobs { text-align: center; }
.buffet-hero { min-height: 68vh; display: grid; place-items: center; padding: 5rem 1.25rem; background: linear-gradient(rgba(35,17,13,.34),rgba(35,17,13,.76)),url('Bilder/Winterhude/BuffetWinterhude.jpg') center/cover; color: #fff; text-align: center; }
.buffet-hero-content { max-width: 800px; }
.buffet-hero h1 { margin: 0; color: var(--safran); font-size: clamp(2.45rem,6vw,4.8rem); text-shadow: 0 3px 20px rgba(0,0,0,.68); }
.buffet-hero-content > p:not(.eyebrow) { max-width: 650px; margin: 1.2rem auto 1.8rem; font-size: clamp(1.05rem,2.2vw,1.3rem); }
.buffet-page { width: min(var(--content),calc(100% - 2rem)); margin-inline: auto; }
.buffet-section { padding: 4.5rem 0 1rem; }
.buffet-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.2rem; }
.buffet-grid-small { grid-template-columns: repeat(3,1fr); }
.buffet-card { min-height: 290px; display: flex; flex-direction: column; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow); transition: transform .2s ease,box-shadow .2s ease; }
.buffet-card:hover { transform: translateY(-5px); box-shadow: 0 20px 52px rgba(72,20,26,.17); }
.buffet-card h3 { margin: 0 0 .15rem; font-size: 1.4rem; }
.buffet-address { margin: 0; color: var(--muted); font-size: .92rem; }
.buffet-time { margin: 1.25rem 0 .2rem; color: var(--bordeaux); font-weight: 800; }
.buffet-price { margin: 0; color: var(--ink); font-size: 1.55rem; font-weight: 800; }
.buffet-price small { font-size: .7rem; font-weight: 600; }
.buffet-note { margin: .75rem 0; color: var(--muted); font-size: .88rem; line-height: 1.45; }
.buffet-card > span { margin-top: auto; padding-top: 1rem; color: var(--bordeaux); font-weight: 750; }
.buffet-gallery { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin: 4rem 0 0; }
.buffet-gallery figure { margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow); }
.buffet-gallery img { width: 100%; height: 300px; display: block; object-fit: cover; }
.buffet-gallery figcaption { padding: .75rem 1rem; color: var(--muted); font-size: .9rem; }
.buffet-disclaimer { margin: 1.5rem 0 0; color: var(--muted); font-size: .9rem; text-align: center; }
.buffet-cta { margin: 4rem 0; padding: clamp(2rem,5vw,4rem); border-radius: calc(var(--radius) + .5rem); background: var(--bordeaux); color: #fff; text-align: center; }
.buffet-cta h2 { color: var(--safran); }
.buffet-cta > p:not(.eyebrow) { margin: 0 auto 1.5rem; }
.job-links { display: flex; max-width: 850px; margin: 1.5rem auto 0; justify-content: center; flex-wrap: wrap; gap: .65rem; }
.job-link { padding: .55rem .9rem; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--bordeaux); font-weight: 700; }
.job-link.disabled { color: var(--muted); font-weight: 500; }
.hero-img { width: 100%; height: min(52vw,520px); min-height: 300px; display: block; object-fit: cover; }
.cafe-hero { position: relative; overflow: hidden; background: var(--bordeaux-dark); }
.cafe-hero::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg,rgba(35,17,13,.12),rgba(35,17,13,.68)); pointer-events: none; }
.cafe-hero-content { position: absolute; z-index: 1; right: 1rem; bottom: clamp(1.5rem,5vw,4rem); left: 1rem; color: #fff; text-align: center; text-shadow: 0 3px 20px rgba(0,0,0,.55); }
.cafe-hero-content h1 { margin: 0; color: #fff; font-size: clamp(2.2rem,6vw,4.6rem); }
.cafe-hero-content p { margin: .55rem 0 0; font-size: clamp(1.05rem,2.2vw,1.35rem); font-weight: 600; }
.info-box,.menu-section,.form-box,.instagram-box,.privacy-placeholder { margin: 1.5rem 0; padding: clamp(1.25rem,3vw,2rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow); }
.info-box p { margin: .25rem 0; } .description { margin: 2rem 0; font-size: 1.1rem; }
.cafe-gallery { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin: 2.5rem 0; }
.cafe-gallery figure { margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow); }
.cafe-gallery img { width: 100%; height: 260px; display: block; object-fit: cover; }
.cafe-gallery figcaption { padding: .8rem 1rem; color: var(--muted); font-size: .92rem; }
.abend-box { margin: 2.5rem 0; padding: 2rem; border-radius: var(--radius); background: var(--bordeaux); color: #fff; text-align: center; } .abend-box h2 { color: var(--safran); }
.menu-section h3 { margin-top: 0; padding-bottom: .6rem; border-bottom: 2px solid var(--safran); }
.menu-overview { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; margin: 1.5rem 0 2.5rem; }
.menu-overview .menu-section { margin: 0; }
.menu-overview .menu-section p { color: var(--muted); }
.full-menu .menu-section { margin-bottom: 1rem; }
.menu-category { scroll-margin-top: 8.75rem; margin: 3.25rem 0; }
.section-intro { margin: -.35rem 0 1.25rem; color: var(--muted); }
.full-menu .menu-note { margin: .35rem 0; }
.menu-document { width: 100%; min-height: 720px; margin: 1rem 0; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.menu-photo { width: 100%; margin: 1rem 0; border-radius: var(--radius); box-shadow: var(--shadow); }
.menu-item { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--line); } .menu-item:last-child { border: 0; }
.price { color: var(--bordeaux); font-weight: 750; white-space: nowrap; } .menu-note,.form-note { color: var(--muted); font-size: .92rem; }
label { display: block; margin: 1rem 0 .3rem; font-weight: 650; }
input:not([type="checkbox"]):not([type="radio"]),select,textarea { width: 100%; padding: .75rem; border: 1px solid #cdbfac; border-radius: .6rem; background: #fff; }
.days-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); gap: .75rem; margin: 1rem 0; }
.day-box { padding: .8rem; border: 1px solid var(--line); border-radius: .7rem; background: var(--creme); } .day-box strong { display: block; color: var(--bordeaux); }
.day-box label,.radio-group label { display: inline; margin: 0 .5rem 0 0; font-weight: 400; } .honeypot { position: absolute; left: -10000px; }
.instagram-box,.privacy-placeholder { text-align: center; } .privacy-placeholder p { max-width: 650px; margin: .5rem auto 1.2rem; }
.embed-area { margin: 1.5rem 0; } .embed-area iframe { width: 100%; min-height: 380px; border: 0; border-radius: var(--radius); }
.map-preview { margin: 1.25rem 0; overflow: hidden; border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow); text-align: left; }
.map-preview img { width: 100%; display: block; }
.map-preview figcaption { padding: .55rem .85rem; color: var(--muted); font-size: .78rem; }
.map-preview figcaption a { color: var(--bordeaux); text-decoration: underline; }
.map-consent-button { margin-bottom: .5rem; flex-direction: column; line-height: 1.3; }
.map-consent-button span { display: block; }
.map-consent-button .map-consent-detail { font-size: .78em; font-weight: 650; letter-spacing: .01em; }
.legal-page { max-width: 820px; } .legal-page h2 { margin-top: 2rem; font-size: 1.4rem; } .legal-page h3 { margin-top: 1.5rem; }
.back-link { display: inline-block; margin-bottom: 1rem; color: var(--bordeaux); font-weight: 750; }
.site-footer { padding: 2.5rem 1rem; background: var(--bordeaux-dark); color: #e9ded3; text-align: center; } .site-footer p { margin: .3rem 0; } .site-footer a { color: var(--safran); }
@media(max-width:900px){.cafes-grid,.buffet-grid,.buffet-grid-small{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.header-inner{flex-wrap:wrap}.menu-toggle{display:block}.main-nav{display:none;width:100%;padding-bottom:.8rem;flex-direction:column;align-items:stretch;gap:0}.main-nav.open{display:flex}.main-nav a{padding:.7rem 0;border-top:1px solid rgba(255,255,255,.14)}.cafe-subnav{top:4.75rem}.cafe-subnav-inner{width:max-content;min-width:100%;padding-inline:1rem}.hero{min-height:64vh}.cafe-hero-content{bottom:1.5rem}.cafes-grid{grid-template-columns:1fr}.cafe-card{display:grid;grid-template-columns:minmax(120px,42%) minmax(0,1fr)}.cafe-card img{height:100%;min-height:170px}.cafe-card-content{display:block;min-width:0;padding:1rem}.cafe-card-link{display:grid}.cafe-gallery,.menu-overview{grid-template-columns:1fr}.cafe-gallery img{height:280px}body:not([data-cafe]) .section{padding:2.75rem 0}body:not([data-cafe]) #cafes{padding-top:1.4rem}.feature-band{margin:.25rem auto 2.75rem;grid-template-columns:1fr}.feature-band-image{height:260px;min-height:0}.feature-band-content{padding:2.25rem 1.35rem}.feature-band p{font-size:1rem}}
@media(max-width:680px){body[data-cafe] .cafe-subnav{overflow-x:visible}body[data-cafe] .cafe-subnav-inner{width:100%;min-height:auto;padding:.45rem .65rem;justify-content:center;align-content:center;flex-wrap:wrap;gap:.15rem .75rem;white-space:normal}body[data-cafe] .cafe-subnav a{padding:.15rem 0;font-size:.82rem}.menu-category{scroll-margin-top:11rem}}
@media(max-width:440px){.cafe-card{display:block}.cafe-card img{height:190px;min-height:0}.cafe-card-content{display:block}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}
@media(max-width:680px){.buffet-hero{min-height:60vh;padding:4rem 1rem}.buffet-section{padding-top:3rem}.buffet-grid,.buffet-grid-small,.buffet-gallery{grid-template-columns:1fr}.buffet-card{min-height:0}.buffet-gallery{margin-top:3rem}.buffet-gallery img{height:260px}.buffet-cta{margin:3rem 0}}