/* Handschrift (31.10.2026): Stile zu handschrift.js. Nur Licht, Fokus und Bewegung, keine Änderung an Text oder Aufbau. */

/* Lampenlicht: ein warmer Lichtkegel fällt von oben auf die Überschrift, eine feine Linie zieht sich auf */
.hs-lampe{position:relative; isolation:isolate}
.hs-lampe::before{content:""; position:absolute; z-index:-1; left:-50px; top:-2.4em; width:min(560px,85vw); height:5em; pointer-events:none;
  background:radial-gradient(closest-side at 50% 50%, rgba(243,196,126,.42) 0%, rgba(243,196,126,.16) 55%, rgba(243,196,126,0) 100%);
  opacity:0; transform:scaleX(.4); transform-origin:50% 50%; transition:opacity 1.4s ease .1s, transform 1.6s cubic-bezier(.2,.7,.1,1) .1s}
.hs-lampe::after{content:""; position:absolute; left:0; top:-.3em; width:min(220px,40vw); height:1px; pointer-events:none;
  background:linear-gradient(90deg, rgba(200,138,85,0), #C88A55 30%, #F3C47E 50%, #C88A55 70%, rgba(200,138,85,0));
  box-shadow:0 0 12px 1px rgba(243,196,126,.55); transform:scaleX(0); transform-origin:left; transition:transform 1.2s cubic-bezier(.2,.7,.1,1)}
.hs-lampe.hs-an::before{opacity:1; transform:scaleX(1)}
.hs-lampe.hs-an::after{transform:scaleX(1)}
/* auf dunklem Grund etwas heller */
.ab-dunkel .hs-lampe::before, [class*="dunkel"] .hs-lampe::before{background:radial-gradient(closest-side, rgba(243,196,126,.3) 0%, rgba(243,196,126,.1) 55%, rgba(243,196,126,0) 100%)}

/* Fokus-Karten: die gezeigte Karte bleibt klar, die übrigen treten leicht zurück */
.hs-fokus > *{transition:filter .45s ease, transform .45s ease, opacity .45s ease}
.hs-fokus.hs-fokus-an > :not(.hs-fokus-ich){filter:blur(2px) saturate(.75) brightness(.8); transform:scale(.98)}
.hs-fokus.hs-fokus-an > .hs-fokus-ich{transform:scale(1.015)}

/* Lichtschein: ein weicher Lichtfleck folgt der Maus, die Karte neigt sich kaum merklich */
.hs-schein:not(.hs-schein-flach){transform:perspective(900px) rotateX(var(--hs-rx,0deg)) rotateY(var(--hs-ry,0deg)); transition:transform .35s ease}
.hs-schein::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:3; opacity:0; transition:opacity .35s ease;
  background:radial-gradient(420px circle at var(--hs-x,50%) var(--hs-y,50%), rgba(255,244,222,.2), rgba(255,244,222,0) 45%)}
.hs-schein.hs-schein-an::after{opacity:1}

/* Lichtkante: eine feine goldene Linie wandert um Karten (SaaleSpa) */
@property --hs-w{syntax:'<angle>'; inherits:false; initial-value:0deg}
.hs-kante{position:relative}
.hs-kante::before{content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; pointer-events:none; z-index:3;
  background:conic-gradient(from var(--hs-w), rgba(200,160,100,.18) 0deg, rgba(200,160,100,.18) 230deg, #E8C895 300deg, #FFF0D2 330deg, #E8C895 345deg, rgba(200,160,100,.18) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation:hs-kreisen 6s linear infinite}
.vs-saison-card.hs-kante::before{background:conic-gradient(from var(--hs-w), rgba(168,124,70,.22) 0deg, rgba(168,124,70,.22) 230deg, #B48A4E 300deg, #E8C895 330deg, #B48A4E 345deg, rgba(168,124,70,.22) 360deg)}
@keyframes hs-kreisen{to{--hs-w:360deg}}

/* WebGL-Flächen */
.hs-gl{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; display:block}
.hs-gl.hs-unter{z-index:0}
.hs-gl.hs-unter ~ *{position:relative; z-index:1}
.hs-gl.hs-ueber{z-index:2}

/* Abfahrtstafel (Reisebüro) */
.hs-tafel{display:inline-grid; grid-template-columns:auto auto; align-items:center; gap:10px 14px; margin-top:22px; padding:14px 16px 14px 18px; border-radius:14px;
  background:#0F2433; color:#F4E7CC; text-decoration:none!important; box-shadow:0 18px 40px -24px rgba(7,29,43,.8), inset 0 0 0 1px rgba(232,200,149,.18)}
.hs-tafel-kopf{grid-column:1 / -1; display:flex; justify-content:space-between; gap:24px; font:600 11px/1 "DM Sans",system-ui,sans-serif; letter-spacing:.22em; text-transform:uppercase; color:rgba(232,200,149,.85)}
.hs-tafel-zeile{display:flex; gap:3px}
.hs-klappe{position:relative; display:inline-grid; place-items:center; width:1.15em; height:1.55em; border-radius:4px; overflow:hidden;
  background:linear-gradient(180deg,#1B3446 0 49%,#122838 51% 100%); font:600 clamp(18px,2vw,24px)/1 "DM Sans",system-ui,sans-serif; color:#F7EBD2; text-transform:uppercase}
.hs-klappe::after{content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:rgba(0,0,0,.45)}
.hs-klappe.hs-klapp{animation:hs-klapp .11s ease-in}
@keyframes hs-klapp{0%{transform:rotateX(0)}50%{transform:rotateX(-80deg); filter:brightness(.7)}100%{transform:rotateX(0)}}
.hs-tafel-pfeil{font-size:20px; color:#E8C895; transition:transform .3s}
.hs-tafel:hover .hs-tafel-pfeil{transform:translate(2px,-2px)}
.hs-tafel-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
@media (max-width:420px){.hs-klappe{width:1.02em; font-size:17px}.hs-tafel{gap:8px 10px; padding:12px}}

@media (prefers-reduced-motion:reduce){
  .hs-kante::before{animation:none}
  .hs-lampe::before,.hs-lampe::after,.hs-fokus > *,.hs-schein{transition:none}
}

/* Folienglanz auf der Gutschein-Vorschau: beim Erscheinen zieht einmal ein Glanz darüber, mit der Maus neigt sie sich */
.hs-folie{transform:perspective(1000px) rotateX(var(--hs-rx,0deg)) rotateY(var(--hs-ry,0deg)); transition:transform .4s ease, box-shadow .4s ease; overflow:hidden}
.hs-folie::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:4; mix-blend-mode:soft-light;
  background:linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,246,220,.75) 45%, rgba(232,200,149,.55) 50%, rgba(255,255,255,0) 62%) no-repeat;
  background-size:250% 100%; background-position:120% 0; opacity:0}
.hs-folie.hs-folie-an::after{animation:hs-glanz 2.2s cubic-bezier(.3,.6,.2,1) .3s 1 both}
.hs-folie.hs-folie-hand::after{animation:none; opacity:1; background:radial-gradient(360px circle at var(--hs-x,50%) var(--hs-y,50%), rgba(255,246,220,.6), rgba(232,200,149,.25) 30%, rgba(255,255,255,0) 60%)}
.hs-folie.hs-folie-hand{box-shadow:0 40px 70px -40px rgba(20,16,12,.65)}
@keyframes hs-glanz{0%{opacity:1; background-position:120% 0}100%{opacity:1; background-position:-40% 0}}

/* Speisekarte: kleines Foto am Gericht, auf dem Desktop großes Foto an der Maus */
html[data-abend][lang] body main .mb-dish.hs-mit-foto{position:relative; padding-left:66px!important; min-height:64px}
main .mb-dish.hs-mit-foto .hs-mini{position:absolute; left:0; top:16px; width:52px; height:52px; border-radius:50%; object-fit:cover; box-shadow:0 6px 16px -8px rgba(0,0,0,.5)}
.hs-teller-bild{position:fixed; left:0; top:0; z-index:60; width:240px; height:300px; object-fit:cover; border-radius:16px; pointer-events:none; opacity:0; box-shadow:0 30px 60px -24px rgba(0,0,0,.55); transition:opacity .25s ease}
.hs-teller-bild.hs-an{opacity:1}

/* Hafenbar: Glühen auf den echten Glühbirnen */
.hs-lichter{position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; animation:hs-lichter-an 1.2s ease 1.6s both}
@keyframes hs-lichter-an{from{opacity:0}to{opacity:1}}
.hs-gluehen{position:absolute; left:0; top:0; width:var(--hs-g,30px); height:var(--hs-g,30px); margin:calc(var(--hs-g,30px) / -2) 0 0 calc(var(--hs-g,30px) / -2); border-radius:50%; pointer-events:none; z-index:1;
  background:radial-gradient(circle, rgba(255,226,160,.95) 0%, rgba(255,196,110,.55) 22%, rgba(255,180,90,.18) 48%, rgba(255,170,80,0) 70%); mix-blend-mode:screen;
  animation:hs-glimmen 4s ease-in-out infinite}
@keyframes hs-glimmen{0%,100%{opacity:.75}45%{opacity:1}60%{opacity:.6}}

/* Reisebüro: Tage bis zur Abfahrt */
.hs-countdown{display:inline-flex; align-items:center; gap:8px; margin:8px 0 4px!important; padding:5px 12px 5px 10px; border-radius:999px; font:600 13px/1.2 "DM Sans",system-ui,sans-serif!important; color:#0F2433!important; background:rgba(232,200,149,.32); width:max-content; max-width:100%}
.hs-countdown::before{content:""; width:7px; height:7px; border-radius:50%; background:#B48A4E; box-shadow:0 0 0 3px rgba(180,138,78,.2)}
.hs-countdown.hs-bald::before{background:#C0612F; box-shadow:0 0 0 3px rgba(192,97,47,.2); animation:hs-puls 2s ease-in-out infinite}
@keyframes hs-puls{50%{box-shadow:0 0 0 6px rgba(192,97,47,0)}}

@media (prefers-reduced-motion:reduce){ .hs-folie.hs-folie-an::after,.hs-gluehen,.hs-countdown.hs-bald::before{animation:none} .hs-gluehen{opacity:.85} }