/* Grundstil der Seite (aus dem Claude-Design übernommen). Seitenspezifische
   Gestaltung steht als Inline-Style direkt im HTML, wie im Prototyp. */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/fonts/bricolage-grotesque-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html{scroll-behavior:smooth}
html,body{margin:0;background:#F2E6CF;color:#2E1E14;font-family:'Bricolage Grotesque',system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:#2E1E14;text-decoration:none}
a:hover{color:#AB4217}
::selection{background:#FCAF17;color:#2E1E14}
img{display:block}
button:focus:not(:focus-visible),a:focus:not(:focus-visible),[role="button"]:focus:not(:focus-visible){outline:none !important}
[hidden]{display:none !important}

@keyframes kjgpulse{0%{box-shadow:0 0 0 0 rgba(252,175,23,0.7)}100%{box-shadow:0 0 0 7px rgba(252,175,23,0)}}
@keyframes kjgsteam{0%{transform:translateY(0) scaleX(1);opacity:0}25%{opacity:.8}100%{transform:translateY(-14px) scaleX(1.4);opacity:0}}
@keyframes kjgjam{0%,100%{transform:translateX(0)}50%{transform:translateX(-2px)}}
@keyframes kjgspin{to{transform:rotate(360deg)}}
@keyframes kjgbusbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes kjghead{0%,100%{transform:translateY(0)}50%{transform:translateY(-14%)}}
@keyframes kjgpuff{0%{transform:translate(0,0) scale(0.4);opacity:0}20%{opacity:0.9}100%{transform:translate(-28px,-16px) scale(1.5);opacity:0}}
@keyframes kjgbubble{0%{transform:scale(0.2);opacity:0}60%{transform:scale(1.08);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes kjgfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media (prefers-reduced-motion: reduce){[data-jam],[data-steam],[data-sign],[data-wheel],[data-busbody],[data-head]{animation:none !important}[data-lagerdot]{animation:none !important}html{scroll-behavior:auto}}

/* Zustände, die sich nach Datum oder Status ändern (siehe assets/js/flags.js).
   data-when="lager offen" heißt: nur zeigen, wenn beide Bedingungen gelten. */
html:not(.f-lager) [data-when~="lager"],
html:not(.f-nolager) [data-when~="nolager"],
html:not(.f-abreise) [data-when~="abreise"],
html:not(.f-noabreise) [data-when~="noabreise"],
html:not(.f-brief) [data-when~="brief"],
html:not(.f-offen) [data-when~="offen"],
html:not(.f-bald) [data-when~="bald"],
html:not(.f-frei) [data-when~="frei"],
html:not(.f-voll) [data-when~="voll"]{display:none !important}

/* Breakpoint aus dem Design: bis 1080px Burger-Menü und mobile Varianten. */
@media (max-width:1080px){[data-when~="desk"]{display:none !important}}
@media (min-width:1081px){[data-when~="mobile"]{display:none !important}}
/* Lagerfeuer-Szene (Ehrenamt): feste Positionen je Breite statt min()/clamp() mit Prozent, das Safari auf dem iPhone falsch berechnet hat */
.kjg-moon{right:9%;top:12%}
.kjg-fx{left:50%}
.kjg-log-l{left:35%}
.kjg-log-r{left:58%}
.kjg-sign{left:66%;width:19%;min-width:150px;max-width:250px}
@media (max-width:640px){
  .kjg-moon{right:7%;top:3%;width:44px !important}
  .kjg-fx{left:30%}
  .kjg-log-l{left:calc(30% - 110px)}
  .kjg-log-r{left:calc(30% + 44px)}
  .kjg-sign{left:auto;right:4%;width:150px}
}
@media (max-width:380px){.kjg-ehren-h{font-size:13vw !important}}
/* Hero: zweiter (Text-)Button nur am großen Bildschirm */
@media (max-width:1080px){.kjg-cta-2{display:none !important}}