:root {
    --color-primary: #e3aa4d;
    --color-dark: #262626;
    --color-text: #242424;
    --color-muted: #6f6f6f;
    --color-soft: #f5f1eb;
    --color-line: rgba(0,0,0,.12);
    --font-main: "Manrope", Arial, Helvetica, sans-serif;
    --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --header-height: 92px;
    --radius: 4px;
    --transition: 220ms ease;
    --pizza-pattern: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27180%27 height=%27180%27 viewBox=%270 0 180 180%27%3E%3Cg fill=%27none%27 stroke=%27%23d8c9b4%27 stroke-width=%271.4%27 opacity=%27.24%27%3E%3Cpath d=%27M20 54L50 14l30 40z%27/%3E%3Cpath d=%27M27 45h46%27/%3E%3Ccircle cx=%2744%27 cy=%2735%27 r=%273%27/%3E%3Ccircle cx=%2758%27 cy=%2743%27 r=%272.5%27/%3E%3Cpath d=%27M118 124l30-40 20 46z%27/%3E%3Cpath d=%27M123 116l39 9%27/%3E%3Ccircle cx=%27145%27 cy=%27107%27 r=%273%27/%3E%3Ccircle cx=%27136%27 cy=%27117%27 r=%272.5%27/%3E%3C/g%3E%3C/svg%3E");
}

body {
    min-width: 320px;
    font-family: var(--font-main);
    font-size: 16px;
    line-height: 1.65;
    color: var(--color-text);
    background-color: #fff;
    -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
a:not(.button):not(.brand-logo):not(.header-reserve):not(.header-whatsapp):not(.scroll-down):not(.main-nav a):hover {
    text-decoration:underline;
    text-underline-offset:.18em;
}
h1,h2,h3,.hero-title { line-height: 1.08; }
h1,h2,.hero-title { font-family: var(--font-display); font-weight: 700; }
h1,.hero-title { font-size: clamp(44px, 7vw, 96px); }
h2 { font-size: clamp(36px, 5vw, 64px); }
h3 { font-size: clamp(20px, 2.3vw, 28px); }
p + p { margin-top: 1em; }
.eyebrow { margin-bottom: 12px; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.color-accent { color: var(--color-primary); }
.text-large { font-size: clamp(17px, 1.5vw, 21px); }
.section-head { max-width: 760px; margin: 0 auto var(--space-lg); }
.section-head p:last-child { margin-top: 16px; color: var(--color-muted); }

.button {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border: 2px solid var(--color-primary);
    border-radius: var(--radius);
    color: var(--color-dark);
    background: var(--color-primary);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .06em;
    text-decoration: none;
    text-transform: uppercase;
    transition: transform var(--transition), background var(--transition), color var(--transition);
}
.button:hover { transform: translateY(-2px); }
.button-light { border-color: #fff; color: #fff; background: transparent; }
.button-light:hover,.button-light:focus-visible { color: #fff; background: rgba(255,255,255,.18); }
.button-ghost { border-color: rgba(255,255,255,.35); color: #fff; background: rgba(0,0,0,.18); }
.button-outline { color: var(--color-dark); background: transparent; }
.button-call { flex-direction:column; align-items:center; gap:2px; line-height:1.15; }
.button-call strong { font-size:15px; letter-spacing:0; white-space:nowrap; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-actions .button { backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.hero-actions .button-light { background:rgba(255,255,255,.08); }
.hero-actions .button-ghost { background:rgba(0,0,0,.22); }

.site-header {
    position: fixed;
    z-index: 1000;
    inset: 0 0 auto 0;
    width: 100%;
    height: var(--header-height);
    color: #fff;
    background: linear-gradient(to bottom, rgba(0,0,0,.66), transparent);
    transition: background var(--transition), box-shadow var(--transition);
}
.site-header:not(.is-scrolled):not(.menu-active) { height:118px; }
.site-header.is-scrolled,.site-header.menu-active { background: rgba(32,32,32,.97); box-shadow: 0 6px 24px rgba(0,0,0,.12); }
.header-inner { display: flex; height: 100%; align-items: center; gap: clamp(14px,2vw,28px); }
.brand-logo{display:flex;flex:0 0 auto;align-items:center;text-decoration:none}
.brand-logo img{display:block;width:auto;max-width:170px;max-height:58px;object-fit:contain}
.brand-logo-jolly img{max-width:62px;max-height:62px;border-radius:50%}
.site-header:not(.is-scrolled):not(.menu-active) .brand-logo img{max-width:260px;max-height:92px}
.site-header:not(.is-scrolled):not(.menu-active) .brand-logo-jolly img{max-width:96px;max-height:96px}

.main-nav { display: flex; align-items: center; gap: clamp(16px,2vw,30px); margin-left: auto; }
.main-nav a,.header-reserve,.header-whatsapp { text-decoration: none; }
.main-nav a { position: relative; padding: 8px 0; color:#fff; font-size: 15px; font-weight: 800; }
.main-nav a:hover,.main-nav a:focus-visible { color:#fff; }
.main-nav a::after { content:""; position:absolute; right:0; bottom:2px; left:0; height:2px; background:var(--color-primary); transform:scaleX(0); transform-origin:left; transition:transform var(--transition); }
.main-nav a:hover::after,.main-nav a.is-active::after { transform: scaleX(1); }
.header-reserve {
    display:inline-flex;
    flex:0 0 auto;
    min-height:48px;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    padding:8px 15px;
    border:2px solid var(--color-primary);
    border-radius:var(--radius);
    color:var(--color-dark);
    background:var(--color-primary);
    line-height:1.12;
    text-align:center;
    transition:transform var(--transition), background var(--transition), border-color var(--transition);
}
.header-reserve:hover { transform:translateY(-2px); background:#fff; border-color:#fff; }
.header-reserve span { font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.header-reserve strong { margin-top:3px; font-size:14px; font-weight:800; white-space:nowrap; }
.header-whatsapp {
    display:grid;
    flex:0 0 auto;
    width:48px;
    height:48px;
    place-items:center;
    border-radius:50%;
    color:#fff;
    background:#25d366;
    transition:transform var(--transition), background var(--transition);
}
.header-whatsapp img { width:24px; height:24px; object-fit:contain; }
.header-whatsapp:hover { transform:translateY(-2px); background:#1fb85a; }
.nav-toggle { display:none; width:46px; height:46px; margin-left:auto; border:0; border-radius:var(--radius); padding:11px; background:var(--color-primary); cursor:pointer; }
.nav-toggle span { display:block; width:100%; height:2px; margin:5px 0; background:var(--color-dark); transition:transform var(--transition),opacity var(--transition); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.hero { position:relative; display:flex; min-height:100svh; align-items:center; overflow:hidden; color:#fff; background-position:center; background-size:cover; background-repeat:no-repeat; }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.67),rgba(0,0,0,.26) 58%,rgba(0,0,0,.08)); }
.hero-content { position:relative; z-index:1; padding-top:var(--header-height); }
.hero .hero-title { max-width:980px; margin-bottom:34px; text-shadow:0 4px 30px rgba(0,0,0,.24); }
.scroll-down { position:absolute; z-index:2; bottom:24px; left:50%; display:grid; width:40px; height:40px; place-items:center; color:#fff; font-size:30px; line-height:1; text-decoration:none; transform:translateX(-50%); animation:scrollArrowFloat 1800ms ease-in-out infinite; }
@keyframes scrollArrowFloat {
    0%,100% { transform:translateX(-50%) translateY(0); opacity:.72; }
    50% { transform:translateX(-50%) translateY(5px); opacity:1; }
}

.section-dark { color:#fff; background:var(--color-dark); background-image:none; }
.section-dark .intro-title { margin-bottom:22px; font-size:clamp(36px, 5vw, 64px); }
.section-dark .intro-subtitle { max-width:750px; margin-bottom:var(--space-md); color:var(--color-primary); font-family:var(--font-main); font-size:clamp(20px, 2.3vw, 28px); font-weight:500; }
.image-section { min-height:78svh; display:flex; align-items:center; background-position:center; background-size:cover; background-repeat:no-repeat; }
.image-section-inner { display:flex; justify-content:flex-end; padding-block:var(--space-xl); }
.section[id="speisekarte"] { background-color:var(--color-soft); background-image:none; }



/* Widget-Platzhalter: hier spaeter den jeweiligen externen Widget-Code einsetzen. */
.widget-placeholder {
    display:grid;
    min-height:260px;
    place-items:center;
    padding:clamp(28px,5vw,56px);
    border:1px dashed rgba(0,0,0,.28);
    background:rgba(255,255,255,.88);
    text-align:center;
    backdrop-filter:blur(4px);
}
.widget-placeholder-inner { max-width:560px; }
.widget-placeholder-label {
    display:inline-block;
    margin-bottom:14px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    opacity:.58;
}
.widget-placeholder h3 {
    margin-bottom:10px;
    font-family:var(--font-display);
    font-size:clamp(28px,3.4vw,44px);
}
.widget-placeholder p { color:var(--color-muted); }
.widget-placeholder-on-image {
    width:min(100%,620px);
    min-height:320px;
    box-shadow:0 18px 50px rgba(0,0,0,.15);
}

/* Oeffnungszeiten-Karte mit eingebundenen Widgets. */
.hours-card {
    width:min(100%,620px);
    padding:clamp(28px,4vw,48px);
    background:rgba(255,255,255,.94);
    box-shadow:0 18px 50px rgba(0,0,0,.15);
    backdrop-filter:blur(4px);
}
.hours-card h2 {
    margin-bottom:clamp(22px,3vw,30px);
    font-size:clamp(28px,3.4vw,44px);
}
.hours-grid { display:grid; gap:clamp(24px,3.5vw,36px); grid-template-columns:repeat(2,1fr); }
.hours-block > * + * { margin-top:14px; }
.hours-block h3 {
    padding-bottom:10px;
    border-bottom:1px solid var(--color-line);
    font-family:var(--font-display);
    font-size:clamp(20px,2.2vw,26px);
}
.hours-block places-widget { display:block; }

/* Speisekarten-Widget. */
.menu-widget { max-width:900px; margin-inline:auto; }
.menu-widget places-widget { display:block; }

/* Bewertungs-Widget. */
.reviews-widget places-widget { display:block; }

.gallery {
    display:grid;
    width:100%;
    margin:0;
    padding:var(--space-lg) max(20px, calc((100% - 1100px) / 2));
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    background-color:#fff;
    background-image:var(--pizza-pattern);
    background-size:280px 280px;
}
.gallery-item { overflow:hidden; aspect-ratio:4/3; background:var(--color-dark); }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform 500ms ease; }
.gallery-item:hover img { transform:scale(1.03); }

.section-soft { background-color:var(--color-soft); background-image:none; }

.contact-section { background-color:#fff; background-image:var(--pizza-pattern); background-size:280px 280px; }
.contact-grid { align-items:start; gap:var(--space-lg); }
.contact-section h2 { margin-bottom:24px; }
.contact-box { display:grid; gap:24px; padding:clamp(28px,5vw,50px); color:#fff; background:var(--color-dark); }
.contact-box a { text-decoration:none; }
.contact-label { display:block; margin-bottom:4px; color:var(--color-primary); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.contact-route { display:flex; width:max-content; margin-top:14px; border-color:#fff; color:#fff; }
.contact-actions { display:flex; flex-wrap:wrap; gap:12px; }
.contact-actions .button-outline { border-color:#fff; color:#fff; }

.site-footer { position:relative; overflow:hidden; color:#fff; background-position:center; background-size:cover; background-repeat:no-repeat; }
.footer-overlay { position:absolute; inset:0; background:rgba(0,0,0,.72); }
.footer-content { position:relative; z-index:1; padding-block:var(--space-lg) 26px; }
.footer-grid { gap:var(--space-lg); }
.footer-wordmark { margin-bottom:12px; font-family:var(--font-display); font-size:38px; font-weight:700; }
.footer-grid strong { display:block; margin-bottom:10px; color:var(--color-primary); }
.footer-grid a { text-decoration:none; }
.footer-bottom { display:flex; justify-content:space-between; gap:20px; margin-top:var(--space-lg); padding-top:22px; border-top:1px solid rgba(255,255,255,.2); font-size:14px; }
.footer-bottom div { display:flex; flex-wrap:wrap; gap:18px; }
.footer-bottom .producer-credit { display:inline-flex; align-items:center; gap:6px; color:inherit; text-decoration:none; opacity:.8; white-space:nowrap; }
.footer-bottom .producer-credit:hover { opacity:1; }
.footer-bottom .producer-credit img { display:block; width:58px; height:auto; filter:brightness(0) invert(1); }

.reveal { opacity:0; transform:translateY(28px); transition:opacity 600ms ease,transform 600ms ease; }
.reveal.is-visible { opacity:1; transform:none; }

@media (max-width:1120px) {
    .header-reserve strong { font-size:13px; }
}
@media (max-width:1040px) {
    :root { --header-height:76px; }
    .site-header:not(.is-scrolled):not(.menu-active) { height:94px; }
    .nav-toggle { display:block; }
    .main-nav { position:fixed; top:var(--header-height); right:0; left:0; display:flex; max-height:0; overflow:hidden; flex-direction:column; align-items:stretch; gap:0; margin:0; padding:0 var(--fw-gutter); background:rgba(32,32,32,.98); transition:max-height 300ms ease,padding 300ms ease; }
    .main-nav.is-open { max-height:420px; padding-top:18px; padding-bottom:28px; }
    .main-nav a { padding:15px 0; border-bottom:1px solid rgba(255,255,255,.1); font-size:18px; }
    .header-whatsapp { margin-left:auto; }
    .nav-toggle { margin-left:auto; }
    .header-whatsapp + .nav-toggle { margin-left:0; }
}
@media (max-width:820px) {
    body { padding-bottom:calc(58px + env(safe-area-inset-bottom)); }
    .section { padding-block:64px; }
    .section-head { margin-bottom:32px; }
    .stack-md > * + * { margin-top:18px; }
    .image-section { min-height:auto; }
    .image-section-inner { padding-block:64px; }
    .widget-placeholder { min-height:220px; padding:32px 24px; }
    .widget-placeholder-on-image { min-height:280px; }
    .contact-grid { gap:36px; }
    .contact-box { gap:20px; padding:32px 24px; }
    .header-reserve {
        position:fixed;
        z-index:1100;
        right:0;
        bottom:0;
        left:0;
        width:auto;
        min-width:0;
        min-height:58px;
        padding:12px 18px calc(12px + env(safe-area-inset-bottom));
        border-radius:0;
        box-shadow:0 12px 34px rgba(0,0,0,.26);
        transform:none;
    }
    .header-reserve:hover { transform:translateY(-2px); }
    .footer-grid { gap:var(--space-md); }
    .gallery { grid-template-columns:repeat(2,1fr); }}
@media (max-width:560px) {
    .header-reserve span { font-size:10px; }
    .header-reserve strong { font-size:12px; }
    .brand-logo img { max-width:112px; max-height:46px; }
    .brand-logo-jolly img { max-width:52px; max-height:52px; }
    .site-header:not(.is-scrolled):not(.menu-active) .brand-logo img { max-width:160px; max-height:66px; }
    .site-header:not(.is-scrolled):not(.menu-active) .brand-logo-jolly img { max-width:70px; max-height:70px; }
    .section { padding-block:56px; }
    .section-dark .intro-title { margin-bottom:18px; }
    .section-dark .intro-subtitle { margin-bottom:22px; }
    .hero-actions { gap:10px; }
    .button { width:100%; }
    .widget-placeholder { min-height:200px; padding:28px 20px; }
    .hours-card { padding:28px 20px; }
    .hours-grid { grid-template-columns:1fr; }
    .contact-box { padding:28px 20px; }
    .hero .hero-title { font-size:clamp(42px,13vw,64px); }
    .gallery { grid-template-columns:1fr; }
    .footer-grid { gap:24px; }
    .footer-bottom { flex-direction:column; }
}

@media (orientation:landscape) and (max-height:560px) and (max-width:950px) and (pointer:coarse) {
    :root { --header-height:64px; }
    body { padding-bottom:0; }
    .site-header,
    .site-header:not(.is-scrolled):not(.menu-active) { height:64px; }
    .brand-logo img,
    .site-header:not(.is-scrolled):not(.menu-active) .brand-logo img { max-width:132px; max-height:46px; }
    .brand-logo-jolly img,
    .site-header:not(.is-scrolled):not(.menu-active) .brand-logo-jolly img { max-width:48px; max-height:48px; }
    .header-whatsapp,
    .nav-toggle { width:42px; height:42px; }
    .header-whatsapp img { width:21px; height:21px; }
    .header-reserve {
        position:static;
        width:auto;
        min-height:42px;
        padding:6px 12px;
        border-radius:var(--radius);
        box-shadow:none;
    }
    .header-reserve span { font-size:9px; }
    .header-reserve strong { margin-top:1px; font-size:11px; }
    .main-nav { top:64px; overflow-y:auto; }
    .main-nav.is-open { max-height:calc(100svh - 64px); padding-top:8px; padding-bottom:12px; }
    .main-nav a { padding:9px 0; font-size:15px; }
    .hero { min-height:100svh; }
    .hero-content { padding-top:76px; padding-bottom:24px; }
    .hero .hero-title { max-width:760px; margin-bottom:16px; font-size:44px; }
    .hero-actions { gap:8px; }
    .hero-actions .button { width:auto; min-height:42px; padding:8px 16px; font-size:12px; }
    .scroll-down { display:none; }
    .section { padding-block:48px; }
    .section-head { margin-bottom:26px; }
    .image-section-inner { padding-block:48px; }
    .hours-card { padding:26px; }
    .gallery { grid-template-columns:repeat(3,1fr); }
    .footer-content { padding-block:38px 20px; }
    .footer-grid { gap:24px; }
    .footer-bottom { flex-flow:row wrap; align-items:center; margin-top:30px; }
}