/*
 * Adelheids Spargelhaus: layout and motion. Tokens only (see tokens.css); no hard-coded colours.
 */

/* ---------- Illustration helpers (placeholder art follows the palette, incl. dark mode) ---------- */
.f-brand { fill: var(--color-brand); } .f-accent { fill: var(--color-accent); } .f-paper { fill: var(--color-paper); }
.f-surface { fill: var(--color-surface); } .f-ink { fill: var(--color-ink); } .f-glow { fill: var(--ad-glow); }
.st-line { stroke: var(--color-line); } .st-brand { stroke: var(--color-brand); } .st-ink { stroke: var(--color-ink); }
.s-glow { stop-color: var(--ad-glow); } .s-paper { stop-color: var(--color-paper); } .s-accent { stop-color: var(--color-accent); }
.ad-art, .ad-photo { display: block; width: 100%; height: 100%; }
.ad-photo { object-fit: cover; }
.steam path { animation: ad-steam 4s ease-in-out infinite; }
.steam path:nth-child(2) { animation-delay: .8s; } .steam path:nth-child(3) { animation-delay: 1.6s; }
@keyframes ad-steam { 0%, 100% { transform: translateY(0); opacity: .9; } 50% { transform: translateY(-8px); opacity: .4; } }

/* ---------- Header ---------- */
.ad-header {
    position: sticky; top: 0; z-index: 60;
    background: color-mix(in oklab, var(--color-paper) 84%, transparent);
    backdrop-filter: blur(12px) saturate(1.2);
    border-bottom: 1px solid transparent;
    transition: border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
/* Logged-in editors: the WordPress toolbar is 32px (46px on small screens), keep the sticky header below it */
.admin-bar .ad-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .ad-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .ad-header { top: 0; } } /* the toolbar scrolls away there */
.ad-header.is-stuck { border-bottom-color: var(--color-line); box-shadow: var(--shadow-sm); }
.ad-header__bar { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 3); }
.ad-brand { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em; color: var(--color-ink); text-decoration: none; margin-inline-end: auto; }
.ad-brand em { font-style: normal; color: var(--color-brand); }
.ad-brand__mark { width: 2.1rem; height: 2.1rem; color: var(--color-brand); transition: transform var(--duration-slow) var(--ease-emphasized); }
.ad-brand:hover .ad-brand__mark { transform: rotate(-8deg) scale(1.08); }
.ad-phone { display: none; align-items: center; gap: .4rem; font-weight: 700; color: var(--color-ink); text-decoration: none; }
.ad-phone:hover { color: var(--color-brand); }
.ad-header__cta { display: none; }
@media (min-width: 30rem) { .ad-header__cta { display: inline-flex; } }
@media (min-width: 62rem) {
    .ad-header__bar { flex-wrap: nowrap; }
    .ad-nav { order: 2; margin-inline: auto; }
    .ad-brand { margin-inline-end: 0; }
    .site-header__tools { order: 3; }
    .ad-phone { display: inline-flex; }
}
.ad-nav .site-nav__list a { font-weight: 600; font-size: var(--text-sm); }

/* ---------- Type + shared bits ---------- */
.ad-eyebrow { display: flex; align-items: center; gap: .75rem; margin: 0 0 1rem; text-transform: uppercase; letter-spacing: .14em; font-size: var(--text-sm); font-weight: 700; color: var(--color-brand); }
.ad-eyebrow::before { content: ""; width: 2.5rem; height: 2px; background: currentColor; }
.ad-head--center { margin-inline: auto; text-align: center; }
.ad-head--center .ad-eyebrow { justify-content: center; }
.ad-head--center .ad-eyebrow::before { display: none; }
.ad-h1 { font-size: clamp(2.6rem, 1rem + 4.6vw, 5.4rem); line-height: 1; font-weight: 850; letter-spacing: -.035em; margin: 0; text-wrap: balance; }
.ad-h2 { font-size: clamp(2rem, 1.2rem + 3.4vw, 3.9rem); line-height: 1.05; margin: 0; text-wrap: balance; }
.ad-h3 { font-size: var(--text-3xl); margin: 0 0 1rem; }
.ad-lead { font-size: var(--text-xl); line-height: 1.55; color: var(--color-ink-muted); max-width: 36rem; margin: 1.25rem 0 0; }
.ad-head--center .ad-lead { margin-inline: auto; }
.ad-section { padding-block: var(--section-y); scroll-margin-top: 4.5rem; }
.ad-head { max-width: 44rem; margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem); }
.ad-head--center { max-width: 48rem; }

/* ---------- Hero ---------- */
.ad-hero { position: relative; overflow: clip; padding-block: clamp(1.5rem, .5rem + 4vw, 4.5rem) clamp(5rem, 3rem + 5vw, 8rem);
    background: radial-gradient(60rem 38rem at 88% 12%, var(--ad-glow), transparent 62%), radial-gradient(40rem 30rem at 0% 100%, color-mix(in oklab, var(--color-accent) 10%, transparent), transparent 60%); }
.ad-hero__grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 62rem) { .ad-hero__grid { grid-template-columns: 1.3fr .7fr; gap: 4rem; min-height: min(74svh, 46rem); } }
.ad-h1 .ad-mark { color: var(--color-brand); white-space: nowrap;
    background: linear-gradient(transparent 64%, color-mix(in oklab, var(--color-accent) 48%, transparent) 64% 92%, transparent 92%) no-repeat left / 0 100%;
    animation: ad-mark 1.1s .9s var(--ease-standard) forwards; }
@keyframes ad-mark { to { background-size: 100% 100%; } }
.ad-hero .ad-lead { max-width: 30rem; }
.ad-cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.25rem; }
.ad-cta .btn svg { transition: transform var(--duration-base) var(--ease-standard); }
.ad-cta .btn:hover svg { transform: translateX(4px); }
.ad-hint-inline { display: flex; align-items: center; gap: .6rem; margin: 1.75rem 0 0; font-size: var(--text-sm); color: var(--color-ink-muted); }
.ad-pulse { width: .65rem; height: .65rem; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 0 color-mix(in oklab, var(--color-accent) 60%, transparent); animation: ad-pulse 2.2s infinite; flex: none; }
@keyframes ad-pulse { 70% { box-shadow: 0 0 0 .8rem transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

.ad-hero__media { position: relative; justify-self: center; width: min(100%, 33rem); isolation: isolate; }
.ad-hero__media::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 2px solid var(--color-accent); border-radius: 999px 999px var(--radius-xl) var(--radius-xl); transform: translate(1.1rem, 1.1rem); opacity: .8; }
.ad-arch { aspect-ratio: 4 / 5; border-radius: 999px 999px var(--radius-xl) var(--radius-xl); overflow: hidden; box-shadow: var(--ad-arch-shadow); background: var(--color-surface); outline: 1px solid var(--color-line); }
.ad-badge { position: absolute; left: -1.25rem; bottom: 2.5rem; width: 7.5rem; height: 7.5rem; filter: drop-shadow(0 10px 18px rgb(0 0 0 / .25)); }
@media (min-width: 40rem) { .ad-badge { left: -2.75rem; width: 9.5rem; height: 9.5rem; } }
.ad-badge__bg { fill: var(--color-brand); }
.ad-badge__text { font: 700 10.5px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; fill: var(--color-brand-ink); transform-box: view-box; transform-origin: 50% 50%; animation: ad-spin 26s linear infinite; }
.ad-badge__mark { color: var(--color-brand-ink); }
@keyframes ad-spin { to { transform: rotate(360deg); } }
.ad-scroll { position: absolute; left: 50%; bottom: 1.1rem; transform: translateX(-50%); display: none; justify-items: center; gap: .5rem; font: 700 .68rem var(--font-sans); letter-spacing: .28em; text-transform: uppercase; color: var(--color-ink-muted); text-decoration: none; }
@media (min-width: 62rem) { .ad-scroll { display: grid; } }
.ad-scroll i { position: relative; width: 1px; height: 2.75rem; background: color-mix(in oklab, currentColor 30%, transparent); overflow: hidden; }
.ad-scroll i::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 40%; background: var(--color-brand); animation: ad-drip 1.8s var(--ease-standard) infinite; }
@keyframes ad-drip { from { transform: translateY(-100%); } to { transform: translateY(260%); } }

/* ---------- Entrance + scroll reveal ---------- */
.ad-in { animation: ad-in .85s calc(var(--i, 0) * 120ms + 80ms) var(--ease-standard) both; }
@keyframes ad-in { from { opacity: 0; transform: translateY(1.4rem); } }
.reveal-ready .ad-reveal:not(.is-visible) { opacity: 0; transform: translateY(1.6rem); }
.ad-reveal { transition: opacity .8s var(--ease-standard), transform .8s var(--ease-standard); transition-delay: calc(var(--i, 0) * 100ms); }

/* ---------- Seasons ---------- */
.ad-season { background: var(--color-surface); }
.ad-season__grid { display: grid; gap: 1.25rem; list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.ad-card { position: relative; display: flex; flex-direction: column; gap: .75rem; padding: 2.25rem 2rem 2rem; background: var(--color-paper); border: 1px solid var(--color-line); border-radius: var(--card-radius); transition: transform var(--duration-slow) var(--ease-emphasized), box-shadow var(--duration-slow) var(--ease-standard), opacity .8s var(--ease-standard); }
.ad-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.ad-card h3 { font-size: var(--text-3xl); margin: 0; }
.ad-card p { margin: 0; }
.ad-card__when { text-transform: uppercase; letter-spacing: .1em; font-size: var(--text-sm); font-weight: 700; color: var(--color-brand); }
.ad-link { margin-top: auto; padding-top: .75rem; font-weight: 700; color: var(--color-brand); text-decoration: none; }
.ad-link:hover { text-decoration: underline; }
.ad-card.is-now { background: var(--color-brand); color: var(--color-brand-ink); border-color: transparent; }
.ad-card.is-now .ad-card__when, .ad-card.is-now .ad-link { color: inherit; }
.ad-now { position: absolute; top: 1.1rem; right: 1.1rem; padding: .2rem .75rem; border-radius: 99px; background: var(--color-accent); color: var(--color-accent-ink); font-size: .75rem; font-weight: 800; letter-spacing: .04em; }

/* ---------- Split sections ---------- */
.ad-split { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 62rem) { .ad-split { grid-template-columns: 1fr 1fr; gap: 5rem; } .ad-split--book { grid-template-columns: .9fr 1.1fr; align-items: start; } }
.ad-frame { aspect-ratio: 4 / 3; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--color-surface); border: 1px solid var(--color-line); }
.ad-frame--round { border-radius: var(--radius-xl) 12rem var(--radius-xl) 12rem; }
.ad-points { display: grid; gap: 1.5rem; list-style: none; margin: 2rem 0 0; padding: 0; }
.ad-points li { padding-left: 1.25rem; border-left: 3px solid var(--color-accent); }
.ad-points h3 { font-size: var(--text-2xl); margin: 0 0 .25rem; }
.ad-points p { margin: 0; color: var(--color-ink-muted); }

.ad-menu { display: grid; gap: clamp(3rem, 2rem + 5vw, 6rem); background: linear-gradient(var(--color-paper), var(--color-paper)); }
.ad-menu > .wrap { display: grid; gap: clamp(3rem, 2rem + 5vw, 6rem); }
.ad-menu .ad-head { margin-bottom: 0; }
.ad-split__copy p { color: var(--color-ink-muted); font-size: var(--text-lg); }
.ad-split__copy .ad-h3 { color: var(--color-ink); }

/* ---------- Quotes ---------- */
.ad-quotes { background: var(--color-surface); }
.ad-quotes__grid { display: grid; gap: 1.25rem; list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.ad-quote { position: relative; padding: 2.75rem 2rem 2rem; background: var(--color-paper); border: 1px solid var(--color-line); border-radius: var(--card-radius); }
.ad-quote::before { content: "\201C"; position: absolute; top: .4rem; left: 1.4rem; font: 800 5.5rem/1 var(--font-display); color: var(--color-accent); opacity: .55; }
.ad-quote blockquote { margin: 0; display: grid; gap: 1.25rem; }
.ad-quote p { margin: 0; font-size: var(--text-lg); }
.ad-quote cite { font-style: normal; font-weight: 800; color: var(--color-brand); }

/* ---------- Reservation ---------- */
.ad-book { background: color-mix(in oklab, var(--color-brand) 9%, var(--color-paper)); }
.ad-phone-card { display: grid; gap: .1rem; width: fit-content; margin: 2rem 0 0; padding: 1.1rem 1.6rem; border-radius: var(--radius-lg); background: var(--color-brand); color: var(--color-brand-ink); }
.ad-phone-card span { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .12em; font-weight: 700; opacity: .9; }
.ad-phone-card a { color: inherit; font: 800 clamp(1.7rem, 1.2rem + 2vw, 2.4rem) var(--font-display); text-decoration: none; }
.ad-phone-card a:hover { text-decoration: underline; }
.ad-book__widget .bkb { max-width: none; padding: clamp(1.1rem, .5rem + 2vw, 2rem); background: var(--color-paper); border: 1px solid var(--color-line); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); }

/* ---------- Footer ---------- */
.ad-footer { background: var(--ad-footer-bg); color: var(--ad-footer-ink); padding-block: clamp(3.5rem, 2rem + 5vw, 6rem) 2rem; }
.ad-footer a { color: inherit; text-underline-offset: .2em; }
.ad-footer a.btn { color: var(--color-accent-ink); text-decoration: none; }
.ad-footer__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem; padding-bottom: 3rem; border-bottom: 1px solid color-mix(in oklab, var(--ad-footer-ink) 18%, transparent); }
.ad-footer__claim { margin: 0; font: 800 clamp(2rem, 1.2rem + 4vw, 4.2rem)/1 var(--font-display); letter-spacing: -.03em; }
.ad-footer__claim em { font-style: normal; color: var(--ad-footer-accent); }
.ad-footer__cols { display: grid; gap: 2.5rem; padding-block: 3rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.ad-footer__h { margin: 0 0 1rem; font: 700 .78rem var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ad-footer-muted); }
.ad-footer address { font-style: normal; }
.ad-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.ad-footer p { margin: 0 0 .9rem; }
.ad-footer__cols section:last-child p, .ad-footer__share { font-size: var(--text-sm); color: var(--ad-footer-muted); }
.ad-footer__copy { margin: 0; font-size: var(--text-sm); color: var(--ad-footer-muted); }

/* ---------- Hold to reserve ---------- */
body.ad-holding { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: progress; }
.ad-hold { position: fixed; left: var(--x, 50%); top: var(--y, 50%); z-index: 9999; display: grid; justify-items: center; gap: .65rem; pointer-events: none;
    opacity: 0; transform: translate(-50%, calc(-50% + var(--dy, 0px))) scale(.55); transition: opacity .16s ease, transform .26s var(--ease-emphasized); }
.ad-hold.is-on { opacity: 1; transform: translate(-50%, calc(-50% + var(--dy, 0px))) scale(1); }
.ad-hold__ring { display: block; border-radius: 50%; background: color-mix(in oklab, var(--color-paper) 92%, transparent); box-shadow: var(--shadow-lg), 0 0 0 1px var(--color-line); backdrop-filter: blur(4px); transform: rotate(-90deg); }
.ad-hold__track, .ad-hold__bar { fill: none; stroke-width: 6; }
.ad-hold__track { stroke: var(--color-line); }
.ad-hold__bar { stroke: var(--color-brand); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0)); }
.ad-hold__label { padding: .45rem 1rem; border-radius: 99px; background: var(--color-ink); color: var(--color-paper); font: 700 .88rem var(--font-sans); white-space: nowrap; box-shadow: var(--shadow-md); }
.ad-hold.is-done .ad-hold__bar { stroke: var(--color-accent); }
.ad-hold.is-done .ad-hold__ring { animation: ad-done .4s var(--ease-emphasized); }
@keyframes ad-done { 50% { transform: rotate(-90deg) scale(1.14); } }
.ad-hint { position: fixed; left: 50%; bottom: 1.25rem; z-index: 90; transform: translateX(-50%); max-width: calc(100vw - 2rem); padding: .65rem 1.2rem; border-radius: 99px; background: var(--color-ink); color: var(--color-paper); font-size: .9rem; box-shadow: var(--shadow-lg); animation: ad-in .6s var(--ease-standard) both; text-align: center; }
.ad-hint[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
    .ad-in, .steam path, .ad-badge__text, .ad-pulse, .ad-scroll i::after { animation: none; }
    .ad-h1 .ad-mark { animation: none; background-size: 100% 100%; }
    .reveal-ready .ad-reveal:not(.is-visible) { opacity: 1; transform: none; }
    .ad-card:hover { transform: none; }
}

/* Small phones: keep wordmark, theme switch and menu button on one row */
@media (max-width: 29.99rem) {
    .ad-brand { font-size: 1.05rem; gap: .45rem; }
    .ad-brand__mark { width: 1.6rem; height: 1.6rem; }
    .ad-header__bar { flex-wrap: nowrap; gap: .5rem; }
    .ad-header__bar .site-nav { position: absolute; left: 0; right: 0; top: 100%; padding: .75rem var(--gutter) 1rem; background: var(--color-paper); border-bottom: 1px solid var(--color-line); box-shadow: var(--shadow-md); }
    .ad-header { position: sticky; }
    .ad-eyebrow { font-size: .72rem; letter-spacing: .1em; }
}
@media (min-width: 30rem) and (max-width: 61.99rem) {
    .ad-header__bar .site-nav { position: absolute; left: 0; right: 0; top: 100%; padding: .75rem var(--gutter) 1rem; background: var(--color-paper); border-bottom: 1px solid var(--color-line); box-shadow: var(--shadow-md); }
}
/* ---------- Placeholder photos: the photo sits over the illustration ---------- */
.ad-ph { position: relative; display: block; width: 100%; height: 100%; }
.ad-ph .ad-art { position: absolute; inset: 0; }
.ad-ph .ad-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Impressionen ---------- */
.ad-gallery { background: var(--color-paper); }
.ad-more { margin: 2.5rem 0 0; text-align: center; }
.ad-gallery .bkn-gallery__img { transition-duration: .9s; }