/* Ein Abend am See — gemeinsame Gestaltungsschicht des Restaurant Schmiedehafen.
   Wird als letztes Stylesheet geladen und wirkt nur unter html[data-abend].
   Formulare, Planer und Reservierung behalten ihre Funktion; hier ändert sich nur die Optik. */

@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400;font-display:swap;src:url(../sm-premium/fonts/playfair-display-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/playfair-display-latin-400-italic.woff2) format('woff2')}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:500;font-display:swap;src:url(../sm-premium/fonts/playfair-display-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:500;font-display:swap;src:url(../sm-premium/fonts/playfair-display-latin-500-italic.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/dm-sans-400-normal.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/dm-sans-500-normal.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/dm-sans-600-normal.woff2) format('woff2')}

/* ---------- Tokens: Farbe folgt der Uhrzeit des Abends ---------- */
html[data-abend]{
  --ink:#262A2E; --ink-2:#353A3F; --muted:#595D61; --paper:#F7F6F2;
  --cognac:#874A23; --cognac-d:#6E3A1A; --gold:#F3C47E;
  --line:rgba(38,42,46,.16); --line-2:rgba(38,42,46,.32);
  --bg:#F7F6F2; --deep:#EEE7DA; --card:#FBFAF6;
  --fg:var(--ink); --fg-soft:var(--muted); --em:var(--cognac);
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.2,.7,.1,1);
  --gut:clamp(20px,6vw,96px);
  --kopf-h:112px;
  scroll-padding-top:120px;
}
html[data-abend][data-hour="17"]{--bg:#F3EEE5;--deep:#E6DCCB;--card:#FAF7F1}
html[data-abend][data-hour="18"]{--bg:#EFE8DC;--deep:#E2D3BB;--card:#F8F4EC}
html[data-abend][data-hour="19"]{--bg:#F1E7D6;--deep:#DFBE93;--card:#FAF4EA}
html[data-abend][data-hour="21"]{--bg:#F2E5D9;--deep:#C48A62;--card:#FAF3EC}
html[data-abend][data-tone="dunkel"]{
  --bg:#262A2E; --deep:#1C1F22; --card:#30353A;
  --fg:#F7F6F2; --fg-soft:rgba(247,246,242,.78); --em:var(--gold);
  --line:rgba(247,246,242,.16); --line-2:rgba(247,246,242,.36);
}

/* ---------- Grundlage ---------- */
html[data-abend] body{
  background:var(--bg)!important; color:var(--fg)!important;
  font-family:var(--sans)!important; font-size:18px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
html[data-abend] body::before{
  content:''; position:fixed; inset:0; z-index:2; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12  0 0 0 0 .12  0 0 0 0 .10  0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/256px 256px; opacity:.6;
}
html[data-abend] main{position:relative; z-index:1; background:transparent!important}
html[data-abend] main p, html[data-abend] main li, html[data-abend] main dd, html[data-abend] main dt{ text-wrap:pretty }
html[data-abend] :where(main) :is(h1,h2,h3){
  font-family:var(--serif)!important; font-weight:400!important; letter-spacing:-.018em!important;
  color:var(--fg); text-wrap:balance; text-transform:none!important;
}
html[data-abend] main h1{font-size:clamp(44px,5.6vw,88px)!important; line-height:1.04!important; overflow-wrap:break-word; hyphens:manual}
html[data-abend] main h2{font-size:clamp(34px,4.4vw,64px)!important; line-height:1.08!important}
html[data-abend] main h3{font-size:clamp(23px,2.1vw,30px)!important; line-height:1.18!important}
html[data-abend] main :is(h1,h2,h3) em{font-style:italic; color:var(--em)}
html[data-abend] main p{color:inherit}
html[data-abend] main a:not([class]){color:inherit; text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:1px}
html[data-abend] ::selection{background:var(--gold); color:var(--ink)}

/* Etiketten: keine Großbuchstaben mehr, sondern die ruhige Kursive des Abends */
html[data-abend] main :is(.eyebrow,[class$="-kicker"],[class*="-kicker "],.qf-kicker,.pp-kicker,.sf-eyebrow,.hl-kicker,.signature-kicker,.sf-eyebrow,#se-kicker,#se-location,.pm-eyebrow,.fe-kicker,.sm-kicker){
  font-family:var(--serif)!important; font-style:italic!important; font-weight:400!important;
  font-size:clamp(18px,1.4vw,20px)!important; letter-spacing:0!important; text-transform:none!important;
  color:var(--em)!important; opacity:1!important; line-height:1.3!important;
}
/* Zeitmarke im Seitenkopf: „18:30 Aus der Küche“ */
html[data-abend] main .ab-zeit{
  display:flex!important; align-items:baseline; flex-wrap:wrap; gap:4px 14px;
  font-family:var(--sans)!important; font-style:normal!important; font-size:15px!important;
  color:var(--fg-soft)!important; letter-spacing:.01em!important;
}
html[data-abend] main .ab-zeit .ab-hour{
  font:italic 400 24px/1 var(--serif); color:var(--em); letter-spacing:0;
}

/* ---------- Knöpfe: eine Form für alles ---------- */
html[data-abend] :is(main,footer,.ab-kopf) :is(.button,.hl-btn,.pp-button,.sf-action,.se-primary,.dark-button,.ab-btn){
  display:inline-flex!important; align-items:center!important; justify-content:center; gap:10px;
  min-height:54px!important; padding:0 28px!important; border-radius:999px!important;
  background:var(--cognac)!important; color:#FFF9F2!important; border:0!important; box-shadow:none!important;
  font:600 16px/1.2 var(--sans)!important; letter-spacing:0!important; text-transform:none!important; text-decoration:none!important;
  transition:transform .45s var(--ease),background-color .3s,filter .3s!important; white-space:normal; text-align:center;
}
html[data-abend] :is(main,footer,.ab-kopf) :is(.button,.hl-btn,.pp-button,.sf-action,.se-primary,.ab-btn):hover{transform:translateY(-2px); background:var(--cognac-d)!important}
html[data-abend] main :is(.dark-button,.button.dark,.ab-btn-ink){background:var(--ink)!important; color:var(--paper)!important}
html[data-abend][data-tone="dunkel"] main :is(.button,.se-primary,.dark-button){background:var(--gold)!important; color:var(--ink)!important}
html[data-abend] main :is(.button.ghost,.ab-btn-ghost){background:transparent!important; color:var(--fg)!important; box-shadow:inset 0 0 0 1px var(--line-2)!important}
html[data-abend] main :is(.text-link,.hl-link){border:0!important; box-shadow:none!important; background-image:none!important; padding-bottom:0!important;
  color:var(--fg)!important; font-weight:500!important; text-decoration:underline!important;
  text-underline-offset:7px!important; text-decoration-thickness:1px!important; letter-spacing:0!important; text-transform:none!important;
}
/* Glanz nur auf der wichtigsten Aktion */
html[data-abend] .ab-shimmer{
  background-image:linear-gradient(110deg,transparent 35%,rgba(255,236,210,.42) 50%,transparent 65%)!important;
  background-size:250% 100%!important; background-repeat:no-repeat!important; animation:abShim 4.8s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes abShim{0%{background-position:130% 0}55%,100%{background-position:-30% 0}}

/* ---------- Kopfzeile mit Birken-Abenduhr ---------- */
html[data-abend] .ab-kopf{
  position:sticky!important; top:0; left:0; right:0; z-index:60!important;
  display:block!important; padding:0!important; margin:0!important; height:auto!important; min-height:0!important;
  background:color-mix(in srgb,var(--bg) 90%,transparent)!important; color:var(--fg);
  -webkit-backdrop-filter:blur(14px) saturate(1.1); backdrop-filter:blur(14px) saturate(1.1);
  border:0!important; box-shadow:none!important; transition:background-color .4s var(--ease),color .4s, transform .5s var(--ease);
}
html[data-abend] .ab-kopf-row{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:14px var(--gut) 8px; max-width:1680px; margin:0 auto}
html[data-abend] .ab-kopf .brand{flex-shrink:0!important; display:flex!important; align-items:center; gap:0; flex:0 0 auto; text-decoration:none; background:none!important; padding:0!important}
html[data-abend] .ab-kopf .brand img{width:92px!important; height:80px!important; object-fit:contain; display:block; margin:0!important; filter:none!important; mix-blend-mode:normal!important; opacity:1!important; background:none!important; border-radius:0!important; box-shadow:none!important}
html[data-abend] .ab-kopf .brand .ab-logo-hell{display:none}
html[data-abend] .ab-kopf .brand span{display:none!important}
html[data-abend] .ab-kopf nav#menu{display:flex; align-items:center; gap:clamp(18px,2.2vw,34px); position:static; background:none; padding:0; margin:0; box-shadow:none; transform:none; opacity:1; visibility:visible; flex-direction:row}
html[data-abend] .ab-kopf nav#menu > a{
  font:500 15px/1.2 var(--sans)!important; color:var(--fg)!important; text-decoration:none!important; letter-spacing:.005em!important; text-transform:none!important;
  padding:8px 0!important; background:none!important; border:0!important; position:relative; min-height:0!important;
}
html[data-abend] .ab-kopf nav#menu > a::after{content:''; position:absolute; left:0; right:0; bottom:2px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .5s var(--ease)}
html[data-abend] .ab-kopf nav#menu > a:hover::after, html[data-abend] .ab-kopf nav#menu > a[aria-current="page"]::after{transform:scaleX(1); transform-origin:left}
html[data-abend] .ab-kopf nav#menu .mobile-reserve{display:none!important}
html[data-abend] .ab-kopf .guest-language-control{display:inline-flex!important; gap:8px; margin-left:8px; font:500 14px var(--sans); background:none!important; border:0!important; padding:0!important}
html[data-abend] .ab-kopf .guest-language-control a{color:var(--fg)!important; opacity:.55; text-decoration:none!important; padding:6px 2px!important; min-height:0!important; background:none!important}
html[data-abend] .ab-kopf .guest-language-control a[aria-current="page"]{opacity:1; font-weight:600}
html[data-abend] .ab-kopf .header-cta{min-height:46px!important; padding:0 22px!important; font-size:15px!important; flex:0 0 auto}
html[data-abend] .ab-kopf .menu-button{display:none!important}
html[data-abend] .ab-uhr{position:relative; height:24px; margin:0 var(--gut); max-width:calc(1680px - 2 * var(--gut))}
@media (min-width:1680px){html[data-abend] .ab-uhr{margin:0 auto; max-width:calc(1680px - 2 * var(--gut))}}
html[data-abend] .ab-uhr-line{position:absolute; left:0; right:0; top:2px; height:4px; border-radius:2px;
  background:
   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='4'%3E%3Cg fill='%23262A2E' fill-opacity='.22'%3E%3Crect x='6' y='1' width='18' height='1.6'/%3E%3Crect x='44' y='2.2' width='7' height='1.4'/%3E%3Crect x='70' y='.6' width='26' height='1.8'/%3E%3Crect x='118' y='2' width='9' height='1.4'/%3E%3Crect x='142' y='1' width='16' height='1.7'/%3E%3Crect x='181' y='2.2' width='22' height='1.4'/%3E%3C/g%3E%3C/svg%3E") 0 0/220px 4px repeat-x,
   rgba(38,42,46,.07)}
html[data-abend] .ab-uhr-fill{position:absolute; left:0; top:2px; height:4px; width:calc(var(--ab-p,0) * 100%); border-radius:2px; background:linear-gradient(90deg,rgba(243,196,126,0),rgba(243,196,126,.65)); transition:width .2s linear}
html[data-abend] .ab-uhr-dot{position:absolute; top:-1px; left:calc(var(--ab-pos,0) * 100%); width:10px; height:10px; margin-left:-5px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 3px rgba(243,196,126,.25),0 0 16px 4px rgba(243,196,126,.5); transition:left .9s var(--ease)}
html[data-abend] .ab-uhr-label{position:absolute; right:0; top:9px; font:400 14px/1 var(--sans); color:var(--fg); white-space:nowrap}
html[data-abend] .ab-uhr-label i{font:italic 400 15px/1 var(--serif); margin-right:6px}

/* Kopf über dem Film (Startseite) */
html[data-abend].ab-film .ab-kopf{position:fixed!important; background:transparent!important; -webkit-backdrop-filter:none; backdrop-filter:none; --fg:#F7F6F2}
html[data-abend].ab-film .ab-kopf .brand .ab-logo-dunkel{display:none}
html[data-abend].ab-film .ab-kopf .brand .ab-logo-hell{display:block}
html[data-abend].ab-film .ab-kopf .ab-uhr-line{background-color:rgba(247,246,242,.22); filter:invert(1); opacity:.6}
html[data-abend].ab-film .ab-kopf.is-solid{background:rgba(247,246,242,.9)!important; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); --fg:#262A2E}
html[data-abend].ab-film .ab-kopf.is-solid .brand .ab-logo-dunkel{display:block}
html[data-abend].ab-film .ab-kopf.is-solid .brand .ab-logo-hell{display:none}
html[data-abend].ab-film .ab-kopf.is-solid .ab-uhr-line{background-color:rgba(38,42,46,.10); filter:none}
html[data-abend].ab-film .ab-kopf.is-solid .brand img{width:72px!important; height:62px!important}
/* Dunkle Seite (Hafenbar) */
html[data-abend][data-tone="dunkel"] .ab-kopf .brand .ab-logo-dunkel{display:none}
html[data-abend][data-tone="dunkel"] .ab-kopf .brand .ab-logo-hell{display:block}
html[data-abend][data-tone="dunkel"] .ab-kopf .ab-uhr-line{filter:invert(1); background-color:rgba(247,246,242,.2)}
html[data-abend][data-tone="dunkel"] .ab-kopf .header-cta{background:var(--gold)!important; color:var(--ink)!important}

@media (max-width:980px){
  html[data-abend]{--kopf-h:88px}
  html[data-abend] .ab-kopf, html[data-abend].ab-film .ab-kopf.is-solid{-webkit-backdrop-filter:none!important; backdrop-filter:none!important}
  html[data-abend] .ab-kopf{background:var(--bg)!important}
  html[data-abend].ab-film .ab-kopf.is-solid{background:#F7F6F2!important}
  html[data-abend] .ab-kopf-row{padding:10px 20px 6px; gap:12px}
  html[data-abend] .ab-kopf .brand img{width:70px!important; height:60px!important}
  html[data-abend] .ab-kopf .header-cta{display:none!important}
  html[data-abend] .ab-kopf .menu-button{
    display:flex!important; flex-direction:column; align-items:center; justify-content:center; gap:6px;
    width:48px!important; height:48px!important; min-height:0!important; padding:0!important; border-radius:50%!important;
    border:1px solid var(--line-2)!important; background:transparent!important; color:var(--fg)!important; font-size:0!important; position:relative; z-index:70
  }
  html[data-abend] .ab-kopf .menu-button i{display:block; width:18px; height:1.5px; background:var(--fg); transition:transform .4s var(--ease)}
  html[data-abend] .ab-kopf .menu-button[aria-expanded="true"] i:first-of-type{transform:translateY(3.75px) rotate(45deg)}
  html[data-abend] .ab-kopf .menu-button[aria-expanded="true"] i:last-of-type{transform:translateY(-3.75px) rotate(-45deg)}
  html[data-abend] .ab-kopf nav#menu{
    position:fixed!important; inset:0!important; z-index:65; display:flex!important; flex-direction:column; align-items:flex-start; justify-content:center; gap:4px;
    padding:120px 28px 140px!important; background:#262A2E!important; color:#F7F6F2;
    opacity:0; visibility:hidden; transform:none!important; transition:opacity .45s var(--ease),visibility 0s .45s; overflow-y:auto; max-height:none!important; height:100%!important; width:100%!important; border:0!important
  }
  html[data-abend] .ab-kopf nav#menu.open{opacity:1; visibility:visible; transition:opacity .45s var(--ease)}
  html[data-abend] .ab-kopf nav#menu > a{font:400 clamp(34px,9vw,48px)/1.2 var(--serif)!important; color:#F7F6F2!important; padding:6px 0!important}
  html[data-abend] .ab-kopf nav#menu .mobile-reserve{display:inline-flex!important; margin-top:24px; font:600 16px var(--sans)!important; background:var(--gold)!important; color:var(--ink)!important; border-radius:999px; padding:0 26px!important; min-height:54px!important; align-items:center}
  html[data-abend] .ab-kopf nav#menu .guest-language-control{margin:24px 0 0}
  html[data-abend] .ab-kopf nav#menu .guest-language-control a{color:#F7F6F2!important}
  html[data-abend] .ab-kopf:has(nav#menu.open) .menu-button{--fg:#F7F6F2; border-color:rgba(247,246,242,.5)!important}
  html[data-abend] .ab-uhr{margin:0 20px}
  html[data-abend] .ab-uhr-label{font-size:14px}
}

/* ---------- Abschluss und Fußbereich ---------- */
html[data-abend] .ab-fuss{
  position:relative; z-index:1; display:block!important; padding:0!important; margin:0!important; border:0!important;
  background:#262A2E!important; color:rgba(247,246,242,.82)!important; font:400 15px/1.6 var(--sans)!important; grid-template-columns:none!important;
}
html[data-abend] .ab-fuss::before{content:''; display:block; height:clamp(140px,16vw,240px); background:linear-gradient(180deg,var(--fuss-von,var(--bg)) 0%,#262A2E 100%)}
html[data-abend] .ab-fuss a{color:inherit; text-decoration:underline; text-decoration-color:rgba(247,246,242,.3); text-underline-offset:5px}
html[data-abend] .ab-fuss a:hover{color:#F7F6F2; text-decoration-color:currentColor}
html[data-abend] .ab-fuss-cta{max-width:1248px; margin:0 auto; padding:16px var(--gut) 88px; display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:36px; border-bottom:1px solid rgba(247,246,242,.12)}
html[data-abend] .ab-fuss-cta > div:first-child{display:flex; flex-direction:column; gap:16px; max-width:720px}
html[data-abend] .ab-fuss-line{margin:0!important; font:italic 400 20px/1.3 var(--serif)!important; color:var(--gold)!important}
html[data-abend] .ab-fuss-title{margin:0!important; font:400 clamp(30px,4.6vw,70px)/1.05 var(--serif)!important; letter-spacing:-.018em!important; color:#F7F6F2!important; text-wrap:balance}
html[data-abend] .ab-fuss-actions{display:flex; flex-wrap:wrap; gap:12px}
html[data-abend] .ab-fuss-actions a{display:inline-flex; align-items:center; min-height:54px; padding:0 24px; border-radius:999px; border:1px solid rgba(247,246,242,.4); color:#F7F6F2!important; text-decoration:none!important; font:500 16px var(--sans)!important}
html[data-abend] .ab-fuss-actions a:first-child{background:var(--cognac); border-color:var(--cognac); font-weight:600}
html[data-abend] .ab-fuss-actions a:hover{transform:translateY(-2px)}
html[data-abend] .ab-fuss-grid{max-width:1248px; margin:0 auto; padding:64px var(--gut) 40px; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr)); gap:36px}
html[data-abend] .ab-fuss-grid > div{display:flex; flex-direction:column; gap:6px}
html[data-abend] .ab-fuss :is(a,span,b,p,div,button){font-size:15px!important; line-height:1.6!important; font-family:var(--sans)!important; letter-spacing:0!important; text-transform:none!important}
html[data-abend] .ab-fuss :is(.ab-fuss-line,.ab-fuss-title){font-family:var(--serif)!important}
html[data-abend] .ab-fuss .ab-fuss-line{font-size:20px!important}
html[data-abend] .ab-fuss .ab-fuss-title{font-size:clamp(30px,4.6vw,70px)!important; line-height:1.05!important}
html[data-abend] .ab-fuss .ab-fuss-actions a{font-size:16px!important}
html[data-abend] .ab-fuss-brand p{font-size:14px!important}
html[data-abend] .ab-fuss-grid b{color:#F7F6F2; font-weight:600; margin-bottom:4px}
html[data-abend] .ab-fuss-grid img{width:150px; height:130px; object-fit:contain}
html[data-abend] .ab-fuss .footer-privacy{margin:0; padding:0; border:0; background:none; display:block}
html[data-abend] .ab-fuss .footer-privacy button{all:unset; cursor:pointer; color:rgba(247,246,242,.82); text-decoration:underline; text-decoration-color:rgba(247,246,242,.3); text-underline-offset:5px; font:400 15px/1.6 var(--sans)}
html[data-abend] .ab-fuss-brand{max-width:1248px; margin:0 auto; padding:28px var(--gut) 56px; display:flex; flex-wrap:wrap; align-items:center; gap:28px; border-top:1px solid rgba(247,246,242,.12); font-size:14px}
html[data-abend] .ab-fuss-brand a{text-decoration:none!important}
html[data-abend] .ab-fuss-brand img{width:168px; height:84px; object-fit:contain; display:block}
html[data-abend] .ab-fuss-brand p{margin:0; max-width:460px}

/* ---------- Handy-Leiste ---------- */
html[data-abend] .ab-dock{display:none!important}
@media (max-width:980px){
  html[data-abend] body{padding-bottom:0!important}
  html[data-abend] .ab-dock{
    display:grid!important; grid-template-columns:minmax(0,1fr) 54px 54px; gap:6px; position:fixed!important; left:12px!important; right:12px!important; bottom:calc(12px + env(safe-area-inset-bottom))!important; top:auto!important;
    z-index:55!important; padding:6px!important; border-radius:999px!important; background:rgba(247,246,242,.94)!important; border:0!important;
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 18px 40px -18px rgba(0,0,0,.5)!important; width:auto!important; height:auto!important;
    transition:transform .5s var(--ease),opacity .4s; transform:translateY(0)
  }
  html[data-abend] .ab-dock.is-suspended, html[data-abend] .ab-dock.ab-hidden{transform:translateY(140%); opacity:0}
  html[data-abend] .ab-dock a{display:flex!important; align-items:center; justify-content:center; min-height:52px!important; border-radius:999px!important; margin:0!important; padding:0 8px!important; text-decoration:none!important; font:600 16px var(--sans)!important; border:0!important}
  html[data-abend] .ab-dock a.mobile-primary{background:var(--cognac)!important; color:#FFF9F2!important}
  html[data-abend] .ab-dock a.ab-dock-call{background:var(--ink)!important; color:#F7F6F2!important}
  html[data-abend] .ab-dock a.ab-dock-wa{background:#E8E2D6!important; color:var(--ink)!important}
  html[data-abend] .ab-dock svg{width:21px; height:21px}
  html[data-abend] .ab-dock .ab-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  html[data-abend] .ab-fuss-brand{padding-bottom:120px}
}

/* ---------- Bewegung ---------- */
html.ab-js[data-abend] .ab-rv{opacity:0; transform:translateY(22px); filter:blur(8px); transition:opacity 1.1s var(--ease),transform 1.1s var(--ease),filter 1.1s var(--ease)}
html.ab-js[data-abend] .ab-rv.is-in{opacity:1; transform:none; filter:none}
html[data-abend] .ab-slit{clip-path:inset(0 calc((1 - var(--ab-p,1)) * 46%) round 0); will-change:clip-path}
html[data-abend] .ab-lights{filter:brightness(calc(.32 + var(--ab-p,1) * .68)) saturate(calc(.45 + var(--ab-p,1) * .55))}
html[data-abend] .ab-soft{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 15%,#000 85%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0,#000 15%,#000 85%,transparent 100%)}
html[data-abend] .ab-soft-b{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 78%,transparent 100%); mask-image:linear-gradient(180deg,#000 0,#000 78%,transparent 100%)}
html[data-abend] .ab-lens{position:relative; overflow:hidden; cursor:zoom-in}
html[data-abend] .ab-lens .ab-lz{position:absolute; inset:0; width:100%!important; height:100%!important; object-fit:cover; opacity:0; transform:scale(2.1); transform-origin:var(--x,50%) var(--y,50%); clip-path:circle(70px at var(--x,50%) var(--y,50%)); transition:opacity .3s; pointer-events:none}
html[data-abend] .ab-lens:hover .ab-lz{opacity:1}
html[data-abend] .ab-spot{position:relative; isolation:isolate}
html[data-abend] .ab-spot::before{content:''; position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0; transition:opacity .4s; border-radius:inherit; background:radial-gradient(360px circle at var(--x,50%) var(--y,40%),rgba(243,196,126,.36),rgba(243,196,126,0) 62%)}
html[data-abend] .ab-spot:hover::before{opacity:1}
html[data-abend] .ab-marq{display:flex; gap:88px; width:max-content; animation:abMarq 70s linear infinite}
html[data-abend] .ab-marq:hover{animation-play-state:paused}
@keyframes abMarq{to{transform:translateX(-50%)}}
html[data-abend] .ab-rot{display:block; height:1.08em; overflow:hidden}
html[data-abend] .ab-rot{font-style:italic}
html[data-abend] .ab-rot.is-on > span{display:block; animation:abRot 10s cubic-bezier(.7,0,.2,1) infinite}
html[data-abend] .ab-rot > span > span{display:block; height:1.08em}
@keyframes abRot{0%,27%{transform:translateY(0)}33%,60%{transform:translateY(-25%)}66%,93%{transform:translateY(-50%)}100%{transform:translateY(-75%)}}
html[data-abend] .ab-pulse{animation:abPulse 2.6s ease-in-out infinite}
@keyframes abPulse{0%,100%{box-shadow:0 0 0 0 rgba(243,196,126,.6)}50%{box-shadow:0 0 0 8px rgba(243,196,126,0)}}
html[data-abend] .ab-spark{position:absolute; bottom:-10px; width:3px; height:3px; border-radius:50%; background:var(--gold); box-shadow:0 0 8px 2px rgba(243,196,126,.7); opacity:0; animation:abSpark 7s linear infinite; pointer-events:none}
@keyframes abSpark{0%{transform:translate(0,0);opacity:0}10%{opacity:1}100%{transform:translate(30px,-440px);opacity:0}}
@property --ab-a{syntax:'<angle>';initial-value:0deg;inherits:false}
html[data-abend] .ab-beam{position:relative}
html[data-abend] .ab-beam::after{content:''; position:absolute; inset:0; border-radius:inherit; padding:2px; pointer-events:none;
  background:conic-gradient(from var(--ab-a),transparent 0deg,transparent 270deg,var(--gold) 320deg,var(--cognac) 345deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:abBeam 8s linear infinite}
@keyframes abBeam{to{--ab-a:360deg}}
@media (prefers-reduced-motion:reduce){
  html[data-abend] *, html[data-abend] *::before, html[data-abend] *::after{animation:none!important; transition:none!important}
  html.ab-js[data-abend] .ab-rv{opacity:1; transform:none; filter:none}
  html[data-abend] .ab-slit{clip-path:none}
  html[data-abend] .ab-lights{filter:none}
}

/* Ruhige Leseseiten (Impressum, Datenschutz, Fragen, Historie) */
html[data-abend] body.reading-page main article h2, html[data-abend] main article.editorial h2{font-size:clamp(28px,3vw,42px)!important; margin-top:1.6em}
html[data-abend] main article.editorial h3{font-size:clamp(21px,1.8vw,26px)!important}
html[data-abend] main article.editorial{max-width:820px}
/* Hafenbar: 22 Uhr. Die Seite bleibt warm und hell, Kopf und Bilder tragen die Nacht */
html[data-abend][data-hour="22"]{--bg:#EDE4D7; --deep:#262A2E; --card:#F8F3EB}
html[data-abend][data-hour="22"] .ab-kopf{--fg:#F7F6F2; background:rgba(38,42,46,.94)!important}
html[data-abend][data-hour="22"] .ab-kopf .brand .ab-logo-dunkel{display:none}
html[data-abend][data-hour="22"] .ab-kopf .brand .ab-logo-hell{display:block}
html[data-abend][data-hour="22"] .ab-kopf .ab-uhr-line{filter:invert(1); background-color:rgba(247,246,242,.2)}
html[data-abend][data-hour="22"] .ab-kopf .header-cta{background:var(--gold)!important; color:var(--ink)!important}
@media (max-width:980px){html[data-abend][data-hour="22"] .ab-kopf{background:#262A2E!important}}

/* =================== Startseite: ein Abend von 16 bis 22 Uhr =================== */
html.ab-home[data-abend] body{background:#F7F6F2!important}
html.ab-home main{font-size:18px}
html.ab-home[data-abend] .ab-wrap{max-width:1248px; margin:0 auto; padding-left:var(--gut); padding-right:var(--gut); box-sizing:content-box}
html.ab-home[data-abend] .ab-split{display:grid; gap:clamp(36px,6vw,96px); align-items:start}
html.ab-home[data-abend] .ab-split-7-5{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
html.ab-home[data-abend] .ab-split-5-7{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
html.ab-home[data-abend] .ab-split-6-6{grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center}
html.ab-home[data-abend] .ab-stack{display:flex; flex-direction:column; gap:26px; align-items:flex-start}
html.ab-home[data-abend] .ab-stack > *{margin:0!important}
html.ab-home[data-abend] .ab-actions{display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px}
html.ab-home[data-abend] .ab-lead{font-size:clamp(19px,1.5vw,21px); color:var(--muted); max-width:560px}
html.ab-home[data-abend] main p{color:var(--muted)}
html.ab-home[data-abend] .ab-sec{position:relative}
html.ab-home[data-abend] .ab-sec figure{margin:0}
html.ab-home[data-abend] .ab-sec img{display:block; max-width:100%}

/* Kopf mit Drohnenfilm */
html.ab-home[data-abend] .ab-hero{position:relative; height:max(680px,100svh); min-height:620px; overflow:hidden; color:#F7F6F2; background:#262A2E}
html.ab-home[data-abend] .ab-hero-film{position:absolute; inset:0; -webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 150px),transparent 100%); mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 150px),transparent 100%)}
html.ab-home[data-abend] .ab-hero{background:linear-gradient(180deg,#262A2E 0,#262A2E 70%,#F7F6F2 100%)}
html.ab-home[data-abend] .ab-hero-film :is(img,video){position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform-origin:60% 60%}
html.ab-home[data-abend] .ab-hero-film video{opacity:0; transition:opacity 1.2s var(--ease)}
html.ab-home[data-abend] .ab-hero-film video.is-playing{opacity:1}
html.ab-home[data-abend] .ab-hero-shade{position:absolute; inset:0; background:linear-gradient(180deg,rgba(38,42,46,.45) 0%,rgba(38,42,46,0) 22%),linear-gradient(90deg,rgba(38,42,46,.72) 0%,rgba(38,42,46,.25) 42%,rgba(38,42,46,0) 66%),linear-gradient(0deg,rgba(38,42,46,.75) 10%,rgba(38,42,46,0) 52%)}
html.ab-home[data-abend] .ab-hero-frame{position:absolute; top:150px; left:34px; right:34px; bottom:34px; border:1px solid rgba(247,246,242,.36); border-bottom:0; pointer-events:none}
html.ab-home[data-abend] .ab-film-toggle{position:absolute; z-index:4; right:var(--gut); top:168px; width:46px; height:46px; border-radius:50%; border:1px solid rgba(247,246,242,.45); background:rgba(38,42,46,.35); display:flex; align-items:center; justify-content:center; gap:4px; cursor:pointer; padding:0}
html.ab-home[data-abend] .ab-film-toggle i{display:block; width:3px; height:14px; background:#F7F6F2}
html.ab-home[data-abend] .ab-film-toggle[aria-pressed="true"] i:first-child{width:0; height:0; background:none; border-left:12px solid #F7F6F2; border-top:7px solid transparent; border-bottom:7px solid transparent}
html.ab-home[data-abend] .ab-film-toggle[aria-pressed="true"] i:last-child{display:none}
html.ab-home[data-abend] .ab-coord{position:absolute; z-index:3; left:46px; top:50%; translate:0 -50%; writing-mode:vertical-rl; transform:rotate(180deg); color:rgba(247,246,242,.85)!important; font:400 14px/1 var(--sans); letter-spacing:.16em; text-decoration:none!important}
html.ab-home[data-abend] .ab-hero-copy{position:absolute; z-index:3; left:clamp(64px,8vw,128px); right:var(--gut); bottom:clamp(170px,22vh,220px); display:flex; flex-direction:column; gap:22px; max-width:820px}
html.ab-home[data-abend] .ab-hero-copy > *{margin:0!important}
html.ab-home[data-abend] .ab-hero-kicker{font:400 15px/1.3 var(--sans)!important; letter-spacing:.04em!important; color:rgba(247,246,242,.9)!important}
html.ab-home[data-abend] .ab-hero h1{color:#F7F6F2!important; font-size:clamp(54px,min(8vw,12.5vh),124px)!important}
html.ab-home[data-abend] .ab-hero .ab-rot{font-style:italic; color:var(--gold)}
html.ab-home[data-abend] .ab-hero-lead{font-size:19px; color:rgba(247,246,242,.9)!important}
html.ab-home[data-abend] .ab-hero-actions{display:flex; flex-wrap:wrap; align-items:center; gap:26px}
html.ab-home[data-abend] .ab-hero-link{color:#F7F6F2!important; text-decoration:underline; text-underline-offset:7px; text-decoration-thickness:1px; font-weight:500}
html.ab-home[data-abend] .ab-hero-status{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; font-size:15px; color:rgba(247,246,242,.9)!important; padding:0!important; background:none!important; border:0!important}
html.ab-home[data-abend] .ab-hero-status strong{font-weight:600; color:#F7F6F2}
html.ab-home[data-abend] .ab-hero-status small{font-size:15px; color:rgba(247,246,242,.85)}
html.ab-home[data-abend] .ab-hero-status a{color:#F7F6F2!important}
html.ab-home[data-abend] .ab-hero-status .ab-pulse{width:8px; height:8px; border-radius:50%; background:var(--gold)}
html.ab-home[data-abend] .ab-ring{position:absolute; z-index:3; right:var(--gut); bottom:clamp(170px,22vh,220px); width:148px; height:148px; color:#F7F6F2; text-decoration:none!important}
html.ab-home[data-abend] .ab-ring > svg{position:absolute; inset:0; width:100%; height:100%; animation:abSpin 18s linear infinite}
html.ab-home[data-abend] .ab-ring:hover > svg{animation-duration:6s}
html.ab-home[data-abend] .ab-ring text{font:500 11.5px var(--sans); fill:#F7F6F2}
html.ab-home[data-abend] .ab-ring > span{position:absolute; left:50%; top:50%; translate:-50% -50%; width:52px; height:52px; border-radius:50%; background:#F7F6F2; color:var(--ink); display:flex; align-items:center; justify-content:center}
html.ab-home[data-abend] .ab-ring > span svg{width:20px; height:20px}
@keyframes abSpin{to{transform:rotate(360deg)}}

/* 16:00 Rundgang */
html.ab-home[data-abend] .ab-rundgang{padding:clamp(72px,9vw,140px) 0 clamp(72px,8vw,120px); background:#F7F6F2}
html.ab-home[data-abend] .ab-rundgang h2{font-size:clamp(44px,5.6vw,84px)!important}
html.ab-home[data-abend] .ab-rundgang .text-link{margin-top:6px!important}
html.ab-home[data-abend] .ab-rundgang-photos .visit-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin:0}
html.ab-home[data-abend] .visit-photo{all:unset; position:relative; display:block; cursor:zoom-in; border-radius:4px; overflow:hidden; background:var(--deep)}
html.ab-home[data-abend] .visit-photo:first-child{grid-column:1 / 3; aspect-ratio:4/3}
html.ab-home[data-abend] .visit-photo:not(:first-child){aspect-ratio:3/4}
html.ab-home[data-abend] .visit-photo:nth-child(3){margin-top:56px}
html.ab-home[data-abend] .visit-photo img{width:100%!important; height:100%!important; object-fit:cover; transition:transform 1.4s var(--ease)}
html.ab-home[data-abend] .visit-photo:hover img{transform:scale(1.04)}
html.ab-home[data-abend] .visit-photo .visit-label{position:absolute; left:0; right:0; bottom:0; padding:44px 18px 16px; background:linear-gradient(0deg,rgba(38,42,46,.78),rgba(38,42,46,0)); color:#F7F6F2; display:flex; flex-direction:column; gap:2px}
html.ab-home[data-abend] .visit-photo .visit-label b{font:400 22px/1.2 var(--serif)}
html.ab-home[data-abend] .visit-photo .visit-label small{font-size:14px; opacity:.88}
html.ab-home[data-abend] .visit-photo .photo-expand{position:absolute; right:12px; top:12px; width:36px; height:36px; border-radius:50%; background:rgba(247,246,242,.9); color:var(--ink); display:flex; align-items:center; justify-content:center; font-size:15px}
html.ab-home[data-abend] .visit-more{margin-top:56px; border-top:1px solid var(--line); padding-top:22px}
html.ab-home[data-abend] details > summary{cursor:pointer; list-style:none; font:400 clamp(21px,1.8vw,26px)/1.3 var(--serif)!important; background:none!important; border:0!important; padding:0!important; color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:20px; min-height:44px}
html.ab-home[data-abend] details > summary::-webkit-details-marker{display:none}
html.ab-home[data-abend] details > summary::after{content:'+'; font:300 26px var(--sans); transition:transform .4s var(--ease)}
html.ab-home[data-abend] details[open] > summary::after{transform:rotate(45deg)}
html.ab-home[data-abend] .place-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:28px; margin-top:28px}
html.ab-home[data-abend] .place-grid article{display:grid; grid-template-columns:150px minmax(0,1fr); gap:20px; align-items:center; background:none; padding:0; border:0}
html.ab-home[data-abend] .place-grid img{width:150px!important; height:150px!important; object-fit:cover; border-radius:4px}
html.ab-home[data-abend] .place-grid b{font:400 24px/1.2 var(--serif); color:var(--ink)}
html.ab-home[data-abend] .place-grid p{margin:6px 0 0; font-size:16px}

/* 17:00 Platz nehmen */
html.ab-home[data-abend] .ab-platz{background:linear-gradient(180deg,#F7F6F2 0%,#F7F6F2 25%,#EEE7DA 100%); padding:20px 0 clamp(80px,9vw,140px)}
html.ab-home[data-abend] .ab-platz > .ab-wrap:first-child{padding-bottom:40px}
html.ab-home[data-abend] .ab-open{position:relative; height:clamp(560px,62vw,900px); overflow:hidden}
html.ab-home[data-abend] .ab-open img{width:100%; height:100%; object-fit:cover}
html.ab-home[data-abend] .ab-open::after{content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(38,42,46,.62) 0%,rgba(38,42,46,.15) 55%,rgba(38,42,46,0) 100%)}
html.ab-home[data-abend] .ab-open-copy{position:absolute; z-index:1; left:var(--gut); bottom:18%; max-width:640px; display:flex; flex-direction:column; gap:20px}
html.ab-home[data-abend] .ab-open-copy > *{margin:0!important}
html.ab-home[data-abend] .ab-open-k{font:italic 400 20px var(--serif); color:var(--gold)!important}
html.ab-home[data-abend] .ab-open-copy h2{color:#F7F6F2!important; font-size:clamp(44px,5.4vw,84px)!important}
html.ab-home[data-abend] .ab-open-copy h2 em{color:var(--gold)!important}
html.ab-home[data-abend] .ab-open-copy p{color:rgba(247,246,242,.9)!important; max-width:460px}
html.ab-home[data-abend] .ab-favseat{margin-top:clamp(56px,7vw,100px); background:none!important; padding-top:0; padding-bottom:0; display:grid!important}
html.ab-home[data-abend] .ab-seat .seat-disclosure{border-top:1px solid var(--line-2); padding-top:18px; background:none!important; margin:0!important}
html.ab-home[data-abend] .ab-seat .seat-tabs{display:inline-flex; gap:6px; padding:5px; border-radius:999px; background:rgba(38,42,46,.06); margin:18px 0 10px}
html.ab-home[data-abend] .ab-seat .seat-tabs button{min-height:44px; padding:0 20px; border-radius:999px; border:0; background:transparent; color:var(--ink); font:500 15px var(--sans); cursor:pointer}
html.ab-home[data-abend] .ab-seat .seat-tabs button[aria-pressed="true"]{background:var(--ink); color:#F7F6F2}
html.ab-home[data-abend] .ab-seat .mini-plan{background:var(--card)!important; border:1px solid var(--line)!important; border-radius:6px!important; padding:18px!important; box-shadow:none!important}

/* 18:30 Küche */
html.ab-home[data-abend] .ab-kueche{background:linear-gradient(180deg,#EEE7DA 0%,#E9DCC6 100%); padding:clamp(80px,9vw,140px) 0}
html.ab-home[data-abend] .ab-kitchen-hours{border-top:1px solid var(--line-2); padding-top:18px; font-size:16px}
html.ab-home[data-abend] .ab-kitchen-hours strong{display:block; color:var(--ink); font-weight:600; margin-bottom:4px}
html.ab-home[data-abend] .ab-kitchen-hours p{margin:0; color:var(--muted)}
html.ab-home[data-abend] .ab-kitchen-hours .kitchen{background:none!important; padding:0!important; border:0!important; margin:0!important}
html.ab-home[data-abend] .ab-mosaic{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); grid-template-rows:280px 220px 260px; gap:18px}
html.ab-home[data-abend] .ab-mosaic figure{overflow:hidden; border-radius:4px}
html.ab-home[data-abend] .ab-mosaic img{width:100%; height:100%; object-fit:cover}
html.ab-home[data-abend] .ab-m1{grid-column:1 / 6; grid-row:1 / 3}
html.ab-home[data-abend] .ab-m2{grid-column:3 / 7; grid-row:2 / 4; box-shadow:0 30px 60px -36px rgba(60,40,20,.55)}

/* 19:30 Feiern */
html.ab-home[data-abend] .ab-feiern{background:linear-gradient(180deg,#E9DCC6 0%,#DFBE93 100%); padding:clamp(80px,9vw,140px) 0; overflow:hidden}
html.ab-home[data-abend] .ab-feiern h2{font-size:clamp(44px,5vw,76px)!important}
html.ab-home[data-abend] .ab-feiern p{color:#3D3226}
html.ab-home[data-abend] .ab-occs{display:flex; flex-direction:column; width:100%}
html.ab-home[data-abend] .ab-occ{display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:16px 0; border-top:1px solid rgba(38,42,46,.28); color:var(--ink)!important; text-decoration:none!important}
html.ab-home[data-abend] .ab-occ:last-child{border-bottom:1px solid rgba(38,42,46,.28)}
html.ab-home[data-abend] .ab-occ span{font:400 clamp(30px,3vw,42px)/1.15 var(--serif)!important; transition:transform .5s var(--ease), color .3s}
html.ab-home[data-abend] .ab-occ i{font-style:normal; color:var(--cognac); opacity:0; transform:translateX(-10px); transition:all .5s var(--ease)}
html.ab-home[data-abend] .ab-occ:hover span{transform:translateX(10px); color:var(--cognac-d)}
html.ab-home[data-abend] .ab-occ:hover i{opacity:1; transform:none}
html.ab-home[data-abend] .ab-depth{position:relative; height:clamp(460px,52vw,720px); perspective:1400px}
html.ab-home[data-abend] .ab-depth img{position:absolute; object-fit:cover; border-radius:4px; transition:transform 1.6s var(--ease),opacity 1.6s var(--ease)}
html.ab-home[data-abend] .ab-d1{left:0; top:4%; width:40%; aspect-ratio:3/4; opacity:.55}
html.ab-home[data-abend] .ab-d2{right:0; top:0; width:46%; aspect-ratio:4/3; opacity:.7}
html.ab-home[data-abend] .ab-d3{right:4%; bottom:0; width:34%; aspect-ratio:3/4; opacity:.8}
html.ab-home[data-abend] .ab-d4{left:12%; top:22%; width:62%; aspect-ratio:4/3; box-shadow:0 44px 90px -34px rgba(70,40,15,.6); z-index:2}
html.ab-js.ab-home[data-abend] .ab-depth:not(.is-in) img{transform:translateZ(-520px); opacity:0}
html.ab-js.ab-home[data-abend] .ab-depth.is-in img{transform:none}
html.ab-js.ab-home[data-abend] .ab-depth.is-in .ab-d1{opacity:.55; transition-delay:.0s}
html.ab-js.ab-home[data-abend] .ab-depth.is-in .ab-d2{opacity:.7; transition-delay:.15s}
html.ab-js.ab-home[data-abend] .ab-depth.is-in .ab-d3{opacity:.8; transition-delay:.3s}
html.ab-js.ab-home[data-abend] .ab-depth.is-in .ab-d4{opacity:1; transition-delay:.45s}

/* 21:00 Süßes */
html.ab-home[data-abend] .ab-suess{background:linear-gradient(180deg,#DFBE93 0%,#C48A62 100%); padding:clamp(80px,9vw,140px) 0 clamp(110px,11vw,180px)}
html.ab-home[data-abend] .ab-suess .ab-split{align-items:center}
html.ab-home[data-abend] .ab-suess p{color:#2E2219!important}
html.ab-home[data-abend] .ab-suess .ab-zeit{color:#2E2219!important}
html.ab-home[data-abend] .ab-suess .ab-hour{color:#2E2219!important}
html.ab-home[data-abend] .ab-suess-img{aspect-ratio:3/2; border-radius:4px; overflow:hidden}
html.ab-home[data-abend] .ab-suess-img img{width:100%; height:100%; object-fit:cover}
html.ab-home[data-abend] .ab-suess h2 em{color:#5A2C10!important}

/* 22:00 Hafenbar: die einzige dunkle Strecke */
html.ab-home[data-abend] .ab-nacht{--fg:#F7F6F2; --em:var(--gold); --muted:rgba(247,246,242,.8); --line:rgba(247,246,242,.16); --line-2:rgba(247,246,242,.3);
  background:linear-gradient(180deg,#C48A62 0%,#7A4E36 6%,#3A3A33 11%,#262A2E 17%,#262A2E 100%); color:#F7F6F2; padding:clamp(160px,16vw,240px) 0 0; overflow:hidden}
html.ab-home[data-abend] .ab-nacht :is(h2,h3){color:#F7F6F2!important}
html.ab-home[data-abend] .ab-nacht p{color:rgba(247,246,242,.82)!important}
html.ab-home[data-abend] .ab-nacht .ab-zeit{color:rgba(247,246,242,.85)!important}
html.ab-home[data-abend] .ab-nacht .eyebrow{color:var(--gold)!important}
html.ab-home[data-abend] .ab-nacht .text-link{color:#F7F6F2!important}
html.ab-home[data-abend] .ab-nacht-head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:32px; padding-bottom:56px; position:relative; z-index:1}
html.ab-home[data-abend] .ab-nacht-head h2{font-size:clamp(48px,5.8vw,92px)!important}
html.ab-home[data-abend] .ab-nacht-head > p{max-width:380px; margin:0}
html.ab-home[data-abend] .ab-nacht-head > p b{color:#F7F6F2; font-weight:600}
html.ab-home[data-abend] .ab-bar{position:relative; height:clamp(520px,58vw,860px); overflow:hidden}
html.ab-home[data-abend] .ab-bar img{width:100%; height:100%; object-fit:cover}
html.ab-home[data-abend] .ab-bar-cta{display:flex; justify-content:flex-end; margin-top:-96px; position:relative; z-index:2}
html.ab-home[data-abend] .ab-bar-btn{background:var(--gold)!important; color:var(--ink)!important}
html.ab-home[data-abend] .ab-nacht .ab-hoststory{padding-top:clamp(80px,9vw,140px); padding-bottom:clamp(60px,7vw,100px); align-items:center; background:none!important}
html.ab-home[data-abend] .ab-host-img{border-radius:4px; overflow:hidden}
html.ab-home[data-abend] .ab-host-img img{aspect-ratio:4/5; width:100%; object-fit:cover}
html.ab-home[data-abend] .ab-host-img figcaption{font-size:14px; color:rgba(247,246,242,.7); padding-top:10px}
html.ab-home[data-abend] .ab-proof{border-top:1px solid rgba(247,246,242,.14); padding:56px 0 64px}
html.ab-home[data-abend] .ab-proof-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 28px; margin-bottom:34px}
html.ab-home[data-abend] .ab-proof-head > *{margin:0}
html.ab-home[data-abend] .ab-proof-rating{font:400 48px/1 var(--serif)!important; color:var(--gold)!important}
html.ab-home[data-abend] .ab-proof-date{font-size:15px}
html.ab-home[data-abend] .ab-proof-head a{margin-left:auto}
html.ab-home[data-abend] .ab-proof-track{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
html.ab-home[data-abend] .ab-proof figure{margin:0; display:flex; align-items:baseline; gap:18px; white-space:nowrap}
html.ab-home[data-abend] .ab-proof blockquote{margin:0; font:italic 400 clamp(28px,3vw,42px)/1.2 var(--serif); color:#F7F6F2}
html.ab-home[data-abend] .ab-proof figcaption{font-size:14px; color:rgba(247,246,242,.6)}
html.ab-home[data-abend] .ab-proof-note{font-size:14px; margin-top:22px!important}

/* Bis bald: Öffnungszeiten und Gutscheine */
html.ab-home[data-abend] .ab-bisbald{background:linear-gradient(180deg,#262A2E 0%,#F7F6F2 280px,#F7F6F2 100%); padding:300px 0 clamp(80px,9vw,140px)}
html.ab-home[data-abend] .ab-hours dl{margin:0; display:flex; flex-direction:column; width:100%}
html.ab-home[data-abend] .ab-hours dl > div{display:flex; justify-content:space-between; gap:20px; padding:16px 0; border-top:1px solid var(--line); background:none!important}
html.ab-home[data-abend] .ab-hours dl > div:last-child{border-bottom:1px solid var(--line)}
html.ab-home[data-abend] .ab-hours dt{font-weight:500; color:var(--ink)}
html.ab-home[data-abend] .ab-hours dd{margin:0; text-align:right; color:var(--ink)}
html.ab-home[data-abend] .ab-hours .closure-list{background:none!important; border:0!important; padding:0!important; width:100%}
html.ab-home[data-abend] .ab-hours .closure-list h3{font-size:22px!important; margin:0 0 8px!important}
html.ab-home[data-abend] .ab-hours .closure-list p{margin:4px 0; font-size:16px}
html.ab-home[data-abend] .ab-gift{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:clamp(36px,6vw,96px); align-items:center; margin-top:clamp(80px,9vw,140px); background:none!important; padding-top:0; padding-bottom:0}
html.ab-home[data-abend] .ab-gift-img{border-radius:4px; overflow:hidden; margin:0}
html.ab-home[data-abend] .ab-gift-img img{aspect-ratio:3/4; width:100%; object-fit:cover}
html.ab-home[data-abend] .gift-ideas{width:100%; border-top:1px solid var(--line-2); padding-top:14px}
html.ab-home[data-abend] .gift-options{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr)); gap:12px; margin-top:16px}
html.ab-home[data-abend] .gift-options button{display:flex; flex-direction:column; align-items:flex-start; gap:6px; text-align:left; min-height:96px; padding:18px; border-radius:6px; border:1px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer; transition:transform .4s var(--ease),border-color .3s}
html.ab-home[data-abend] .gift-options button:hover, html.ab-home[data-abend] .gift-options button[aria-pressed="true"]{transform:translateY(-2px); border-color:var(--cognac)}
html.ab-home[data-abend] .gift-options b{font:400 21px/1.2 var(--serif)}
html.ab-home[data-abend] .gift-options span{font-size:14px; color:var(--muted)}
html.ab-home[data-abend] #gift-choice{font-size:15px; margin:14px 0 0}
html.ab-home[data-abend] #gift-link{display:inline-flex; align-items:center; min-height:54px; padding:0 28px; border-radius:999px; background:var(--cognac)!important; color:#FFF9F2!important; font:600 16px var(--sans)!important; text-decoration:none!important}
html.ab-home[data-abend] .ab-gift-brand{display:flex; align-items:center; gap:18px; text-decoration:none!important; color:var(--muted)!important; font-size:15px}
html.ab-home[data-abend] .ab-gift-brand img{width:130px; height:65px; object-fit:contain}

/* Chevy zum Abschied */
html.ab-home[data-abend] .ab-chevy{position:relative; height:clamp(560px,62vw,900px); overflow:hidden; background:#262A2E}
html.ab-home[data-abend] .ab-chevy img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:55% 62%}
html.ab-home[data-abend] .ab-chevy::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg,#F7F6F2 0%,rgba(247,246,242,0) 20%,rgba(38,42,46,0) 46%,rgba(38,42,46,.62) 78%,#262A2E 100%)}
html.ab-home[data-abend] .ab-chevy-copy{position:absolute; z-index:1; left:var(--gut); right:var(--gut); bottom:64px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:22px}
html.ab-home[data-abend] .ab-chevy-copy p{margin:0; color:rgba(247,246,242,.86)!important; max-width:380px}
html.ab-home[data-abend] .ab-chevy-copy .ab-chevy-h{font:400 clamp(36px,4vw,60px)/1.08 var(--serif)!important; color:#F7F6F2!important; max-width:720px}
html.ab-home[data-abend] .ab-fuss{--fuss-von:#262A2E}
html.ab-home[data-abend] .ab-fuss::before{height:40px}

@media (max-width:980px){
  html.ab-home[data-abend] .ab-split, html.ab-home[data-abend] .ab-split-7-5, html.ab-home[data-abend] .ab-split-5-7, html.ab-home[data-abend] .ab-split-6-6, html.ab-home[data-abend] .ab-gift{grid-template-columns:minmax(0,1fr)}
  html.ab-home[data-abend] .ab-coord, html.ab-home[data-abend] .ab-ring{display:none}
  html.ab-home[data-abend] .ab-hero-frame{top:108px; left:14px; right:14px; bottom:120px}
  html.ab-home[data-abend] .ab-film-toggle{top:124px; right:24px}
  html.ab-home[data-abend] .ab-hero-copy{left:24px; right:24px; bottom:120px}
  html.ab-home[data-abend] .ab-hero h1{font-size:clamp(46px,13vw,64px)!important}
  html.ab-home[data-abend] .ab-hero-actions .button{display:none!important}
  html.ab-home[data-abend] .ab-mosaic{grid-template-rows:200px 160px 200px; gap:12px}
  html.ab-home[data-abend] .ab-depth{height:420px}
  html.ab-home[data-abend] .ab-bar-cta{justify-content:flex-start; margin-top:8px}
  html.ab-home[data-abend] .ab-open::after{background:linear-gradient(180deg,rgba(38,42,46,0) 30%,rgba(38,42,46,.78) 78%,rgba(38,42,46,.55) 100%)}
  html.ab-home[data-abend] .ab-bar{height:auto} html.ab-home[data-abend] .ab-bar img{height:440px}
  html.ab-home[data-abend] .place-grid article{grid-template-columns:110px minmax(0,1fr)}
  html.ab-home[data-abend] .place-grid img{width:110px!important; height:110px!important}
  html.ab-home[data-abend] .ab-proof-head a{margin-left:0}
  html.ab-home[data-abend] .ab-open-copy{bottom:14%}
  html.ab-home[data-abend] .ab-gift-img img{aspect-ratio:4/3}
}

html.ab-home[data-abend] .seat-copy{text-align:left!important; color:var(--ink)!important; align-items:flex-start!important}
html.ab-home[data-abend] .seat-copy p{color:var(--muted)!important}

html[data-abend] .ab-fuss > div{box-sizing:content-box!important}

/* Fußbereich: Begleittext des Abschlusses */
html[data-abend] .ab-fuss .ab-fuss-text{margin:0!important; max-width:560px; font-size:17px!important; color:rgba(247,246,242,.8)!important}

/* Keine harten Farbbänder: Flächen gehen in den Seitengrund über */
html[data-abend] main :is(.pm-tone,.career-pay,.equipment-band,.qf-section,.se-planner,.sm-day,.sm-arrive){background:transparent!important; background-image:none!important}
html[data-abend] main :is(.pm-region,.career-contact){
  --fg:#F7F6F2; --fg-soft:rgba(247,246,242,.8); --em:var(--gold);
  background:#262A2E!important; color:#F7F6F2!important; border-radius:18px; margin:clamp(40px,6vw,96px) var(--gut)!important; overflow:hidden}
html[data-abend] main :is(.pm-region,.career-contact) :is(p,li,span,small,b,strong,dt,dd){color:rgba(247,246,242,.86)!important}
html[data-abend] main :is(.pm-region,.career-contact) :is(h2,h3){color:#F7F6F2!important}
html[data-abend] main :is(.pm-region,.career-contact) a:not(.button){color:#F7F6F2!important}
html[data-abend] main .sm-cine-frame{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%); border-radius:0!important}

/* Hafenbar-Kopf: Schrift hell auf dem Abendbild */
html[data-abend] main .se-hero :is(h1,h1 *){color:#F7F6F2!important}
html[data-abend] main .se-hero h1{font-size:clamp(48px,6.4vw,104px)!important; line-height:1!important}
html[data-abend] main .se-hero h1 em{color:var(--gold)!important}
html[data-abend] main .se-hero :is(#se-location,#se-subtitle,p){color:rgba(247,246,242,.9)!important}
html[data-abend] main .se-hero .ab-zeit, html[data-abend] main .se-hero #se-kicker{color:rgba(247,246,242,.9)!important; font:400 15px/1.3 var(--sans)!important}
html[data-abend] main .se-hero .ab-zeit .ab-hour{color:var(--gold)!important}
html[data-abend] main .se-hero .se-primary{background:var(--gold)!important; color:var(--ink)!important}
html[data-abend] main .se-site :is(article,.price-card,[class*="package"]) :is(h2,h3){font-size:clamp(24px,2.1vw,32px)!important; line-height:1.15!important}

/* Dunkle Flächen innerhalb heller Seiten */
html[data-abend] main .ab-dunkel{--fg:#F7F6F2; --fg-soft:rgba(247,246,242,.8); --em:var(--gold)}
html[data-abend] main .ab-dunkel :is(h1,h2,h3,h4,strong,b):not(a *,button *){color:#F7F6F2!important}
html[data-abend] main .ab-dunkel :is(p,li,span,small,dd,dt,label):not(a *,button *,input,select,textarea){color:rgba(247,246,242,.86)}
html[data-abend] main .ab-dunkel :is(.eyebrow,[class$="-kicker"]){color:var(--gold)!important}
html[data-abend] main .ab-dunkel .ab-hell :is(h1,h2,h3,h4,strong,b,p,li,span,small,dd,dt,label){color:var(--ink)!important}
html.ab-home[data-abend] .ab-strong{color:var(--ink); font-weight:600}

/* Fußbereich am Handy: zwei ruhige Spalten statt einer langen Liste */
@media (max-width:620px){
  html[data-abend] .ab-fuss-grid{grid-template-columns:1fr 1fr; gap:32px 20px; padding-top:48px}
  html[data-abend] .ab-fuss-grid > div:nth-child(1),
  html[data-abend] .ab-fuss-grid > div:nth-child(2){grid-column:1 / -1}
  html[data-abend] .ab-fuss-grid img{width:118px; height:100px}
  html[data-abend] .ab-fuss-grid a{padding:5px 0}
}

/* Galerie: redaktioneller, versetzter Bildfluss statt gleichförmigem Raster */
html[data-abend] .gallery-page .photo-story{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(18px,2.4vw,36px); align-items:start; margin-top:clamp(48px,6vw,96px); columns:auto}
html[data-abend] .gallery-page .photo-story figure{margin:0; grid-column:1 / -1; break-inside:auto}
html[data-abend] .gallery-page .photo-story figure img{width:100%; height:100%; object-fit:cover; display:block; border-radius:18px; aspect-ratio:4/5; transition:transform 1.2s cubic-bezier(.2,.7,.1,1), filter .6s; filter:saturate(.96)}
html[data-abend] .gallery-page .photo-story figure{overflow:visible}
html[data-abend] .gallery-page .photo-story figure:hover img{filter:saturate(1.06)}
html[data-abend] .gallery-page .photo-story figcaption{font-family:"Playfair Display",Georgia,serif!important; font-style:italic; font-size:17px!important; color:var(--muted); margin-top:12px; padding-left:2px}
html[data-abend] .gallery-page .photo-story figcaption::before{content:""; display:inline-block; width:22px; height:1px; background:var(--cognac); vertical-align:middle; margin-right:10px; opacity:.7}
@media (min-width:761px){
  html[data-abend] .gallery-page .photo-story > figure:nth-of-type(1){grid-column:1 / -1}
  html[data-abend] .gallery-page .photo-story > figure:nth-of-type(1) img{aspect-ratio:21/9}
  html[data-abend] .gallery-page .photo-story > figure:nth-of-type(2){grid-column:1 / 8}
  html[data-abend] .gallery-page .photo-story > figure:nth-of-type(2) img{aspect-ratio:4/3}
  html[data-abend] .gallery-page .photo-story > figure:nth-of-type(3){grid-column:8 / 13; margin-top:clamp(40px,8vw,120px)}
  html[data-abend] .gallery-page .photo-story > figure:nth-of-type(4){grid-column:2 / 7}
  html[data-abend] .gallery-page .photo-story > figure:nth-of-type(5){grid-column:7 / 13; margin-top:clamp(30px,5vw,80px)}
  html[data-abend] .gallery-page .photo-story > figure:nth-of-type(5) img{aspect-ratio:3/4}
  html[data-abend] .gallery-page .photo-story > figure:nth-of-type(6){grid-column:3 / 11; margin-top:clamp(16px,3vw,48px)}
  html[data-abend] .gallery-page .photo-story > figure:nth-of-type(6) img{aspect-ratio:16/10}
}
@media (max-width:760px){
  html[data-abend] .gallery-page .photo-story > figure:nth-of-type(odd){grid-column:1 / 12}
  html[data-abend] .gallery-page .photo-story > figure:nth-of-type(even){grid-column:2 / -1}
  html[data-abend] .gallery-page .photo-story > figure:nth-of-type(1){grid-column:1 / -1}
  html[data-abend] .gallery-page .photo-story > figure:nth-of-type(1) img{aspect-ratio:4/3}
}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    html[data-abend] .gallery-page .photo-story figure{animation:abGalIn linear both; animation-timeline:view(); animation-range:entry 0% cover 30%}
    @keyframes abGalIn{from{opacity:0; transform:translateY(48px) scale(.97)} to{opacity:1; transform:none}}
  }
}
html[data-abend] .gallery-page .photo-story figure,
html[data-abend] .gallery-page .photo-story .photo-wide,
html[data-abend] .gallery-page .photo-story .photo-tall{min-height:0!important; background:none!important; position:relative}
html[data-abend] .gallery-page .photo-story figure img{height:auto}
html[data-abend] .gallery-page .photo-story figure:hover img{transform:none}
html[data-abend] .gallery-page .photo-story figcaption{position:static!important; padding:0!important; background:none!important; letter-spacing:0!important; text-transform:none!important; font-weight:400!important}

/* Startseite: Drinnen / Terrasse als zwei Bildkarten statt Tischplan */
html.ab-home[data-abend] .ab-seatpick{display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,1.6vw,22px); align-items:start}
html.ab-home[data-abend] .ab-seatcard{position:relative; display:block; border-radius:18px; overflow:hidden; text-decoration:none!important; color:#F7F6F2; aspect-ratio:3/4; isolation:isolate; box-shadow:0 30px 60px -40px rgba(40,30,20,.55)}
html.ab-home[data-abend] .ab-seatcard:nth-child(2){margin-top:clamp(28px,5vw,72px)}
html.ab-home[data-abend] .ab-seatcard img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.1s cubic-bezier(.2,.7,.1,1)}
html.ab-home[data-abend] .ab-seatcard:hover img{transform:scale(1.04)}
html.ab-home[data-abend] .ab-seatcard::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(24,26,29,.78)); z-index:1}
html.ab-home[data-abend] .ab-seatcard span{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:clamp(14px,2vw,22px); display:grid; gap:4px; font-size:14px!important; line-height:1.35; color:rgba(247,246,242,.88)}
html.ab-home[data-abend] .ab-seatcard b{font:400 clamp(22px,2.4vw,30px)/1.1 "Playfair Display",Georgia,serif!important; color:#F7F6F2}
@media (max-width:760px){
  html.ab-home[data-abend] .ab-favseat{gap:26px!important}
  html.ab-home[data-abend] .ab-seatpick{order:2}
}

/* ===== Szene: filmischer Seiteneinstieg der Unterseiten ===== */
html.ab-szene-seite[data-abend] main{padding-top:0!important; margin-top:0!important}
html.ab-szene-seite[data-abend] .ab-szene{position:relative; isolation:isolate; overflow:hidden; color:#F7F6F2; background:#262A2E; margin:0!important; padding:0 0 clamp(96px,12vw,170px); max-width:none!important; width:auto!important}
html.ab-szene-seite[data-abend] .ab-szene::before{content:""; position:absolute; inset:-80px; z-index:-2; background:var(--szene) center/cover no-repeat; filter:blur(56px) saturate(1.25); opacity:.42; transform:scale(1.1)}
html.ab-szene-seite[data-abend] .ab-szene::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(120% 70% at 0% 0%,rgba(38,42,46,.25),rgba(38,42,46,.78) 70%),linear-gradient(180deg,rgba(38,42,46,0) 0%,rgba(38,42,46,0) 62%,var(--bg,#F7F6F2) 100%)}
html.ab-szene-seite[data-abend] .ab-szene-bild{position:relative; overflow:hidden; margin:0; background:none!important; min-height:0!important}
html.ab-szene-seite[data-abend] .ab-szene-bild img{display:block; width:100%; height:100%; object-fit:cover; max-width:none; border-radius:0; transform-origin:50% 40%}
html.ab-szene-seite[data-abend] .ab-szene-shade{position:absolute; inset:0; pointer-events:none}
html.ab-szene-seite[data-abend] .ab-szene-text{position:relative; z-index:2; display:grid; gap:24px}
html.ab-szene-seite[data-abend] .ab-szene-kopf{display:grid; gap:16px}
html.ab-szene-seite[data-abend] .ab-szene-kopf > *, html.ab-szene-seite[data-abend] .ab-szene-rest > *{margin:0!important}
html.ab-szene-seite[data-abend] .ab-szene h1{color:#F7F6F2!important; font-size:clamp(44px,5.4vw,84px)!important; line-height:1.02!important; letter-spacing:-.01em; max-width:14ch; text-wrap:balance}
html.ab-szene-seite[data-abend] .ab-szene h1 em{color:var(--gold)!important}
html.ab-szene-seite[data-abend] .ab-szene .ab-zeit, html.ab-szene-seite[data-abend] .ab-szene .eyebrow{color:#E8C895!important}
html.ab-szene-seite[data-abend] .ab-szene .ab-hour{color:var(--gold)!important}
html.ab-szene-seite[data-abend] .ab-szene-rest{display:grid; gap:22px; max-width:560px}
html.ab-szene-seite[data-abend] .ab-szene-rest p{color:rgba(247,246,242,.84)!important; font-size:18px!important; line-height:1.6}
html.ab-szene-seite[data-abend] .ab-szene-rest .actions{display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center}
html.ab-szene-seite[data-abend] .ab-szene .button.ghost, html.ab-szene-seite[data-abend] .ab-szene .button.dark-button{background:transparent!important; color:#F7F6F2!important; border:1px solid rgba(247,246,242,.45)!important}
html.ab-szene-seite[data-abend] .ab-szene .text-link{color:#F7F6F2!important; text-decoration-color:rgba(243,196,126,.7)!important}
html.ab-szene-seite[data-abend] .ab-szene .pm-at-a-glance{display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin-top:8px!important; border-top:1px solid rgba(247,246,242,.18); background:none!important; padding:0!important}
html.ab-szene-seite[data-abend] .ab-szene .pm-at-a-glance span{display:grid; gap:2px; padding:16px 14px 0 0; background:none!important; border:0!important; border-radius:0!important; box-shadow:none!important; color:rgba(247,246,242,.7)!important; font-size:14px!important}
html.ab-szene-seite[data-abend] .ab-szene .pm-at-a-glance span + span{padding-left:14px; border-left:1px solid rgba(247,246,242,.14)!important}
html.ab-szene-seite[data-abend] .ab-szene .pm-at-a-glance b{color:#F7F6F2; font-weight:500; font-size:15px}
html.ab-szene-seite[data-abend] .ab-szene .fe-location, html.ab-szene-seite[data-abend] .ab-szene .career-note, html.ab-szene-seite[data-abend] .ab-szene-cap{font-size:15px!important; color:rgba(247,246,242,.62)!important}
html.ab-szene-seite[data-abend] .ab-szene-cap{font-family:"Playfair Display",Georgia,serif!important; font-style:italic}

/* Handy zuerst: Foto randlos oben, blendet in die Szene aus */
@media (max-width:899px){
  html.ab-szene-seite[data-abend] .ab-szene-bild{height:clamp(380px,66svh,620px); margin:0 0 -110px; -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 58%,transparent 100%); mask-image:linear-gradient(180deg,#000 0%,#000 58%,transparent 100%)}
  html.ab-szene-seite[data-abend] .ab-szene-shade{background:linear-gradient(180deg,rgba(24,26,29,.55) 0%,rgba(24,26,29,0) 26%)}
  html.ab-szene-seite[data-abend] .ab-szene-text{padding:0 var(--gut,20px)}
  html.ab-szene-seite[data-abend] .ab-szene h1{font-size:clamp(40px,11vw,58px)!important}
  html.ab-szene-seite[data-abend] .ab-szene-rest p{font-size:17px!important}
  html.ab-szene-seite[data-abend] .ab-szene .pm-at-a-glance span{padding-right:8px}
  html.ab-szene-seite[data-abend] .ab-szene .pm-at-a-glance span + span{padding-left:10px}
}
/* Rechner: Text links, Foto als hohes Bild rechts, Licht der Szene aus dem Foto */
@media (min-width:900px){
  html.ab-szene-seite[data-abend] .ab-szene{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1248px) minmax(0,1fr); padding-top:clamp(150px,17vh,190px)}
  html.ab-szene-seite[data-abend] .ab-szene > *{grid-row:1}
  html.ab-szene-seite[data-abend] .ab-szene-text{grid-column:2; padding:0 var(--gut,40px); width:58%; align-self:center; padding-bottom:40px}
  html.ab-szene-seite[data-abend] .ab-szene-bild{grid-column:2; justify-self:end; width:min(38%,500px); margin-right:var(--gut,40px); aspect-ratio:3/4; border-radius:22px; box-shadow:0 60px 120px -50px rgba(0,0,0,.65), 0 0 0 1px rgba(247,246,242,.08)}
  html.ab-szene-seite[data-abend] .ab-szene-bild::after{content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); pointer-events:none}
}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    html.ab-szene-seite[data-abend] .ab-szene-bild img{animation:abSzeneZoom linear both; animation-timeline:scroll(root); animation-range:0 80vh}
    html.ab-szene-seite[data-abend] .ab-szene-text{animation:abSzeneText linear both; animation-timeline:scroll(root); animation-range:0 70vh}
    @keyframes abSzeneZoom{from{transform:scale(1.02)} to{transform:scale(1.14) translateY(3%)}}
    @keyframes abSzeneText{from{transform:none} to{transform:translateY(-28px)}}
  }
}
@media (prefers-reduced-motion:no-preference){
  html.ab-szene-seite[data-abend] .ab-szene-kopf > *{animation:abSzeneIn 1.1s cubic-bezier(.2,.7,.1,1) both}
  html.ab-szene-seite[data-abend] .ab-szene-kopf > h1{animation-delay:.12s}
  html.ab-szene-seite[data-abend] .ab-szene-rest{animation:abSzeneIn 1.1s .28s cubic-bezier(.2,.7,.1,1) both}
  @keyframes abSzeneIn{from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none}}
}

/* Alte Regeln tauschen das Header-Logo per content:url() gegen die dunkle Fassung:
   in der Abend-Gestaltung zeigt jedes Bild wieder seine eigene Datei. */
html[data-abend] body .site-header a.brand > img, html[data-abend] body .ab-kopf .brand img{content:normal!important}
html[data-abend] body footer img, html[data-abend] body .ab-fuss img{content:normal!important}
html.ab-szene-seite[data-abend] .ab-szene .ab-szene-nav{display:flex!important; flex-wrap:wrap; align-items:center; gap:6px 22px; padding:18px 0 0!important; margin:6px 0 0!important; border:0!important; border-top:1px solid rgba(247,246,242,.16)!important; background:none!important; position:static!important}
html.ab-szene-seite[data-abend] .ab-szene .ab-szene-nav > div{display:flex; flex-wrap:wrap; gap:6px 22px}
html.ab-szene-seite[data-abend] .ab-szene .ab-szene-nav a{min-height:44px; display:inline-flex; align-items:center; color:rgba(247,246,242,.78)!important; font-size:15px!important; text-decoration:none}
html.ab-szene-seite[data-abend] .ab-szene .ab-szene-nav > a{font-family:"Playfair Display",Georgia,serif!important; font-style:italic; color:#E8C895!important}
html.ab-szene-seite[data-abend] .ab-szene .ab-szene-nav a[aria-current="page"]{color:#F7F6F2!important; text-decoration:underline; text-underline-offset:7px; text-decoration-color:var(--gold)}
html.ab-szene-seite[data-abend] .ab-szene .actions{justify-content:flex-start!important; text-align:left!important}
html.ab-szene-seite[data-abend] .ab-szene .actions .button{margin:0!important}

/* ===== Szenen-Bühne für die interaktiven Einstiege ===== */
/* Hafenbar: Bild läuft unter dem Kopf durch, weicher Ausklang */
html.ab-szene-se[data-abend] main .se-hero{min-height:max(640px,100svh)!important; padding-top:clamp(104px,13vh,130px); -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 86%,transparent 100%); mask-image:linear-gradient(180deg,#000 0%,#000 86%,transparent 100%)}
html.ab-szene-se[data-abend] main .se-hero .se-hero-top{flex-wrap:wrap; align-items:center; padding-top:0!important; min-height:0!important}
html.ab-szene-se[data-abend] main .se-hero .se-hero-top > span{max-width:none!important; font:italic 400 17px/1.3 "Playfair Display",Georgia,serif!important; letter-spacing:0!important; text-transform:none!important; color:#E8C895!important}
html.ab-szene-se[data-abend] main .se-hero #se-motion{min-height:40px; border-radius:999px!important; font-size:14px!important; background:rgba(24,26,29,.5)!important; color:#F7F6F2!important}
html.ab-szene-se[data-abend] main .se-hero .se-headline{padding-top:clamp(18px,4vh,48px)!important}
html.ab-szene-se[data-abend] main .se-hero .se-camera-floor{bottom:clamp(40px,7vh,72px)!important}
@media (max-width:760px){
  html.ab-szene-se[data-abend] main .se-hero .se-hero-top{gap:10px 14px}
  html.ab-szene-se[data-abend] main .se-hero #se-motion{order:2; font-size:13px!important; min-height:36px; padding:6px 12px!important}
  html.ab-szene-se[data-abend] main .se-hero .se-hero-top > span{font-size:15px!important; width:100%}
}

/* Über uns und Pâtisserie: dunkle Abendbühne mit Licht aus dem Foto */
html.ab-szene-sf[data-abend] main .sf-page, html.ab-szene-pp[data-abend] main #patisserie{padding-top:0!important; margin-top:0!important; background:transparent!important}
html.ab-szene-sf[data-abend] main .sf-dining-stage, html.ab-szene-pp[data-abend] main .pp-hero{position:relative; isolation:isolate; overflow:hidden; background:#262A2E!important; color:#F7F6F2; max-width:none!important; width:auto!important; margin:0!important; border-radius:0!important}
html.ab-szene-sf[data-abend] main .sf-dining-stage::before, html.ab-szene-pp[data-abend] main .pp-hero::before{content:""; position:absolute; inset:-80px; z-index:-2; background:var(--szene) center/cover no-repeat; filter:blur(56px) saturate(1.25); opacity:.42; transform:scale(1.1)}
html.ab-szene-sf[data-abend] main .sf-dining-stage::after, html.ab-szene-pp[data-abend] main .pp-hero::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(120% 70% at 0% 0%,rgba(38,42,46,.25),rgba(38,42,46,.78) 70%),linear-gradient(180deg,rgba(38,42,46,0) 0%,rgba(38,42,46,0) 62%,var(--bg,#F7F6F2) 100%)}
html.ab-szene-sf[data-abend] main .sf-dining-stage :is(h1,h1 *), html.ab-szene-pp[data-abend] main .pp-hero :is(h1,h1 *){color:#F7F6F2!important}
html.ab-szene-sf[data-abend] main .sf-dining-stage h1, html.ab-szene-pp[data-abend] main .pp-hero h1{font-size:clamp(44px,5.4vw,84px)!important; line-height:1.02!important; text-wrap:balance}
html.ab-szene-sf[data-abend] main .sf-dining-stage :is(.ab-zeit,.sf-eyebrow), html.ab-szene-pp[data-abend] main .pp-hero :is(.ab-zeit,.pp-kicker){color:#E8C895!important}
html.ab-szene-sf[data-abend] main .sf-dining-stage .ab-hour, html.ab-szene-pp[data-abend] main .pp-hero .ab-hour{color:var(--gold)!important}
html.ab-szene-sf[data-abend] main .sf-dining-stage p, html.ab-szene-pp[data-abend] main .pp-hero p{color:rgba(247,246,242,.84)!important}
html.ab-szene-sf[data-abend] main .sf-dining-stage .sf-dining-note, html.ab-szene-pp[data-abend] main .pp-hero .pp-help, html.ab-szene-pp[data-abend] main .pp-hero figcaption{color:rgba(247,246,242,.62)!important}
html.ab-szene-sf[data-abend] main .sf-dining-choices button{min-height:44px; padding:0 18px!important; border-radius:999px!important; border:1px solid rgba(247,246,242,.4)!important; background:transparent!important; color:#F7F6F2!important; font-size:15px!important}
html.ab-szene-sf[data-abend] main .sf-dining-choices button[aria-pressed="true"]{background:var(--gold)!important; border-color:var(--gold)!important; color:#262A2E!important}
html.ab-szene-pp[data-abend] main .pp-hero .pp-links a:not(.pp-button){color:#F7F6F2!important; text-decoration-color:rgba(243,196,126,.7)!important}
html.ab-szene-sf[data-abend] main .sf-dining-photo img, html.ab-szene-pp[data-abend] main .pp-hero figure img{border-radius:22px!important}
html.ab-szene-sf[data-abend] main .sf-dining-caption{color:#F7F6F2!important}
@media (min-width:900px){
  html.ab-szene-sf[data-abend] main .sf-dining-stage, html.ab-szene-pp[data-abend] main .pp-hero{display:grid!important; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)!important; gap:clamp(40px,5vw,90px)!important; align-items:center!important; padding:clamp(150px,17vh,190px) max(var(--gut,40px),calc((100vw - 1248px)/2 + var(--gut,40px))) clamp(110px,12vw,170px)!important; min-height:0!important}
  html.ab-szene-sf[data-abend] main .sf-dining-photo, html.ab-szene-pp[data-abend] main .pp-hero figure{max-width:500px; justify-self:end; width:100%; margin:0!important}
  html.ab-szene-sf[data-abend] main .sf-dining-photo img, html.ab-szene-pp[data-abend] main .pp-hero figure img{aspect-ratio:3/4; height:auto!important; width:100%!important; object-fit:cover; box-shadow:0 60px 120px -50px rgba(0,0,0,.65)}
}
@media (max-width:899px){
  html.ab-szene-sf[data-abend] main .sf-dining-stage, html.ab-szene-pp[data-abend] main .pp-hero{display:flex!important; flex-direction:column-reverse!important; gap:0!important; padding:0 0 clamp(80px,20vw,120px)!important; min-height:0!important}
  html.ab-szene-sf[data-abend] main .sf-dining-photo, html.ab-szene-pp[data-abend] main .pp-hero figure{margin:0 0 -100px!important; height:clamp(380px,64svh,600px); width:100%; max-width:none; -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 58%,transparent 100%); mask-image:linear-gradient(180deg,#000 0%,#000 58%,transparent 100%); position:relative}
  html.ab-szene-sf[data-abend] main .sf-dining-photo img, html.ab-szene-pp[data-abend] main .pp-hero figure img, html.ab-szene-pp[data-abend] main .pp-hero figure button{width:100%!important; height:100%!important; object-fit:cover; border-radius:0!important; display:block}
  html.ab-szene-sf[data-abend] main .sf-dining-copy, html.ab-szene-pp[data-abend] main .pp-hero-copy{position:relative; z-index:2; padding:0 var(--gut,20px)!important}
  html.ab-szene-sf[data-abend] main .sf-dining-stage h1, html.ab-szene-pp[data-abend] main .pp-hero h1{font-size:clamp(40px,11vw,58px)!important}
  html.ab-szene-sf[data-abend] main .sf-dining-caption, html.ab-szene-pp[data-abend] main .pp-hero figcaption{display:none}
  html.ab-szene-sf[data-abend] main .sf-motion{top:auto!important; bottom:120px!important}
}
html.ab-szene-se[data-abend] main .se-hero .se-hero-top{position:relative!important; top:auto!important; left:auto!important; right:auto!important; z-index:3; padding:0 5%!important}
@media (max-width:760px){ html.ab-szene-se[data-abend] main .se-hero .se-hero-top{padding:0 6%!important} }
html.ab-film[data-abend][data-hour="22"] .ab-kopf:not(.is-solid){background:transparent!important}
html.ab-szene-se[data-abend] main .se-hero #se-kicker{font:italic 400 17px/1.3 "Playfair Display",Georgia,serif!important; letter-spacing:0!important; text-transform:none!important; color:#E8C895!important; display:inline!important}
html.ab-szene-se[data-abend] main .se-hero #se-kicker .ab-hour{font-style:italic; margin-right:6px}
html.ab-szene-se[data-abend] main .se-hero{min-height:max(640px,100svh)!important; padding-bottom:150px!important}
html.ab-szene-se[data-abend] main .se-hero .se-headline{min-height:0!important; padding-bottom:24px!important}
html.ab-szene-se[data-abend] main .se-hero .se-camera-floor{bottom:clamp(44px,6vh,64px)!important}
@media (min-width:761px){ html.ab-szene-se[data-abend] main .se-hero .se-hero-top{padding:0 calc(7% + 2px)!important} html.ab-szene-se[data-abend] main .se-hero .se-headline{padding-left:7%!important} }
@media (max-width:760px){ html.ab-szene-se[data-abend] main .se-hero #se-kicker{font-size:15px!important} }
/* Die Uhr im Kopf zeigt die Zeit schon: die Großbuchstaben-Zeile der alten Bühne bleibt nur für Vorleser */
html.ab-szene-se[data-abend] main .se-hero #se-kicker{position:absolute!important; width:1px!important; height:1px!important; overflow:hidden!important; clip:rect(0 0 0 0)!important; white-space:nowrap!important}
html.ab-szene-se[data-abend] main .se-hero .se-hero-top{justify-content:flex-end!important}
html.ab-szene-se[data-abend] main .se-hero{padding-bottom:190px!important}
@media (max-width:760px){ html.ab-szene-se[data-abend] main .se-hero{padding-bottom:170px!important} html.ab-szene-se[data-abend] main .se-hero .se-headline{padding-top:4px!important} }

/* ===== Innere Abschnitte: eine Sprache für Auswahl, Karten und Hinweise ===== */
html[data-abend] main :is(.se-overline,.career-label){font:italic 400 17px/1.35 "Playfair Display",Georgia,serif!important; letter-spacing:0!important; text-transform:none!important; color:var(--cognac)!important}

/* Auswahl-Pillen (Catering-Service, Hafenbar-Anlass): groß genug für den Daumen */
html[data-abend] main .pm-chip-grid{display:flex!important; flex-wrap:wrap; gap:10px!important}
html[data-abend] main .pm-chip{display:inline-flex!important; align-items:center; gap:8px; min-height:48px; padding:0 20px!important; border-radius:999px!important; border:1px solid var(--line-2,rgba(38,42,46,.22))!important; background:rgba(255,255,255,.55)!important; color:var(--ink)!important; font:500 15px "DM Sans",system-ui,sans-serif!important; cursor:pointer; transition:background .25s,color .25s,border-color .25s}
html[data-abend] main .pm-chip input{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none}
html[data-abend] main .pm-chip:has(input:checked){background:var(--ink)!important; border-color:var(--ink)!important; color:#F7F6F2!important}
html[data-abend] main .pm-chip:has(input:focus-visible){outline:2px solid var(--cognac); outline-offset:3px}
html[data-abend] main .se-occasions{display:flex!important; flex-wrap:wrap; gap:10px!important}
html[data-abend] main .se-occasions button{min-height:48px!important; padding:0 20px!important; border-radius:999px!important; border:1px solid var(--line-2,rgba(38,42,46,.22))!important; background:rgba(255,255,255,.55)!important; color:var(--ink)!important; font:500 15px "DM Sans",system-ui,sans-serif!important}
html[data-abend] main .se-occasions button[aria-pressed="true"]{background:var(--ink)!important; border-color:var(--ink)!important; color:#F7F6F2!important}
html[data-abend] main .se-occasions button span[aria-hidden]{display:none}

/* Anlass-Karten im Catering: am Handy eine ruhige Folge statt zwei enger Spalten */
@media (max-width:760px){
  html[data-abend] main .pm-occasion-grid{grid-template-columns:1fr!important; gap:0!important}
  html[data-abend] main .pm-occasion-card{padding:22px 0!important; border:0!important; border-top:1px solid var(--line,rgba(38,42,46,.12))!important; background:none!important; box-shadow:none!important; border-radius:0!important}
  html[data-abend] main .pm-occasion-card h3{font-size:28px!important; margin:4px 0 8px!important}
}
html[data-abend] main .pm-occasion-card{text-decoration:none!important}
html[data-abend] main .pm-occasion-card small{font:italic 400 15px "Playfair Display",Georgia,serif!important; color:var(--cognac)!important; letter-spacing:0!important; text-transform:none!important}
html[data-abend] main .pm-occasion-card > span{display:inline-flex; align-items:center; gap:8px; margin-top:12px; color:var(--ink); font-weight:500; border-bottom:1px solid var(--cognac); padding-bottom:2px}
html[data-abend] main .pm-occasion-card > span::after{content:"→"; transition:transform .3s}
html[data-abend] main .pm-occasion-card:hover > span::after{transform:translateX(4px)}

/* Weiterführende Doppel-Links: Überschrift nicht unterstrichen, nur der Hinweis darunter */
html[data-abend] main .pm-pair-links a{text-decoration:none!important}
html[data-abend] main .pm-pair-links a :is(h3,p){text-decoration:none!important}
html[data-abend] main .pm-pair-links a > span{display:inline-flex; gap:8px; color:var(--ink); font-weight:500; border-bottom:1px solid var(--cognac); padding-bottom:2px}
html[data-abend] main .pm-pair-links a > span::after{content:"→"}
/* Sprunglink nur für Tastatur sichtbar (nach Antippen des Cookie-Fensters landet der Fokus dort) */
html[data-abend] .skip:focus:not(:focus-visible){left:-9999px!important; transform:translateY(-200%)!important}
html[data-abend] .skip:focus-visible{border-radius:999px; box-shadow:0 10px 30px -10px rgba(0,0,0,.3); font-weight:500}
html[data-abend] main .pm-occasion-card > span, html[data-abend] main .pm-pair-links a > span{text-decoration:none!important}
html[data-abend] main [data-catering-services] fieldset{margin-bottom:28px!important; border:0; padding:0}

/* Cookie-Fenster in der Abend-Sprache (gleich gewichtete Entscheidung bleibt) */
html[data-abend] .sm-privacy{--sm-paper:#F7F6F2; --sm-ink:#262A2E; --sm-accent:#874A23; border-radius:24px!important; border:1px solid rgba(38,42,46,.10)!important; box-shadow:0 40px 90px -30px rgba(38,42,46,.45)!important; padding:26px 26px 18px!important}
html[data-abend] .sm-privacy .sm-privacy-kicker{font:italic 400 16px/1.3 "Playfair Display",Georgia,serif!important; letter-spacing:0!important; text-transform:none!important; color:var(--cognac,#874A23)!important}
html[data-abend] .sm-privacy h2{font-weight:400!important; font-size:clamp(25px,6vw,30px)!important; letter-spacing:-.01em!important}
html[data-abend] .sm-privacy .sm-privacy-choice, html[data-abend] .sm-privacy .sm-privacy-save{border-radius:999px!important; min-height:50px!important; background:#262A2E!important; color:#F7F6F2!important; border:1px solid #262A2E!important; font-weight:500!important}
html[data-abend] .sm-privacy .sm-privacy-choice:hover, html[data-abend] .sm-privacy .sm-privacy-save:hover{background:#874A23!important; border-color:#874A23!important}
html[data-abend] .sm-privacy .sm-privacy-link, html[data-abend] .sm-privacy-launcher{color:#262A2E}
@media (max-width:599px){ html[data-abend] .sm-privacy{width:calc(100% - 24px)!important; bottom:max(12px,env(safe-area-inset-bottom))!important; padding:22px 20px 16px!important} }
html.ab-home[data-abend] .ab-hero .ab-hero-kicker{color:#E8C895!important}
/* Galerie-Film: am Handy läuft die Hochformat-Fassung in voller Höhe statt angeschnitten */
html[data-abend] .gallery-film-stage{border-radius:22px!important; background:#10191c!important; box-shadow:0 40px 80px -40px rgba(15,25,28,.5)!important}
@media (max-width:700px){
  html[data-abend] .gallery-film-stage{min-height:0!important; display:block!important}
  html[data-abend] .gallery-film-stage video{width:100%!important; height:auto!important; max-height:80svh; aspect-ratio:9/16!important; object-fit:cover!important}
}
html.ab-szene-seite[data-abend] .ab-szene .ab-szene-crumb{display:flex!important; flex-wrap:wrap; gap:4px 8px; align-items:center; position:static!important; padding:0!important; margin:0 0 4px!important; background:none!important; border:0!important; font-size:14px!important; color:rgba(247,246,242,.6)!important}
html.ab-szene-seite[data-abend] .ab-szene .ab-szene-crumb a{color:rgba(247,246,242,.78)!important; text-decoration:none!important; min-height:32px; display:inline-flex; align-items:center}
html.ab-szene-seite[data-abend] .ab-szene .ab-szene-crumb [aria-current], html.ab-szene-seite[data-abend] .ab-szene .ab-szene-crumb span:last-child{color:rgba(247,246,242,.6)!important}
/* Lange deutsche Wörter in Überschriften sauber trennen statt mitten im Wort umbrechen */
html[data-abend] :is(h1,h2){hyphens:auto; -webkit-hyphens:auto; hyphenate-limit-chars:10 4 4}
html.ab-home[data-abend] main#main .ab-hero .ab-hero-kicker{color:#E8C895!important}
html[data-abend] .ab-rot span > span{white-space:nowrap}

/* ===================== Abschluss-Strecken ===================== */
/* Was per hidden ausgeblendet ist, bleibt ausgeblendet – egal welche Knopf-Regel greift */
html[data-abend] [hidden]{display:none!important}

/* Kompakte Abendbühne über Anfrage und Hafenbar-Planer */
html.ab-abschluss[data-abend] main .ab-kompakt{position:relative; isolation:isolate; overflow:hidden; background:#262A2E!important; color:#F7F6F2; max-width:none!important; margin:0!important; padding:clamp(128px,16vh,176px) max(var(--gut,20px),calc((100vw - 1120px)/2 + var(--gut,20px))) clamp(130px,14vw,170px)!important; display:grid; gap:16px; text-align:left!important}
html.ab-abschluss[data-abend] main .ab-kompakt::before{content:""; position:absolute; inset:-80px; z-index:-2; background:var(--szene) center/cover no-repeat; filter:blur(48px) saturate(1.2); opacity:.5; transform:scale(1.1)}
html.ab-abschluss[data-abend] main .ab-kompakt::after{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(110% 80% at 10% 0%,rgba(38,42,46,.2),rgba(38,42,46,.82) 72%)}
html.ab-abschluss[data-abend] main .ab-kompakt > *{margin:0!important; max-width:720px}
html.ab-abschluss[data-abend] main .ab-kompakt h1{color:#F7F6F2!important; font-size:clamp(42px,5.2vw,76px)!important; line-height:1.03!important; text-wrap:balance}
html.ab-abschluss[data-abend] main .ab-kompakt p{color:rgba(247,246,242,.84)!important; font-size:18px!important}
html.ab-abschluss[data-abend] main .ab-kompakt .ab-zeit{color:#E8C895!important}
html.ab-abschluss[data-abend] main .ab-kompakt .ab-hour{color:var(--gold)!important}
html.ab-abschluss[data-abend] main .ab-kompakt .inquiry-return{color:rgba(247,246,242,.78)!important; font-size:15px; text-decoration:none; display:inline-flex; gap:8px; align-items:center; min-height:40px}
html.ab-abschluss[data-abend] main .ab-kompakt .button{justify-self:start}

/* Die Planung als schwebende Karte über der Bühne */
html.ab-abschluss[data-abend] .premium-inquiry{position:relative; z-index:3; max-width:1120px!important; margin:-104px auto 0!important; padding:0 var(--gut,20px) clamp(64px,8vw,110px)!important; background:none!important}
html.ab-abschluss[data-abend] #sh-catering-app{background:#FBFAF6!important; border-radius:28px!important; border:1px solid rgba(38,42,46,.08)!important; box-shadow:0 50px 100px -50px rgba(38,42,46,.55), 0 8px 24px -16px rgba(38,42,46,.25)!important; padding:clamp(22px,4vw,52px)!important; display:grid!important; gap:0 48px; grid-template-columns:minmax(0,1fr)}
@media (min-width:980px){
  html.ab-abschluss[data-abend] #sh-catering-app{grid-template-columns:minmax(0,1fr) 320px}
  html.ab-abschluss[data-abend] #sh-catering-app > .tool-steps{grid-column:1 / -1}
  html.ab-abschluss[data-abend] #sh-catering-app > form{grid-column:1}
  html.ab-abschluss[data-abend] #sh-catering-app > .price-card{grid-column:2; grid-row:2; align-self:start; position:sticky; top:120px; margin:0!important}
}

/* Fortschritt in drei Schritten */
html.ab-abschluss[data-abend] .tool-steps{display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0!important; margin:0 0 clamp(26px,4vw,40px)!important; padding:0!important; border:0!important; background:none!important; counter-reset:none}
html.ab-abschluss[data-abend] .tool-steps button{position:relative; display:flex!important; flex-direction:column; align-items:center; gap:10px; padding:0!important; margin:0!important; min-height:64px; border:0!important; background:none!important; box-shadow:none!important; color:var(--muted)!important; font:500 14px/1.25 "DM Sans",system-ui,sans-serif!important; text-align:center; cursor:pointer}
html.ab-abschluss[data-abend] .tool-steps button::before{content:attr(data-step)!important; display:grid!important; place-items:center; width:38px; height:38px; border-radius:50%; border:1.5px solid rgba(38,42,46,.22); background:#fff; color:var(--ink); font:500 15px "DM Sans",sans-serif; position:relative; z-index:1; transition:background .3s,color .3s,border-color .3s; margin:0!important; inset:auto!important}
html.ab-abschluss[data-abend] .tool-steps button::after{content:""!important; position:absolute!important; top:19px!important; left:calc(50% + 24px)!important; width:calc(100% - 48px)!important; height:2px!important; background:rgba(38,42,46,.14)!important; border:0!important; bottom:auto!important; right:auto!important; transform:none!important}
html.ab-abschluss[data-abend] .tool-steps button:last-child::after{display:none!important}
html.ab-abschluss[data-abend] .tool-steps button.active{color:var(--ink)!important; font-weight:600!important}
html.ab-abschluss[data-abend] .tool-steps button.active::before{background:var(--ink); border-color:var(--ink); color:#F7F6F2; box-shadow:0 0 0 6px rgba(38,42,46,.08)}
html.ab-abschluss[data-abend] .tool-steps:has([data-step="2"].active) [data-step="1"]::before,
html.ab-abschluss[data-abend] .tool-steps:has([data-step="3"].active) :is([data-step="1"],[data-step="2"])::before{content:"✓"!important; background:var(--cognac); border-color:var(--cognac); color:#fff}
html.ab-abschluss[data-abend] .tool-steps:has([data-step="2"].active) [data-step="1"]::after,
html.ab-abschluss[data-abend] .tool-steps:has([data-step="3"].active) :is([data-step="1"],[data-step="2"])::after{background:var(--cognac)!important}
html.ab-abschluss[data-abend] #catering-form > section > h3{font:400 clamp(28px,3vw,38px)/1.1 "Playfair Display",Georgia,serif!important; color:var(--ink)!important; margin:0 0 22px!important}

/* Eingabefelder überall in Formularen: groß, ruhig, mindestens 16px gegen das iPhone-Zoomen */
html[data-abend] main :is(#catering-form,.website-inquiry,.referral-form,.fe-selector,[data-guest-tool]) :is(input:not([type]),input[type=text],input[type=number],input[type=email],input[type=tel],input[type=date],input[type=time],select,textarea){min-height:54px; width:100%; border-radius:14px!important; border:1px solid rgba(38,42,46,.2)!important; background:#fff!important; color:var(--ink)!important; padding:0 16px!important; font:400 17px/1.3 "DM Sans",system-ui,sans-serif!important; box-shadow:none!important; transition:border-color .2s, box-shadow .2s; -webkit-appearance:none; appearance:none}
html[data-abend] main :is(#catering-form,.website-inquiry,.referral-form,.fe-selector,[data-guest-tool]) select{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23262A2E' stroke-width='1.6'/%3E%3C/svg%3E") right 16px center/14px 9px no-repeat!important; padding-right:44px!important}
html[data-abend] main :is(#catering-form,.website-inquiry,.referral-form,.fe-selector,[data-guest-tool]) textarea{padding:14px 16px!important; min-height:120px; line-height:1.5!important}
html[data-abend] main :is(#catering-form,.website-inquiry,.referral-form,.fe-selector,[data-guest-tool]) :is(input,select,textarea):focus{outline:none!important; border-color:var(--ink)!important; box-shadow:0 0 0 4px rgba(135,74,35,.16)!important}
html[data-abend] main :is(#catering-form,.website-inquiry,.referral-form,.fe-selector,[data-guest-tool]) .form-grid > label, html[data-abend] main :is(#catering-form,.website-inquiry,.referral-form,[data-guest-tool]) label:not(.referral-trap):has(> input:not([type=checkbox]):not([type=radio])), html[data-abend] main :is(#catering-form,.website-inquiry,.referral-form,[data-guest-tool]) label:has(> select), html[data-abend] main :is(#catering-form,.website-inquiry,.referral-form,[data-guest-tool]) label:has(> textarea){display:grid!important; gap:8px; font:500 15px/1.35 "DM Sans",system-ui,sans-serif!important; color:var(--ink)!important}
/* The referral honeypot must stay hidden at every viewport width. */
html[data-abend] main #staff-referral.referral-form .referral-trap[aria-hidden="true"]{display:none!important}
html[data-abend] main :is(#catering-form,.website-inquiry,.referral-form) .form-grid{gap:18px 18px!important}

/* Auswahlkarten (Ort, Küche) und eigene Häkchen */
html[data-abend] main #catering-form .choice-grid{gap:12px!important}
html[data-abend] main #catering-form .choice-grid label{position:relative; display:grid!important; gap:4px; align-content:start; padding:18px 18px 18px 56px!important; min-height:88px; border-radius:18px!important; border:1px solid rgba(38,42,46,.16)!important; background:#fff!important; box-shadow:none!important; cursor:pointer; transition:border-color .25s, box-shadow .25s, transform .25s}
html[data-abend] main #catering-form .choice-grid label:hover{border-color:rgba(38,42,46,.35)!important}
html[data-abend] main #catering-form .choice-grid label:has(input:checked){border-color:var(--ink)!important; box-shadow:inset 0 0 0 1px var(--ink), 0 18px 34px -24px rgba(38,42,46,.5)!important}
html[data-abend] main #catering-form .choice-grid label b{font:500 17px/1.3 "DM Sans",sans-serif!important; color:var(--ink)!important}
html[data-abend] main #catering-form .choice-grid label small{font-size:15px!important; color:var(--muted)!important; line-height:1.4}
html[data-abend] main #catering-form .choice-grid label input{position:absolute!important; left:18px; top:20px; margin:0!important}
html[data-abend] main :is(#catering-form,.website-inquiry,.referral-form,[data-guest-tool]) :is(input[type=radio],input[type=checkbox]){-webkit-appearance:none; appearance:none; width:24px!important; height:24px!important; min-height:0!important; flex:0 0 24px; border:1.5px solid rgba(38,42,46,.35)!important; background:#fff!important; border-radius:7px!important; display:inline-grid; place-content:center; cursor:pointer; padding:0!important; transition:background .2s,border-color .2s}
html[data-abend] main :is(#catering-form,.website-inquiry,.referral-form,[data-guest-tool]) input[type=radio]{border-radius:50%!important}
html[data-abend] main :is(#catering-form,.website-inquiry,.referral-form,[data-guest-tool]) :is(input[type=radio],input[type=checkbox]):checked{background:var(--ink)!important; border-color:var(--ink)!important}
html[data-abend] main :is(#catering-form,.website-inquiry,.referral-form,[data-guest-tool]) input[type=checkbox]:checked::after{content:""; width:11px; height:6px; border:2px solid #fff; border-top:0; border-right:0; transform:translateY(-1px) rotate(-45deg)}
html[data-abend] main :is(#catering-form,.website-inquiry,.referral-form,[data-guest-tool]) input[type=radio]:checked::after{content:""; width:9px; height:9px; border-radius:50%; background:#F7F6F2}
html[data-abend] main :is(#catering-form,.website-inquiry,.referral-form,[data-guest-tool]) :is(input[type=radio],input[type=checkbox]):focus-visible{box-shadow:0 0 0 4px rgba(135,74,35,.2)!important}
html[data-abend] main :is(#catering-form,.website-inquiry,.referral-form,[data-guest-tool]) :is(.privacy,.date-open-label,.fest-form-extras label){display:flex!important; align-items:flex-start; gap:12px; font:400 15px/1.45 "DM Sans",sans-serif!important; color:var(--ink)!important; min-height:44px}
html[data-abend] main #catering-form .fest-form-extras{border:0!important; padding:0!important; margin:22px 0 0!important; display:grid; gap:6px}
html[data-abend] main #catering-form .fest-form-extras legend{font:500 15px "DM Sans",sans-serif; color:var(--ink); margin-bottom:8px}

/* Zusammenfassung und Hinweise */
html[data-abend] main .pm-request-review{background:#F3EEE5!important; border:0!important; border-left:3px solid var(--cognac)!important; border-radius:16px!important; padding:18px 20px!important; margin:0 0 20px!important}
html[data-abend] main .pm-request-review strong{font:italic 400 17px "Playfair Display",Georgia,serif; color:var(--cognac)}
html[data-abend] main .pm-request-review p{margin:6px 0 0!important; color:var(--ink)!important; font-size:16px!important}
html[data-abend] main #catering-form .planner-note, html[data-abend] main #catering-form .catering-final-note{font-size:15px!important; color:var(--muted)!important; line-height:1.5}
html[data-abend] main #tool-result:not(:empty), html[data-abend] main .inquiry-result:not(:empty){margin-top:18px; padding:18px 20px; border-radius:16px; background:#ECECEA; color:var(--ink); font-size:16px; line-height:1.5}

/* Preis-Orientierung als dunkle Karte */
html.ab-abschluss[data-abend] .price-card{background:#262A2E!important; color:#F7F6F2!important; border:0!important; border-radius:22px!important; padding:26px!important; box-shadow:0 30px 60px -36px rgba(38,42,46,.7)!important; margin-top:28px!important}
html.ab-abschluss[data-abend] .price-card small{font:italic 400 16px "Playfair Display",Georgia,serif!important; color:#E8C895!important; letter-spacing:0!important; text-transform:none!important}
html.ab-abschluss[data-abend] .price-card strong{display:block; font:400 30px/1.15 "Playfair Display",Georgia,serif!important; color:#F7F6F2!important; margin:6px 0 4px}
html.ab-abschluss[data-abend] .price-card :is(span,p,dt){color:rgba(247,246,242,.72)!important; font-size:15px!important}
html.ab-abschluss[data-abend] .price-card dd{color:#F7F6F2!important; font-weight:500}
html.ab-abschluss[data-abend] .price-card dl{border-top:1px solid rgba(247,246,242,.14)!important; margin:18px 0!important; padding-top:12px}
html.ab-abschluss[data-abend] .price-card dl > div{display:flex; justify-content:space-between; gap:12px; padding:7px 0; border:0!important}

/* Weiter / Zurück: am Handy als feste Leiste am unteren Rand, die Kontakt-Leiste tritt zurück */
html[data-abend] main #catering-form .tool-nav{display:flex!important; align-items:center; justify-content:space-between; gap:12px; margin-top:30px!important; padding-top:22px!important; border-top:1px solid rgba(38,42,46,.12)!important}
html[data-abend] main #catering-form .tool-nav button{min-height:54px; border-radius:999px!important; padding:0 28px!important; font:500 16px "DM Sans",sans-serif!important; cursor:pointer}
html[data-abend] main #catering-form .tool-nav #back{background:transparent!important; border:1px solid rgba(38,42,46,.22)!important; color:var(--ink)!important}
html[data-abend] main #catering-form .tool-nav #back:disabled{opacity:.35}
html[data-abend] main #catering-form .tool-nav #next{background:var(--ink)!important; color:#F7F6F2!important; border:0!important; margin-left:auto}
html[data-abend] main #catering-form .tool-nav #submit{background:var(--cognac)!important; color:#fff!important; border:0!important; margin-left:auto}
html[data-abend] main #catering-form .tool-nav #next::after, html[data-abend] main #catering-form .tool-nav #submit::after{content:" →"}
@media (max-width:760px){
  html.ab-abschluss[data-abend]:has(#catering-form) .ab-dock{display:none!important}
  html[data-abend] main #catering-form .tool-nav{position:sticky; bottom:0; z-index:30; margin:26px -22px -22px!important; padding:12px 16px calc(12px + env(safe-area-inset-bottom))!important; background:rgba(251,250,246,.96)!important; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-radius:0 0 28px 28px; border-top:1px solid rgba(38,42,46,.1)!important}
  html[data-abend] main #catering-form .tool-nav #back{padding:0 20px!important}
  html[data-abend] main #catering-form .tool-nav :is(#next,#submit){flex:1; justify-content:center}
  html.ab-abschluss[data-abend] .premium-inquiry{margin-top:-84px!important; padding-left:12px!important; padding-right:12px!important}
  html.ab-abschluss[data-abend] #sh-catering-app{border-radius:24px!important; padding:22px!important}
  html.ab-abschluss[data-abend] .tool-steps button{font-size:13px!important}
}
/* Neue Anfrage: zurückhaltend */
html[data-abend] main #new-inquiry{background:transparent!important; color:var(--ink)!important; border:1px solid rgba(38,42,46,.25)!important; margin-top:14px}

/* Hafenbar-Anfrage: Absenden-Knopf wie überall */
html[data-abend] main .website-inquiry [data-harbor-submit]{min-height:54px; border-radius:999px!important; background:var(--cognac)!important; color:#fff!important; padding:0 30px!important; border:0!important}
html[data-abend] main .website-inquiry [data-harbor-submit]:disabled{opacity:.45}
html[data-abend] main .website-inquiry fieldset{border:0!important; padding:0!important}
html[data-abend] main .website-inquiry legend{font:400 26px/1.2 "Playfair Display",Georgia,serif; color:var(--ink); margin-bottom:16px}
html[data-abend] main #catering-form .choice-grid{display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; width:100%!important; max-width:none!important}
html[data-abend] main #catering-form .choice-grid label{min-width:0!important; width:auto!important}
html[data-abend] main #catering-form .form-grid{display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; width:100%!important; max-width:none!important}
html[data-abend] main #catering-form .form-grid > :is(.wide,.date-open-label,p){grid-column:1 / -1}
html[data-abend] main #catering-form, html[data-abend] main #catering-form > section{min-width:0; max-width:none!important; width:100%}
@media (max-width:560px){
  html[data-abend] main #catering-form .choice-grid, html[data-abend] main #catering-form .form-grid{grid-template-columns:minmax(0,1fr)!important}
  html[data-abend] main #catering-form .choice-grid label{min-height:0}
}
@media (min-width:980px){
  html.ab-abschluss[data-abend] #sh-catering-app:not(:has(> .price-card:not([hidden]))){grid-template-columns:minmax(0,1fr)}
  html.ab-abschluss[data-abend] #sh-catering-app:not(:has(> .price-card:not([hidden]))) > form{max-width:760px; margin:0 auto; width:100%}
}

/* Reservierung: schwebende Karte mit dem einen großen Schritt ins Buchungssystem */
html.ab-reservierung[data-abend] .reservation-heading.ab-kompakt .story-copy{display:grid; gap:16px; max-width:720px; padding:0!important; margin:0!important; background:none!important}
html.ab-reservierung[data-abend] .reservation-heading.ab-kompakt .story-copy > *{margin:0!important}
html.ab-reservierung[data-abend] .reservation-closure-note{background:rgba(243,196,126,.14)!important; border:1px solid rgba(243,196,126,.35)!important; border-radius:16px!important; padding:14px 18px!important; color:#F7F6F2!important; font-size:15px!important}
html.ab-reservierung[data-abend] .reservation-closure-note strong{color:var(--gold)!important}
html.ab-reservierung[data-abend] main > article.editorial{position:relative; z-index:3; max-width:1120px!important; margin:-104px auto 0!important; padding:0 var(--gut,20px)!important; background:none!important}
html.ab-reservierung[data-abend] #reservation-tool{background:#FBFAF6!important; border-radius:28px!important; border:1px solid rgba(38,42,46,.08)!important; box-shadow:0 50px 100px -50px rgba(38,42,46,.55),0 8px 24px -16px rgba(38,42,46,.25)!important; padding:clamp(24px,4vw,52px)!important; margin:0!important}
html.ab-reservierung[data-abend] .booking-handoff{display:grid!important; grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr); gap:clamp(24px,4vw,56px); align-items:stretch; margin:0 0 26px!important; padding:0!important; background:none!important; border:0!important}
html.ab-reservierung[data-abend] .booking-handoff > div:first-child{display:grid; gap:18px; align-content:start}
html.ab-reservierung[data-abend] .booking-handoff > div:first-child > p:first-child{font:400 clamp(22px,2.4vw,28px)/1.35 "Playfair Display",Georgia,serif!important; color:var(--ink)!important; margin:0!important}
html.ab-reservierung[data-abend] .booking-handoff .button{justify-self:start; min-height:60px!important; padding:0 34px!important; font-size:17px!important; border-radius:999px!important}
html.ab-reservierung[data-abend] .ab-res-status{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:0!important; font-size:15px!important; color:var(--muted)!important}
html.ab-reservierung[data-abend] .ab-res-status strong{color:var(--ink); font-weight:600}
html.ab-reservierung[data-abend] .ab-res-status .ab-pulse{width:9px; height:9px; border-radius:50%; background:#3E8E5F; box-shadow:0 0 0 0 rgba(62,142,95,.5); animation:abPulse 2.2s infinite}
html.ab-reservierung[data-abend] .handoff-note{font-size:15px!important; color:var(--muted)!important; margin:0!important}
html.ab-reservierung[data-abend] .booking-guidance{display:grid; align-content:end; gap:14px; background:#262A2E!important; color:#F7F6F2!important; border-radius:22px!important; padding:26px!important; border:0!important; margin:0!important; position:relative; overflow:hidden; isolation:isolate}
html.ab-reservierung[data-abend] .booking-guidance::before{content:""; position:absolute; inset:-40px; z-index:-1; background:url('/assets/galerie-9209-w480.webp') center/cover; filter:blur(28px); opacity:.35}
html.ab-reservierung[data-abend] .booking-guidance p{color:rgba(247,246,242,.88)!important; font-size:17px!important; margin:0!important; line-height:1.5}
html.ab-reservierung[data-abend] .booking-guidance .text-link{color:#F7F6F2!important; text-decoration-color:var(--gold)!important; font-weight:500}
html.ab-reservierung[data-abend] #reservation-tool details{border-top:1px solid rgba(38,42,46,.12)!important; background:none!important; border-radius:0!important; margin:0!important}
html.ab-reservierung[data-abend] #reservation-tool details summary{min-height:60px; display:flex; align-items:center; font:500 17px "DM Sans",sans-serif; color:var(--ink); cursor:pointer}
html.ab-reservierung[data-abend] .ab-tischplan{padding-top:clamp(56px,7vw,96px)}
@media (max-width:760px){
  html.ab-reservierung[data-abend] .booking-handoff{grid-template-columns:minmax(0,1fr)}
  html.ab-reservierung[data-abend] main > article.editorial{margin-top:-84px!important; padding:0 12px!important}
  html.ab-reservierung[data-abend] #reservation-tool{padding:24px 20px!important; border-radius:24px!important}
  html.ab-reservierung[data-abend] .booking-handoff .button{justify-self:stretch; justify-content:center}
}
@keyframes abPulse{0%{box-shadow:0 0 0 0 rgba(62,142,95,.45)} 70%{box-shadow:0 0 0 10px rgba(62,142,95,0)} 100%{box-shadow:0 0 0 0 rgba(62,142,95,0)}}
html.ab-abschluss[data-abend] main .ab-kompakt{min-height:0!important; height:auto!important}
html.ab-abschluss[data-abend] main .ab-kompakt :is(.story-shade,.hero-signature){display:none!important}
html.ab-reservierung[data-abend] main .ab-kompakt .story-copy p{color:rgba(247,246,242,.84)!important}
html.ab-abschluss[data-abend] main .ab-kompakt{width:auto!important; border-radius:0!important; left:auto!important; right:auto!important}
html[data-abend] .ab-fuss .ab-fuss-gift{color:var(--gold)!important; text-decoration-color:rgba(243,196,126,.6)!important}

/* ===== Fließende Seitenwechsel: Kopf und Handy-Leiste bleiben stehen, die Szene blendet über ===== */
@view-transition{navigation:auto}
html[data-abend] .ab-kopf{view-transition-name:ab-kopf}
html[data-abend] .ab-dock{view-transition-name:ab-dock}
::view-transition-group(ab-kopf), ::view-transition-group(ab-dock){animation-duration:.5s; animation-timing-function:cubic-bezier(.2,.7,.1,1)}
::view-transition-old(root){animation:abVtOut .32s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:abVtIn .55s cubic-bezier(.2,.7,.1,1) both}
@keyframes abVtOut{to{opacity:0; transform:scale(.985)}}
@keyframes abVtIn{from{opacity:0; transform:translateY(14px)}}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
}
html[data-abend] [hidden]:not(#ab-kein):not(#ab-nie){display:none!important}

/* Offenes Handy-Menü: Logo bleibt sichtbar, klares Kreuz, Reservieren als goldener Knopf */
@media (max-width:980px){
  html[data-abend] .ab-kopf:has(nav#menu.open) .brand{position:relative; z-index:80}
  html[data-abend] .ab-kopf:has(nav#menu.open) .brand .ab-logo-dunkel{display:none!important}
  html[data-abend] .ab-kopf:has(nav#menu.open) .brand .ab-logo-hell{display:block!important}
  html[data-abend] .ab-kopf nav#menu .mobile-reserve{align-self:flex-start}
}
/* Querformat-Fotos am Handy im Querformat zeigen: schärfer als ein hochkant gestreckter Ausschnitt */
@media (max-width:899px){
  html.ab-szene-seite[data-abend] .ab-szene--quer .ab-szene-bild{height:auto; aspect-ratio:4/3.4; margin-bottom:-70px}
  html.ab-szene-seite[data-abend] .ab-szene--quer{padding-top:calc(var(--kopf-h,112px) - 12px)}
}

/* ===== Bildkapitel ===== */
html[data-abend] .ab-kapitel{padding:clamp(72px,10vw,140px) 0 clamp(56px,8vw,110px); overflow:hidden}
html[data-abend] .ab-kapitel-kopf{max-width:1248px; margin:0 auto clamp(26px,4vw,48px); padding:0 var(--gut,20px); display:grid; gap:12px}
html[data-abend] .ab-kapitel-kopf > *{margin:0!important}
html[data-abend] .ab-kapitel-kopf h2{font-size:clamp(36px,5vw,72px)!important; line-height:1.04!important; max-width:16ch; text-wrap:balance}
html[data-abend] .ab-kapitel-kopf h2 em{color:var(--cognac); font-style:italic}
/* Das Foto wächst beim Scrollen bis an den Rand */
html[data-abend] .ab-wachsen{position:relative; margin:0 auto; width:calc(100% - 2 * var(--gut,20px)); max-width:none; aspect-ratio:16/10; border-radius:24px; overflow:hidden; isolation:isolate}
html[data-abend] .ab-wachsen img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
html[data-abend] .ab-wachsen::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(24,26,29,.62)); pointer-events:none}
html[data-abend] .ab-wachsen figcaption{position:absolute; left:clamp(18px,4vw,48px); bottom:clamp(16px,3vw,40px); z-index:2; color:#F7F6F2!important; font:italic 400 clamp(20px,2.6vw,34px)/1.2 "Playfair Display",Georgia,serif!important; text-shadow:0 2px 18px rgba(0,0,0,.35); max-width:80%}
@media (max-width:760px){ html[data-abend] .ab-wachsen{aspect-ratio:4/5} }
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    html[data-abend] .ab-wachsen{animation:abWachsen linear both; animation-timeline:view(); animation-range:entry 10% cover 45%}
    html[data-abend] .ab-wachsen img{animation:abWachsenBild linear both; animation-timeline:view(); animation-range:entry 0% exit 100%}
    @keyframes abWachsen{from{width:calc(100% - 2 * var(--gut,20px)); border-radius:24px} to{width:100%; border-radius:0}}
    @keyframes abWachsenBild{from{transform:scale(1.12)} to{transform:scale(1)}}
  }
}
/* Bildstreifen: am Handy wischen, am Rechner als ruhige Reihe */
html[data-abend] .ab-streifen{display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--gut,20px); padding:clamp(22px,3vw,40px) var(--gut,20px) 8px; scrollbar-width:none; -webkit-overflow-scrolling:touch; outline:none}
html[data-abend] .ab-streifen::-webkit-scrollbar{display:none}
html[data-abend] .ab-streifen-bild{flex:0 0 min(78vw,340px); margin:0; scroll-snap-align:start}
html[data-abend] .ab-streifen-bild img{display:block; width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:18px; box-shadow:0 26px 50px -36px rgba(24,26,29,.6)}
html[data-abend] .ab-streifen-bild figcaption{margin-top:10px; font:italic 400 17px/1.3 "Playfair Display",Georgia,serif!important; color:var(--muted)!important}
html[data-abend] .ab-streifen-bild figcaption::before{content:""; display:inline-block; width:18px; height:1px; background:var(--cognac); vertical-align:middle; margin-right:8px}
@media (min-width:980px){
  html[data-abend] .ab-streifen{display:grid; grid-template-columns:repeat(auto-fit,minmax(0,1fr)); max-width:1248px; margin:0 auto; overflow:visible}
  html[data-abend] .ab-streifen-bild:nth-child(even){margin-top:56px}
}

/* Startseite am Handy: Rundgang und Feier-Collage als Bildstreifen zum Wischen */
@media (max-width:760px){
  html.ab-home[data-abend] .ab-rundgang-photos .visit-grid{display:flex!important; gap:12px!important; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 calc(-1 * var(--gut,20px))!important; padding:0 var(--gut,20px) 6px!important; scrollbar-width:none; grid-template-columns:none!important}
  html.ab-home[data-abend] .ab-rundgang-photos .visit-grid::-webkit-scrollbar{display:none}
  html.ab-home[data-abend] .ab-rundgang-photos .visit-grid > *{flex:0 0 76vw!important; width:auto!important; height:auto!important; aspect-ratio:4/5; scroll-snap-align:start; margin:0!important; grid-column:auto!important; grid-row:auto!important; transform:none!important}
  html.ab-home[data-abend] .ab-depth{display:flex!important; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; height:auto!important; margin:24px calc(-1 * var(--gut,20px)) 0!important; padding:0 var(--gut,20px) 6px; scrollbar-width:none}
  html.ab-home[data-abend] .ab-depth::-webkit-scrollbar{display:none}
  html.ab-home[data-abend] .ab-depth img{position:static!important; flex:0 0 72vw; width:72vw!important; height:auto!important; aspect-ratio:4/5; object-fit:cover; opacity:1!important; transform:none!important; border-radius:18px; scroll-snap-align:start; inset:auto!important}
}
@media (min-width:980px){ html[data-abend] .ab-streifen{gap:24px} }
html[data-abend] .ab-galerie-anfrage{text-align:center; margin:22px auto 0!important}
html[data-abend] .ab-galerie-anfrage a{font-weight:500; font-size:17px}
html[data-abend] .ab-wachsen img{object-position:50% 58%}

/* ================= Lesbarkeit: Startfilm am Handy und Schrift über Bildern ================= */
/* Wechselwort: passt immer in die Zeile, Unterlängen (g, p) bleiben sichtbar, nichts wird seitlich abgeschnitten */
html.ab-home[data-abend] .ab-hero-copy{container-type:inline-size}
html[data-abend] .ab-rot{height:1.16em; line-height:1.16; overflow:hidden; overflow:visible clip}
html[data-abend] .ab-rot > span > span{height:1.16em; line-height:1.16}
html.ab-home[data-abend] .ab-hero .ab-rot{font-size:min(1em, 100cqi / 7.8); margin-top:.04em}
html.ab-home[lang^="en"][data-abend] .ab-hero .ab-rot{font-size:min(1em, 100cqi / 7.6)}

/* Ruhiger Schatten für Schrift auf Fotos und Film, nicht auf Knöpfen */
html[data-abend] :is(.ab-hero-copy, .ab-open-copy, .ab-seatcard span, .sm-cine-copy, .ab-chevy-copy, .ab-wachsen figcaption, .se-hero .se-headline, .se-hero .se-camera-floor, .sf-dining-copy, .pp-hero-copy, .ab-szene-kopf, .ab-szene-text > p){text-shadow:0 1px 2px rgba(18,20,22,.38), 0 2px 24px rgba(18,20,22,.42)}
html[data-abend] :is(.ab-hero-copy, .ab-open-copy, .sm-cine-copy, .ab-chevy-copy, .se-hero, .sf-dining-copy, .pp-hero-copy, .ab-szene-text) :is(.button, button, .pp-button, .se-primary, [class*="button"], [class*="btn"]){text-shadow:none}
html[data-abend] :is(.ab-hero-kicker, .ab-open-k, .ab-zeit, .sf-eyebrow, .pp-kicker){font-weight:500!important}

/* Kopfzeile über Film und Fotos: weicher dunkler Verlauf hinter Logo, Menü und Abenduhr */
html[data-abend].ab-film .ab-kopf::before{content:""; position:absolute; left:0; right:0; top:0; height:calc(100% + 70px); z-index:-1; pointer-events:none; background:linear-gradient(180deg,rgba(24,26,29,.58) 0%,rgba(24,26,29,.32) 55%,rgba(24,26,29,0) 100%); transition:opacity .4s var(--ease)}
html[data-abend].ab-film .ab-kopf.is-solid::before{opacity:0}
html[data-abend].ab-film .ab-kopf:not(.is-solid) :is(nav#menu > a, .ab-uhr-label, .guest-language-control a){text-shadow:0 1px 10px rgba(18,20,22,.45)}

/* Startfilm: dichtere Abdunklung dort, wo Text steht */
html.ab-home[data-abend] .ab-hero-lead{color:#F7F6F2!important}
html.ab-home[data-abend] .ab-hero-kicker{color:#F0CF97!important}
@media (min-width:981px){
  html.ab-home[data-abend] .ab-hero-shade{background:linear-gradient(180deg,rgba(38,42,46,.5) 0%,rgba(38,42,46,0) 24%),linear-gradient(90deg,rgba(38,42,46,.8) 0%,rgba(38,42,46,.42) 45%,rgba(38,42,46,0) 70%),linear-gradient(0deg,rgba(38,42,46,.8) 8%,rgba(38,42,46,0) 55%)}
  html.ab-home[data-abend] .ab-hero-copy{bottom:clamp(110px,17vh,220px)}
  html.ab-home[data-abend] .ab-ring{bottom:clamp(110px,17vh,220px)}
  html.ab-home[data-abend] .ab-hero h1{font-size:clamp(54px,min(8vw,11vh),124px)!important}
  html.ab-home[data-abend] .ab-coord{text-shadow:0 1px 8px rgba(18,20,22,.5); left:max(46px, calc(clamp(64px,8vw,128px) - 44px))}
}
/* Koordinaten nur, wenn links genug Platz neben dem Text ist */
@media (max-width:1180px){ html.ab-home[data-abend] .ab-coord{display:none!important} }
@media (max-width:980px){
  html.ab-home[data-abend] .ab-hero-frame{display:none}
  html.ab-home[data-abend] .ab-hero-shade{background:linear-gradient(180deg,rgba(38,42,46,.55) 0%,rgba(38,42,46,0) 20%),linear-gradient(0deg,rgba(30,33,36,.92) 0%,rgba(30,33,36,.78) 30%,rgba(30,33,36,.42) 58%,rgba(30,33,36,0) 80%)}
  html.ab-home[data-abend] .ab-hero-copy{left:22px; right:22px; gap:18px}
  html.ab-home[data-abend] .ab-hero h1{font-size:clamp(42px,12.4vw,60px)!important; line-height:1.04!important}
  html.ab-home[data-abend] .ab-hero-kicker{font-size:16px!important}
  html.ab-home[data-abend] .ab-hero-lead{font-size:18px!important; line-height:1.5!important}
  html.ab-home[data-abend] .ab-hero-status, html.ab-home[data-abend] .ab-hero-status small{font-size:15px}
}
/* Handy quer: alles sichtbar über dem Dock */
@media (orientation:landscape) and (max-height:540px){
  html.ab-home[data-abend] .ab-hero{height:auto; min-height:100svh}
  html.ab-home[data-abend] .ab-hero-copy{position:relative; left:auto; right:auto; bottom:auto; padding:118px max(28px,env(safe-area-inset-left)) 118px; gap:12px; max-width:760px}
  html.ab-home[data-abend] .ab-hero h1{font-size:clamp(34px,9vh,46px)!important}
  html.ab-home[data-abend] .ab-hero-lead{font-size:16px!important}
  html.ab-home[data-abend] .ab-film-toggle{top:auto; bottom:110px}
  html.ab-home[data-abend] .ab-hero-shade{background:linear-gradient(90deg,rgba(30,33,36,.86) 0%,rgba(30,33,36,.55) 55%,rgba(30,33,36,.2) 100%)}
}

/* Startseite „Drinnen“: Text auf dem Gastraumfoto */
html.ab-home[data-abend] .ab-open::after{background:linear-gradient(90deg,rgba(30,33,36,.8) 0%,rgba(30,33,36,.45) 50%,rgba(30,33,36,.05) 100%)}
html.ab-home[data-abend] .ab-open-k{font-size:21px!important; color:#F0CF97!important}
html.ab-home[data-abend] .ab-open-copy p{color:#F7F6F2!important}
@media (max-width:980px){
  html.ab-home[data-abend] .ab-open::after{background:linear-gradient(180deg,rgba(30,33,36,0) 12%,rgba(30,33,36,.62) 38%,rgba(30,33,36,.86) 62%,rgba(30,33,36,.8) 100%)}
  html.ab-home[data-abend] .ab-open-copy{bottom:12%; right:var(--gut)}
}
/* Platzkarten */
html.ab-home[data-abend] .ab-seatcard::after{background:linear-gradient(180deg,rgba(24,26,29,0) 30%,rgba(24,26,29,.55) 58%,rgba(24,26,29,.88) 100%)}
html.ab-home[data-abend] .ab-seatcard span{font-size:15px!important; color:#F7F6F2}
/* Kino-Bilder auf den Feierseiten */
html[data-abend] main .sm-cine-frame::after{background:linear-gradient(180deg,rgba(24,26,29,0) 30%,rgba(24,26,29,.55) 58%,rgba(24,26,29,.9) 100%)!important}
html[data-abend] main .sm-cine-copy{opacity:max(var(--co,1),.92)}
html[data-abend] main .sm-cine-copy p{opacity:1!important; font-weight:500; font-size:16px; color:#F0CF97}
html[data-abend] main .sm-cine-copy strong{color:#F7F6F2}
/* Wachsende Kapitelbilder */
html[data-abend] .ab-wachsen::after{background:linear-gradient(180deg,rgba(24,26,29,0) 45%,rgba(24,26,29,.5) 72%,rgba(24,26,29,.82) 100%)}
html[data-abend] .ab-wachsen figcaption{font-weight:500!important}
/* Szenenköpfe am Handy: Foto oben dunkler für Logo und Abenduhr, unten dichter für den Titel */
@media (max-width:899px){
  html.ab-szene-seite[data-abend] .ab-szene-bild::before{content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg,rgba(24,26,29,.5) 0%,rgba(24,26,29,0) 26%,rgba(24,26,29,0) 46%,rgba(24,26,29,.62) 78%,rgba(24,26,29,.85) 100%)}
}
/* Über uns und Pâtisserie: gleiche Ruhe auf dem Foto */
html.ab-szene-sf[data-abend] main .sf-dining-stage .sf-dining-note, html.ab-szene-pp[data-abend] main .pp-hero .pp-help{color:rgba(247,246,242,.82)!important; font-size:15px!important}
html.ab-szene-sf[data-abend] main .sf-motion{background:rgba(24,26,29,.62)!important; color:#F7F6F2!important; border:1px solid rgba(247,246,242,.35)!important; font-size:14px!important; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
@media (max-width:980px){
  html.ab-szene-sf[data-abend] main .sf-dining-photo, html.ab-szene-pp[data-abend] main .pp-hero figure{position:relative}
  html.ab-szene-sf[data-abend] main .sf-dining-photo::after, html.ab-szene-pp[data-abend] main .pp-hero figure::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg,rgba(24,26,29,.5) 0%,rgba(24,26,29,0) 24%,rgba(24,26,29,0) 42%,rgba(24,26,29,.66) 76%,rgba(24,26,29,.9) 100%)}
  html.ab-szene-sf[data-abend] main .sf-motion{z-index:3}
}
/* Hafenbar: Fließtext und Knöpfe auf dem Barfoto */
html.ab-szene-se[data-abend] main .se-hero :is(#se-subtitle, .se-headline p){font-size:17px!important; line-height:1.5!important; color:#F7F6F2!important}
html.ab-szene-se[data-abend] main .se-hero .se-camera-floor :is(p, span){font-size:16px!important; color:#F7F6F2!important}
html.ab-szene-se[data-abend] main .se-hero .se-camera-floor button, html.ab-szene-se[data-abend] main .se-hero #se-motion{font-size:15px!important; background:rgba(24,26,29,.62)!important; color:#F7F6F2!important; border-color:rgba(247,246,242,.4)!important}
html.ab-home[data-abend] main .ab-open-copy p.ab-open-k{font:italic 500 21px/1.3 var(--serif)!important; color:#F0CF97!important}
html[data-abend] main .sm-cine-frame .sm-cine-copy p{color:#F0CF97!important; letter-spacing:.01em}
html[data-abend] main .sm-cine-frame .sm-cine-copy strong{color:#F7F6F2!important}
html.ab-home[data-abend] .ab-hero .ab-hero-kicker{color:#F7E2BC!important}
html.ab-szene-sf[data-abend] main .sf-dining-stage :is(.ab-zeit,.sf-eyebrow), html.ab-szene-pp[data-abend] main .pp-hero :is(.ab-zeit,.pp-kicker), html.ab-szene-seite[data-abend] .ab-szene .ab-zeit{color:#F7E2BC!important}
html.ab-szene-se[data-abend] main .se-hero .se-camera-floor button{background:rgba(24,26,29,.8)!important}
/* Rundgang-Karten: Serifentitel wie überall, dichter Verlauf unter der Schrift */
html.ab-home[data-abend] main .visit-photo .visit-label{padding:72px 20px 18px!important; background:linear-gradient(0deg,rgba(24,26,29,.9) 0%,rgba(24,26,29,.62) 45%,rgba(24,26,29,0) 100%)!important; text-shadow:0 1px 2px rgba(18,20,22,.4),0 2px 18px rgba(18,20,22,.4)}
html.ab-home[data-abend] main .visit-photo .visit-label b{font:400 24px/1.15 var(--serif)!important; color:#F7F6F2!important}
html.ab-home[data-abend] main .visit-photo .visit-label small{font-size:15px!important; opacity:1; color:rgba(247,246,242,.92)!important}
/* Startfilm: Kopfzeile darf breiter laufen, damit die Zeile nicht dreimal umbricht */
@media (min-width:981px){ html.ab-home[data-abend] .ab-hero-copy{max-width:min(1000px, calc(100vw - 2 * clamp(64px,8vw,128px) - 180px))} }
/* Hafenbar: der untere Rand blendet erst unter den Bedienelementen aus */
html.ab-szene-se[data-abend] main .se-hero{-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 calc(100% - 36px),transparent 100%)!important; mask-image:linear-gradient(180deg,#000 0%,#000 calc(100% - 36px),transparent 100%)!important}
html.ab-szene-se[data-abend] main .se-hero .se-wash::after{content:""; position:absolute; left:0; right:0; bottom:0; height:46%; pointer-events:none; background:linear-gradient(180deg,rgba(24,26,29,0),rgba(24,26,29,.7))}
html.ab-szene-se[data-abend] main .se-hero .se-camera-floor{position:absolute!important; z-index:3}

/* ================= Schriftgrößen am Handy: nichts Lesbares unter 14 px, Fließtext ab 15–16 px ================= */
html[data-abend] .tool-steps button{font-size:14px!important}
html[data-abend] main .pp-help, html[data-abend] main .pp-inquiry-copy .pp-help{font-size:15px!important; line-height:1.5!important}
html[data-abend] main .arrival-grid p{font-size:15px!important; line-height:1.55!important}
html[data-abend] main .plan-legend span{font-size:14px!important}
html[data-abend] main :is(.career-fit, .cinema-prose, .planner-note, .pt-help, .signature-note){font-size:16px!important; line-height:1.6!important}
html[data-abend] .ab-fuss .ab-fuss-brand p{font-size:15px!important; line-height:1.6!important}
html[data-abend] .ab-kapitel-kopf h2{font-size:clamp(34px,4.4vw,60px)!important}
html[data-abend] main .rental-grid h2{font-size:clamp(26px,2.4vw,32px)!important}

/* Startseite: kürzerer Übergang von der Nacht zum Tag, Bewertung bleibt zusammen */
@media (max-width:980px){
  html.ab-home[data-abend] .ab-bisbald{background:linear-gradient(180deg,#262A2E 0%,#F7F6F2 150px,#F7F6F2 100%); padding-top:170px}
  html.ab-home[data-abend] .ab-proof-rating{font-size:38px!important}
  html.ab-home[data-abend] .ab-proof{padding:44px 0 40px}
}
/* Fragen-Köpfe: Luft zwischen Titel und Einleitung, Einleitung in Lesegröße */
html[data-abend] main .qf-heading h2{margin-bottom:16px!important}
html[data-abend] main .qf-heading .qf-intro{font-size:17px!important; line-height:1.6!important; max-width:560px}
/* Fußbereich am Handy */
html[data-abend] .ab-fuss-actions a > span[aria-hidden]{margin-left:8px}
html[data-abend] .ab-fuss-grid a[href^="mailto:"]{white-space:nowrap}
@media (max-width:980px){
  html[data-abend] .ab-fuss::before{height:110px}
  html[data-abend] .ab-fuss-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
}
/* Szenen: unten weich ins Papier auslaufen statt grauer Kante */
html.ab-szene-seite[data-abend] .ab-szene::after{background:linear-gradient(180deg,rgba(247,246,242,0) 0%,rgba(247,246,242,0) calc(100% - 140px),var(--bg,#F7F6F2) 100%),radial-gradient(120% 70% at 0% 0%,rgba(38,42,46,.25),rgba(38,42,46,.78) 70%)}
html.ab-szene-seite[data-abend] .ab-szene{padding-bottom:clamp(150px,14vw,200px)}
@media (max-width:899px){
  html.ab-szene-seite[data-abend] .ab-szene .pm-at-a-glance{grid-template-columns:minmax(0,1fr)}
  html.ab-szene-seite[data-abend] .ab-szene .pm-at-a-glance span{width:auto!important; max-width:none!important; justify-self:stretch; grid-template-columns:minmax(120px,auto) 1fr; align-items:baseline; gap:10px; padding:12px 0 0!important; border-left:0!important}
  html.ab-szene-seite[data-abend] .ab-szene .pm-at-a-glance span + span{border-top:1px solid rgba(247,246,242,.12)!important; border-left:0!important; padding-left:0!important; margin-top:12px}
}
/* Pfeil hinter Linktexten nicht ankleben */
html[data-abend] main a > span[aria-hidden="true"]:last-child:not(:first-child){margin-left:.3em}
@media (min-width:981px){ html.ab-home[data-abend] .ab-bisbald{background:linear-gradient(180deg,#262A2E 0%,#F7F6F2 200px,#F7F6F2 100%); padding-top:230px} }
/* Kino-Bild: Text wandert mit dem sich öffnenden Bildausschnitt, nichts wird angeschnitten */
html[data-abend] main .sm-cine-frame .sm-cine-copy{left:var(--ci,0%); right:var(--ci,0%); bottom:var(--ci,0%); padding-bottom:clamp(40px,5vw,64px)!important; transform:none!important}
/* Gut ankommen: Abstand zwischen Titel und den drei Spalten */
html[data-abend] main .sm-arrive{margin-top:clamp(56px,7vw,96px)!important}
html[data-abend] main .sm-arrive-title{margin:0 0 clamp(22px,3vw,36px)!important}
html[data-abend] main .sm-arrive-grid h3{margin:0 0 8px!important}
html.ab-home[data-abend] .ab-hero .ab-hero-kicker{font-weight:500!important; color:#FFF1D9!important}
html.ab-szene-sf[data-abend] main .sf-dining-stage :is(.ab-zeit,.sf-eyebrow){color:#FFF1D9!important; font-weight:500!important}
@media (max-width:980px){ html.ab-home[data-abend] .ab-hero-shade{background:linear-gradient(180deg,rgba(38,42,46,.55) 0%,rgba(38,42,46,0) 18%),linear-gradient(0deg,rgba(30,33,36,.92) 0%,rgba(30,33,36,.8) 34%,rgba(30,33,36,.55) 62%,rgba(30,33,36,0) 84%)} }
html.ab-szene-sf[data-abend] main .sf-dining-stage.ab-dunkel .sf-dining-copy :is(.ab-zeit,.sf-eyebrow){color:#FFF1D9!important}

/* ================= Speisekarte als gesetzte Menükarte ================= */
html[data-abend] body[data-page="menu"] main article.editorial{max-width:1180px!important}
html[data-abend] body[data-page="menu"] .menu-controls{position:sticky; top:calc(var(--kopf-h,112px) - 2px); z-index:20; margin-inline:calc(-1 * var(--gut,20px)); padding:14px var(--gut,20px) 16px!important; background:color-mix(in srgb,var(--bg,#F7F6F2) 94%,transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid rgba(38,42,46,.1)}
html[data-abend] body[data-page="menu"] .menu-controls [role=tablist]{background:rgba(38,42,46,.06); border-color:rgba(38,42,46,.12)}
html[data-abend] body[data-page="menu"] .menu-controls [role=tab]{font:500 15px var(--sans)!important; color:var(--ink,#262A2E)}
html[data-abend] body[data-page="menu"] .menu-controls [aria-selected=true]{background:#262A2E!important; color:#F7F6F2!important}
html[data-abend] body[data-page="menu"] .menu-section{scroll-margin-top:200px}
html[data-abend] body[data-page="menu"] .menu-item{align-items:baseline; gap:14px}
html[data-abend] body[data-page="menu"] .menu-item > div{flex:1 1 auto; display:grid; grid-template-columns:auto 1fr; column-gap:12px; align-items:baseline}
html[data-abend] body[data-page="menu"] .menu-item > div > h3{grid-column:1; margin:0 0 6px!important}
html[data-abend] body[data-page="menu"] .menu-item > div::after{content:""; grid-column:2; grid-row:1; align-self:baseline; height:0; border-bottom:1px dotted rgba(38,42,46,.35); transform:translateY(-5px)}
html[data-abend] body[data-page="menu"] .menu-item > div > p{grid-column:1 / -1; font-size:15px!important}
html[data-abend] body[data-page="menu"] .menu-item > strong{font:500 16px var(--sans)!important; color:var(--cognac,#874A23)!important; font-variant-numeric:tabular-nums}
@media (min-width:1000px){
  html[data-abend] body[data-page="menu"] .menu-list{gap:0 64px!important}
  html[data-abend] body[data-page="menu"] .menu-section h2{font-size:clamp(36px,3.4vw,50px)!important}
  html[data-abend] body[data-page="menu"] .menu-item h3{font-size:21px!important}
}
@media (max-width:980px){
  html[data-abend] body[data-page="menu"] .menu-controls{position:relative; top:auto; margin-inline:0; padding-inline:0!important; background:none; -webkit-backdrop-filter:none; backdrop-filter:none}
}
html[data-abend] body[data-page="menu"] main .menu-item{display:flex!important; flex-direction:row!important; flex-wrap:nowrap!important}
html[data-abend] body[data-page="menu"] main .menu-item > strong{flex:0 0 auto; margin:0!important; order:2}
@media (max-width:600px){ html[data-abend] body[data-page="menu"] main .menu-item h3{font-size:19px!important} html[data-abend] body[data-page="menu"] main .menu-item > div::after{display:none} }
html[data-abend] body[data-page="menu"] .menu-controls{top:calc(var(--kopf-h,112px) - 6px)}

/* ===== Fußbereich am Handy: zwei Rubriken zum Aufklappen ===== */
html[data-abend] .ab-fuss .ab-fuss-klapp{all:unset; display:block; color:#F7F6F2; font:600 15px/1.6 var(--sans)!important; margin-bottom:4px; cursor:default}
@media (max-width:980px){
  html[data-abend] .ab-fuss-grid{grid-template-columns:minmax(0,1fr)!important; gap:28px!important}
  html[data-abend] .ab-fuss-grid > div{grid-column:auto!important}
  html[data-abend] .ab-fuss-grid > .ab-fuss-kl{gap:0; border-top:1px solid rgba(247,246,242,.14)}
  html[data-abend] .ab-fuss-grid > .ab-fuss-kl + .ab-fuss-kl{margin-top:-28px; border-bottom:1px solid rgba(247,246,242,.14)}
  html[data-abend] .ab-fuss .ab-fuss-klapp{display:flex; justify-content:space-between; align-items:center; min-height:56px; margin:0; cursor:pointer}
  html[data-abend] .ab-fuss .ab-fuss-klapp::after{content:"+"; font:300 24px/1 var(--sans); color:var(--gold); transition:transform .3s var(--ease)}
  html[data-abend] .ab-fuss .ab-fuss-klapp[aria-expanded="true"]::after{transform:rotate(45deg)}
  html[data-abend] .ab-fuss .ab-fuss-klapp:focus-visible{outline:2px solid var(--gold); outline-offset:4px}
  html[data-abend] .ab-fuss-teil{display:flex; flex-direction:column; gap:2px; padding:0 0 18px}
  html[data-abend] .ab-fuss-teil[hidden]{display:none!important}
  html[data-abend] .ab-fuss-grid > div:not(.ab-fuss-kl) > :is(span,a){font-size:16px!important}
  html[data-abend] .ab-fuss-grid > div:first-child img{width:96px!important; height:84px!important}
}

/* ===== Seitenwechsel: Foto wächst zum Titelbild ===== */
::view-transition-group(ab-bild){animation-duration:.62s; animation-timing-function:cubic-bezier(.2,.7,.1,1)}
::view-transition-old(ab-bild),::view-transition-new(ab-bild){height:100%; object-fit:cover; overflow:clip}
@media (prefers-reduced-motion:reduce){ ::view-transition-group(*){animation:none!important} }

/* ===== Galerie: Vollbild mit Wischen ===== */
html[data-abend] img.ab-lb-ziel{cursor:zoom-in}
html[data-abend] img.ab-lb-ziel:focus-visible{outline:3px solid var(--gold); outline-offset:3px}
html.ab-lb-offen{overflow:hidden}
.ab-lb{position:fixed; inset:0; width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; background:#16181B; color:#F7F6F2; overscroll-behavior:contain}
.ab-lb::backdrop{background:rgba(22,24,27,.92)}
.ab-lb[open]{display:grid; grid-template-rows:1fr auto}
.ab-lb-buehne{display:flex; align-items:center; justify-content:center; padding:max(64px,env(safe-area-inset-top)) clamp(8px,6vw,96px) 8px; min-height:0}
.ab-lb-buehne img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; border-radius:6px; box-shadow:0 30px 80px -30px rgba(0,0,0,.8); animation:abLbIn .35s cubic-bezier(.2,.7,.1,1)}
@keyframes abLbIn{from{opacity:0; transform:scale(.97)}}
.ab-lb-unten{display:flex; justify-content:space-between; gap:18px; margin:0; padding:14px clamp(20px,6vw,96px) max(22px,env(safe-area-inset-bottom)); font:italic 400 18px/1.4 "Playfair Display",Georgia,serif}
.ab-lb-zahl{font:500 14px/1.4 "DM Sans",system-ui,sans-serif; font-style:normal; color:rgba(247,246,242,.7); white-space:nowrap}
.ab-lb button{position:absolute; display:grid; place-items:center; width:52px; height:52px; border-radius:50%; border:1px solid rgba(247,246,242,.35); background:rgba(38,42,46,.7); color:#F7F6F2; font:400 22px/1 "DM Sans",system-ui,sans-serif; cursor:pointer; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.ab-lb button:hover{background:rgba(38,42,46,.95)} .ab-lb button:focus-visible{outline:2px solid #F3C47E; outline-offset:3px}
.ab-lb-zu{top:max(12px,env(safe-area-inset-top)); right:12px; font-size:28px!important}
.ab-lb-pfeil{top:50%; transform:translateY(-50%)} .ab-lb-zur{left:16px} .ab-lb-vor{right:16px}
@media (max-width:700px){ .ab-lb-pfeil{top:auto; bottom:max(64px,calc(env(safe-area-inset-bottom) + 56px)); transform:none; width:46px; height:46px} .ab-lb-buehne{padding-inline:0; padding-bottom:64px} .ab-lb-buehne img{border-radius:0} .ab-lb-unten{padding-right:130px} }
html[data-abend] .ab-sr{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
/* Startfilm: Platz für Öffnungsstatus und Links von Anfang an reservieren, damit der Kopf beim Laden nicht springt */
html.ab-home[data-abend] .ab-hero-actions{min-height:44px}
html.ab-home[data-abend] .ab-hero-actions a{min-height:44px; display:inline-flex; align-items:center}
@media (max-width:980px){ html.ab-home[data-abend] .ab-hero-status{min-height:calc(2 * 1.6em + 4px); align-content:flex-start} }

/* Begrüßung mit Logo (nur Startseite, einmal pro Besuch) */
.ab-intro{position:fixed;inset:0;z-index:2147483600;display:grid;place-items:center;background:radial-gradient(ellipse 62% 55% at 50% 56%,#3b3f43 0%,#2a2d30 55%,#1f2224 100%);cursor:pointer;animation:ab-intro-out .75s 2.05s cubic-bezier(.6,0,.2,1) forwards}
.ab-intro.ab-intro-gone{animation:ab-intro-out .45s cubic-bezier(.6,0,.2,1) forwards}
.ab-intro-logo{position:relative;display:block;width:min(330px,72vw);aspect-ratio:1}
.ab-intro-logo img{position:absolute;inset:0;width:100%;height:100%;display:block}
.ab-intro-t{clip-path:inset(0 100% 54% 0);animation:ab-intro-text 1.05s .15s cubic-bezier(.65,0,.25,1) forwards}
.ab-intro-a{clip-path:inset(46% 0 0 0);opacity:0;transform-origin:80% 47%;transform:translateY(-22px) rotate(-9deg);animation:ab-intro-anchor 1.35s .6s cubic-bezier(.34,1.45,.52,1) forwards}
@keyframes ab-intro-text{to{clip-path:inset(0 0 54% 0)}}
@keyframes ab-intro-anchor{25%{opacity:1}to{opacity:1;transform:none}}
@keyframes ab-intro-out{to{opacity:0;visibility:hidden;transform:scale(1.025)}}
@media (prefers-reduced-motion:reduce){.ab-intro{display:none}}
/* Bildansicht: weich ein- und ausblenden statt springen */
html.ab-home{scrollbar-gutter:stable}
.harbor-lightbox{opacity:0;transform:translateY(10px) scale(.97);transition:opacity .28s ease,transform .42s cubic-bezier(.2,.75,.2,1)}
.harbor-lightbox.is-in{opacity:1;transform:none}
.harbor-lightbox::backdrop{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(20,22,24,.9)!important;opacity:0;transition:opacity .28s ease}
.harbor-lightbox.is-in::backdrop{opacity:1}
.harbor-lightbox{width:min(1100px,94vw);max-width:none;max-height:92dvh;margin:auto;padding:12px 12px 16px;border:0;border-radius:18px;background:#25282b;color:#f4f1ea;box-shadow:0 30px 80px rgba(0,0,0,.45);overflow:hidden}
.harbor-lightbox img{display:block;width:100%;height:auto;max-height:calc(92dvh - 104px);object-fit:contain;border-radius:12px;background:#1d2022}
.harbor-lightbox p{margin:14px 6px 0;font:400 clamp(19px,2.2vw,24px)/1.35 var(--serif,Georgia,serif);text-align:left;color:#f4f1ea}
.harbor-lightbox .photo-close{position:absolute;top:22px;right:22px;z-index:2;min-height:44px;padding:0 18px;border:0;border-radius:999px;background:rgba(20,22,24,.74);color:#fff;font:600 14px/44px inherit;letter-spacing:.04em;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.25)}
.harbor-lightbox .photo-close:focus-visible{outline:2px solid #f4f1ea;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.harbor-lightbox,.harbor-lightbox::backdrop{transition:none}}
html.ab-intro-pending::after{content:"";position:fixed;inset:0;z-index:2147483599;background:#2a2d30;animation:ab-pending-off 0s 3.2s forwards}
@keyframes ab-pending-off{to{visibility:hidden;opacity:0}}

/* ===== Fußbereich: ruhiger, einheitlicher Abstand (20261017) ===== */
html[data-abend] .ab-fuss-grid > div,
html[data-abend] .ab-fuss-grid .ab-fuss-teil{display:flex; flex-direction:column; align-items:flex-start; gap:0}
html[data-abend] .ab-fuss-grid > div > b{margin:0 0 10px!important; line-height:1.6!important}
html[data-abend] .ab-fuss-grid > div > span{line-height:1.75!important; margin-bottom:8px}
html[data-abend] .ab-fuss-grid a{padding:0!important; align-items:center}
html[data-abend] .ab-fuss .footer-privacy{margin:0!important; padding:0!important}
html[data-abend] .ab-fuss .footer-privacy button{min-height:44px!important; line-height:44px!important}
html[data-abend] .ab-fuss-brand p a{display:block!important; margin-top:10px; padding:0!important; min-height:0!important}
@media (min-width:981px){
  html[data-abend] .ab-fuss .ab-fuss-klapp{min-height:0!important; margin:0 0 10px!important; line-height:1.6!important}
  html[data-abend] .ab-fuss-grid{grid-template-columns:minmax(120px,.8fr) repeat(4,minmax(0,1fr))!important; gap:40px 48px!important; padding-top:72px; padding-bottom:56px}
  html[data-abend] .ab-fuss-grid img{width:140px; height:120px}
}
@media (min-width:981px) and (max-width:1199px){
  html[data-abend] .ab-fuss-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:32px 36px!important}
  html[data-abend] .ab-fuss-grid > div:first-child{grid-column:1 / -1}
  html[data-abend] .ab-fuss-grid img{width:110px; height:90px}
}
@media (max-width:980px){
  html[data-abend] .ab-fuss-grid > .ab-fuss-kl{align-items:stretch}
  html[data-abend] .ab-fuss-grid .ab-fuss-teil{padding-bottom:14px; align-items:flex-start}
}

/* ---------- Abendlinie 17.10.2026: feine Goldlinie 17–21 Uhr statt Birkenrinde ---------- */
html[data-abend][lang] .ab-kopf{--uhr-c:150,104,52}
html[data-abend][lang].ab-film .ab-kopf:not(.is-solid),
html[data-abend][lang][data-tone="dunkel"] .ab-kopf,
html[data-abend][lang][data-hour="22"] .ab-kopf:not(.is-solid){--uhr-c:243,206,150}
html[data-abend][lang] .ab-uhr{height:30px}
html[data-abend][lang] .ab-uhr-line{top:6px; height:1px; border-radius:0; filter:none!important; opacity:1!important;
  background:linear-gradient(90deg,rgba(var(--uhr-c),.08),rgba(var(--uhr-c),.42) 8%,rgba(var(--uhr-c),.42) 92%,rgba(var(--uhr-c),.08))!important}
html[data-abend][lang] .ab-uhr-line::before{content:""; position:absolute; left:0; right:0; top:-3px; height:7px; pointer-events:none;
  background:
   linear-gradient(rgba(var(--uhr-c),.75),rgba(var(--uhr-c),.75)) 0 0/1px 7px no-repeat,
   linear-gradient(rgba(var(--uhr-c),.5),rgba(var(--uhr-c),.5)) 25% 2px/1px 3px no-repeat,
   linear-gradient(rgba(var(--uhr-c),.5),rgba(var(--uhr-c),.5)) 50% 2px/1px 3px no-repeat,
   linear-gradient(rgba(var(--uhr-c),.5),rgba(var(--uhr-c),.5)) 75% 2px/1px 3px no-repeat,
   linear-gradient(rgba(var(--uhr-c),.75),rgba(var(--uhr-c),.75)) 100% 0/1px 7px no-repeat}
html[data-abend][lang] .ab-uhr-fill{top:5.5px; height:2px; border-radius:2px; width:calc(var(--ab-pos,0) * 100%); transition:width .9s var(--ease);
  background:linear-gradient(90deg,rgba(var(--uhr-c),0),rgba(var(--uhr-c),.95))}
html[data-abend][lang] .ab-uhr-dot{top:2px; width:9px; height:9px; margin-left:-4.5px; background:rgb(var(--uhr-c));
  box-shadow:0 0 0 3px rgba(var(--uhr-c),.18),0 0 14px 3px rgba(var(--uhr-c),.45)}
html[data-abend][lang] .ab-uhr-label{top:13px; font:500 13px/1 var(--sans); letter-spacing:.02em}
html[data-abend][lang] .ab-uhr-label i{font:italic 400 15px/1 var(--serif); color:rgb(var(--uhr-c)); margin-right:7px; font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:no-preference){
  html[data-abend][lang] .ab-uhr-dot{animation:abGlut 3.6s ease-in-out infinite}
  @keyframes abGlut{0%,100%{box-shadow:0 0 0 3px rgba(var(--uhr-c),.18),0 0 12px 2px rgba(var(--uhr-c),.38)}50%{box-shadow:0 0 0 4px rgba(var(--uhr-c),.22),0 0 20px 5px rgba(var(--uhr-c),.55)}}
}
/* Rechner: in der schwebenden Menüleiste läuft die Linie innen am unteren Rand mit – nichts wird verdeckt */
@media (min-width:981px){
  html[data-abend][lang] .ab-kopf.is-solid .ab-uhr{position:absolute; top:75px; left:50%; transform:translateX(-50%); margin:0; max-width:none; height:6px;
    width:min(1200px,calc(100% - 32px))}
  html[data-abend][lang] .ab-kopf.is-solid .ab-uhr-line,
  html[data-abend][lang] .ab-kopf.is-solid .ab-uhr-fill{left:112px}
  html[data-abend][lang] .ab-kopf.is-solid .ab-uhr-line{right:30px}
  html[data-abend][lang] .ab-kopf.is-solid .ab-uhr-fill{width:calc(var(--ab-pos,0) * (100% - 142px))}
  html[data-abend][lang] .ab-kopf.is-solid .ab-uhr-dot{left:calc(112px + var(--ab-pos,0) * (100% - 142px))}
  html[data-abend][lang] .ab-kopf.is-solid .ab-uhr-label{top:22px; right:30px; padding:6px 12px; border-radius:999px; background:rgba(247,246,242,.88);
    -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:0 8px 24px -16px rgba(38,42,46,.5),inset 0 0 0 1px rgba(255,255,255,.6)}
}

/* ---------- Reservierung 17.10.2026: echtes Bild vom Gastraum im Kopf ---------- */
html.ab-reservierung[data-abend] main .reservation-heading.ab-kompakt{padding-bottom:clamp(150px,16vw,210px)!important; min-height:min(78vh,720px); align-content:center}
html.ab-reservierung[data-abend] main .reservation-heading.ab-kompakt::before{inset:0; filter:none; opacity:1; transform:none;
  background:url('/assets/birken-gastraum-1659.webp') 62% 55%/cover no-repeat}
html.ab-reservierung[data-abend] main .reservation-heading.ab-kompakt::after{
  background:linear-gradient(90deg,rgba(24,26,29,.9) 0%,rgba(24,26,29,.72) 38%,rgba(24,26,29,.25) 72%,rgba(24,26,29,.15) 100%),
             linear-gradient(180deg,rgba(24,26,29,.55) 0%,rgba(24,26,29,0) 28%,rgba(24,26,29,0) 70%,rgba(24,26,29,.45) 100%)}
html.ab-reservierung[data-abend] main .reservation-heading.ab-kompakt .reservation-closure-note{background:rgba(24,26,29,.55)!important; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
@media (max-width:899px){
  html.ab-reservierung[data-abend] main .reservation-heading.ab-kompakt{min-height:0; padding-top:clamp(300px,72vw,420px)!important}
  html.ab-reservierung[data-abend] main .reservation-heading.ab-kompakt::before{background-image:url('/assets/birken-gastraum-960.webp'); background-position:50% 0; background-size:auto clamp(340px,82vw,480px); background-color:#262A2E}
  html.ab-reservierung[data-abend] main .reservation-heading.ab-kompakt::after{background:linear-gradient(180deg,rgba(24,26,29,.5) 0%,rgba(24,26,29,0) 22%,rgba(24,26,29,.15) clamp(200px,48vw,300px),#262A2E clamp(340px,82vw,480px))}
}

/* ---------- Reservierung als eine Seite 17.10.2026: Formular direkt eingebettet, Infos darunter ---------- */
html.ab-reservierung[data-abend] #reservation-tool.reserve-host{background:none!important; border:0!important; box-shadow:none!important; padding:0!important; border-radius:0!important}
html.ab-reservierung[data-abend] main > article.editorial{max-width:1180px!important}
html.ab-reservierung[data-abend] .reserve-frame{display:block; width:100%; height:1600px; border:0; background:transparent; color-scheme:light; transition:opacity .5s ease}
html.ab-reservierung[data-abend] .reserve-fallback{margin:14px 0 0!important; font-size:14px!important; color:var(--muted)!important; text-align:center}
html.ab-reservierung[data-abend] .reserve-fallback a{color:var(--ink)!important; text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:3px}
html.ab-reservierung[data-abend] .ab-res-infos{padding:clamp(56px,8vw,110px) var(--gut,20px) clamp(64px,9vw,120px)}
html.ab-reservierung[data-abend] .ab-res-infos-in{max-width:972px; margin:0 auto; display:grid; gap:18px}
html.ab-reservierung[data-abend] .ab-res-infos h2{font:500 clamp(30px,3.6vw,46px)/1.1 "Playfair Display",Georgia,serif!important; color:var(--ink)!important; margin:0!important; text-wrap:balance}
html.ab-reservierung[data-abend] .ab-res-infos .eyebrow{color:#874A23!important; margin:0!important}
html.ab-reservierung[data-abend] .ab-res-lede{max-width:640px; color:var(--muted)!important; margin:0!important}
html.ab-reservierung[data-abend] .ab-res-infos .arrival-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:12px}
html.ab-reservierung[data-abend] .ab-res-infos .arrival-grid > div{background:#FBFAF6; border:1px solid rgba(38,42,46,.08); border-radius:22px; padding:24px 24px 26px}
html.ab-reservierung[data-abend] .ab-res-infos .arrival-grid h3{font:500 22px/1.2 "Playfair Display",Georgia,serif!important; margin:0 0 10px!important; color:var(--ink)!important}
html.ab-reservierung[data-abend] .ab-res-infos .actions{display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; margin-top:6px}
html.ab-reservierung[data-abend] .ab-res-feier{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px; margin-top:22px; padding:24px 28px; border-radius:22px; background:#262A2E; color:#F7F6F2}
html.ab-reservierung[data-abend] .ab-res-feier p{margin:0!important; color:rgba(247,246,242,.88)!important; max-width:620px}
html.ab-reservierung[data-abend] .ab-res-feier a{color:#E3B97C!important; font-weight:500; text-decoration:none}
@media (max-width:899px){
  html.ab-reservierung[data-abend] .ab-res-infos .arrival-grid{grid-template-columns:1fr}
  html.ab-reservierung[data-abend] main > article.editorial{padding:0 12px!important}
}
html.ab-reservierung[data-abend] .ab-res-infos .arrival-grid p{margin:0!important}
html.ab-reservierung[data-abend] #reservation-tool{scroll-margin-top:110px}

/* ---------- Feinschliff 17.10.2026 (Optik-Prüfung): Knöpfe, Abstände, gleiche Kartenhöhen ---------- */
/* Hafenbar: Paket-Überschriften gleich hoch, damit die Preise auf einer Linie stehen */
@media (min-width:900px){html[data-abend] main .rental-grid article h2{min-height:2.3em}}
/* Kontakt & ähnliche: Text nach einer Knopfreihe bekommt Luft */
html[data-abend] main .actions + p{margin-top:18px!important}
/* Pâtisserie: „Torte anfragen“ im selben Pillen-Stil wie die übrigen Knöpfe */
html[data-abend] main .signature-action{display:inline-flex!important; align-items:center; min-height:44px; padding:0 22px!important; border-radius:999px!important}
/* Knopftexte nicht mehr mit einzelnem Pfeil umbrechen */
html[data-abend] main .button{text-wrap:balance}
/* Kleine Bildstrecken (2–3 Fotos) füllen am Rechner die volle Breite statt zweier kleiner Karten links */
@media (min-width:900px){
  html[data-abend] .sm-flow:not(.sm-3d):not(:has(.sm-slide:nth-child(4))){display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:16px; overflow:visible; scroll-snap-type:none}
  html[data-abend] .sm-flow:not(.sm-3d):not(:has(.sm-slide:nth-child(3))) .sm-slide{aspect-ratio:4/3}
  html[data-abend] .sm-flow:not(.sm-3d):has(.sm-slide:nth-child(3)):not(:has(.sm-slide:nth-child(4))) .sm-slide{aspect-ratio:4/5}
  html[data-abend] .sm-flow:not(.sm-3d):not(:has(.sm-slide:nth-child(4))) + .sm-flow-nav{display:none!important}
}
/* Startseite: SaaleMomente-Hinweis unter dem Gutschein bündig zur Textspalte */
html.ab-home[data-abend] .ab-gift-brand{justify-content:flex-start; align-self:flex-start; text-align:left}
/* Ablauf-Schritte am Handy: weniger Einzug, längere Zeilen */
@media (max-width:899px){html[data-abend] main .sm-steps li{padding-left:24px}}

/* Galerie-Film: eigenes Standbild und Abspiel-/Pause-Knopf wie beim Startfilm, keine Browser-Bedienleiste */
html[data-abend] .gallery-film-stage{position:relative!important}
html[data-abend] .gallery-film-stage video{cursor:pointer}
html[data-abend] .gallery-film-toggle{position:absolute; z-index:2; right:18px; bottom:18px; width:52px; height:52px; border-radius:50%; border:1px solid rgba(247,246,242,.55); background:rgba(38,42,46,.45); display:flex; align-items:center; justify-content:center; gap:4px; cursor:pointer; padding:0; -webkit-tap-highlight-color:transparent; transition:background-color .2s ease, transform .2s ease}
html[data-abend] .gallery-film-toggle[hidden]{display:none}
html[data-abend] .gallery-film-toggle:hover{background:rgba(38,42,46,.7)}
html[data-abend] .gallery-film-toggle:focus-visible{outline:2px solid #F7F6F2; outline-offset:3px}
html[data-abend] .gallery-film-toggle i{display:block; width:3px; height:15px; background:#F7F6F2}
html[data-abend] .gallery-film-toggle[aria-pressed="true"] i:first-child{width:0; height:0; background:none; border-left:13px solid #F7F6F2; border-top:8px solid transparent; border-bottom:8px solid transparent; margin-left:4px}
html[data-abend] .gallery-film-toggle[aria-pressed="true"] i:last-child{display:none}
@media (max-width:700px){html[data-abend] .gallery-film-toggle{right:14px; bottom:14px}}