/* Shine Up — Carte. Design aus MENU FNL 2.pdf: Leinenpapier, Blaetter,
   Schreibschrift-Ueberschriften. Keine externen Assets (DSGVO). */

@font-face{font-family:"Fira";src:url("fonts/fira-regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Fira";src:url("fonts/fira-semibold.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Fira Cond";src:url("fonts/fira-cond-bold.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap}

:root{
  --paper:#E6DCC1;      /* Papierton aus dem PDF gemessen */
  --ink:#2E2219;
  --ink-2:#6d5b47;
  --gold:#C97B22;       /* Orange des Verlaufsbalkens, auf Papier lesbar abgedunkelt */
  --rule:rgba(46,34,25,.22);
  --dark:#12100c;       /* Kopfband, damit das gelbe Logo Kontrast hat */
  --yellow:#FCD906;
  --wrap:46rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper) url("paper.jpg") repeat;
  background-size:420px;
  color:var(--ink);
  font:400 1rem/1.5 "Fira",system-ui,sans-serif;
  font-variant-numeric:tabular-nums;
  overflow-x:hidden;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:10;
  background:var(--yellow);color:#000;padding:.6rem 1rem;font-weight:600;
}
.skip:focus{left:.5rem;top:.5rem}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- Blattwerk aus dem PDF ----------
   Reine Deko hinter dem Inhalt, nimmt keine Klicks weg. */

.deco{height:auto;opacity:.5;pointer-events:none;user-select:none}
.deco-top{position:absolute;z-index:0;top:0;right:-.9rem;width:min(78vw,640px)}
.deco-bottom{position:fixed;z-index:0;bottom:0;left:0;width:min(26vw,190px)}

/* ---------- Hero ----------
   Kopfband in Kartenschwarz: das gelbe Logo bleibt wie gehabt, huepft in
   Dauerschleife und braucht dafuer einen dunklen Grund. */

.hero{
  position:relative;z-index:2;
  background:var(--dark);
  padding:clamp(1.5rem,6vw,2.8rem) .9rem clamp(1.2rem,5vw,2.2rem);
}
.logo-wrap{max-width:min(100%,30rem);margin:0 auto;container-type:inline-size}
.logo-wrap svg{display:block;width:100%;height:auto;color:var(--yellow);overflow:visible}

.tagline{
  margin:clamp(.5rem,2.4cqw,1rem) 0 0;
  text-align:center;line-height:1;
  font-family:"Fira Cond","Fira",sans-serif;font-weight:700;
  font-size:clamp(.6rem,3.4cqw,1rem);
  letter-spacing:.54em;text-indent:.54em;
  color:#9a9182;text-transform:uppercase;
}

/* SHINE steht, UP springt ab und landet wieder — endlos. */
#up{
  transform-box:fill-box;transform-origin:bottom center;
  animation:hop 2.2s cubic-bezier(.34,.06,.36,1) infinite;
}
@keyframes hop{
  0%     {transform:translateY(0)    scaleY(1)}
  10%    {transform:translateY(0)    scaleY(.90)}
  30%    {transform:translateY(-36%) scaleY(1.05)}
  44%    {transform:translateY(-38%) scaleY(1)}
  62%    {transform:translateY(0)    scaleY(.92)}
  70%    {transform:translateY(0)    scaleY(1.03)}
  78%,100%{transform:translateY(0)   scaleY(1)}
}

/* ---------- Kategorienliste (aufklappbar) ---------- */

main{position:relative;z-index:1;max-width:var(--wrap);margin:0 auto;
  padding:clamp(2.2rem,11vw,4rem) .9rem 1rem}

.cat{position:relative;z-index:1;border-bottom:1px solid var(--rule)}
.cat-h{margin:0}
.cat:first-of-type{border-top:1px solid var(--rule)}

.cat-btn{
  display:flex;align-items:center;justify-content:center;
  width:100%;padding:.95rem .6rem;
  border:0;background:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.cat-btn img{
  height:clamp(1.9rem,6.5vw,2.6rem);width:auto;max-width:100%;
  transition:transform .18s ease;
}
.cat-btn:hover img{transform:scale(1.04)}
.cat[data-open] .cat-btn{background:rgba(255,255,255,.32)}

.panel{padding:.2rem .3rem 1.5rem}

.items{list-style:none;margin:0;padding:0}
.item{padding:.5rem 0;border-bottom:1px dashed rgba(46,34,25,.13)}
.item:last-child{border-bottom:0}

.line{display:flex;align-items:baseline;gap:.4rem}
.name{font-weight:600}

.dots{
  flex:1 1 auto;min-width:1.5rem;
  border-bottom:1px dotted rgba(46,34,25,.35);
  transform:translateY(-.25em);
}

.price{
  flex:0 0 auto;
  font-family:"Fira Cond","Fira",sans-serif;font-weight:700;
  color:var(--gold);white-space:nowrap;
}
.cur{font-size:.75em;color:var(--ink-2);font-weight:400}

.desc{margin:.2rem 0 0;color:var(--ink-2);font-size:.85rem;line-height:1.45;max-width:36rem}
.desc [lang="ar"]{font-size:1.05em}

.badge{
  display:inline-block;vertical-align:.1em;
  margin-left:.45rem;padding:.05rem .4rem;
  border:1px solid var(--gold);border-radius:3px;
  color:var(--gold);background:rgba(201,123,34,.09);
  font-family:"Fira Cond","Fira",sans-serif;font-weight:700;
  font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
}

.sub{padding:1rem 0 .3rem}
.sub h3{
  margin:0;
  font-family:"Fira Cond","Fira",sans-serif;font-weight:700;
  font-size:.95rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);
}

/* ---------- Footer ---------- */

.foot{position:relative;z-index:1;max-width:var(--wrap);margin:0 auto;
  padding:2.2rem .9rem 3rem;text-align:center}
.wifi img{width:84px;height:auto;display:block;margin:0 auto}
.wifi{margin:0;color:var(--ink-2);font-size:.85rem;letter-spacing:.06em}
.bon{margin:1.5rem auto 0;display:block;width:min(52%,180px);height:auto;opacity:.85}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion:reduce){
  #up{animation:none}
  *{transition-duration:.01ms !important}
}

/* ---------- Print: alles offen, ohne Deko ---------- */

@media print{
  body{background:#fff;color:#111}
  .hero,.skip,.deco{display:none}
  .panel{display:block !important}
  .cat{break-inside:avoid}
  .price{color:#111}
}