/* ═══════════════════════════════════════════════════════════
   Calypso Weekend — Bad Ragaz, 9.–11. Oktober 2026
   Mobile-first. Bewegung nur über transform/opacity.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* Farbe */
  --paper:#F4EFE4;
  --paper-deep:#EBE4D4;
  --card:#FBF8F1;
  --ink:#24261F;
  --ink-soft:#62655A;
  --ink-faint:#8B8D82;
  --line:#DAD2BC;
  --line-soft:#E6DFCE;

  --tanne:#2E4A3A;
  --tanne-tint:#E2E9DF;
  --thermal:#3C7680;
  --thermal-tint:#DEEAEA;
  --glut:#AD5C2C;
  --glut-tint:#F1E2D4;

  --night:#1B2620;

  /* Schrift */
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  /* Mass */
  --maxw:39rem;
  --edge:1.375rem;

  /* Bewegung */
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
}

*,*::before,*::after{box-sizing:border-box;}

html{
  scroll-behavior:smooth;
  scroll-padding-top:3.4rem;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  overflow-x:hidden;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;height:auto;display:block;}
a{color:inherit;}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--edge);}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:var(--paper);padding:.75rem 1.25rem;
}
.skip:focus{left:0;}

/* ─────────── Typografie ───────────
   Tracking ist grössenabhängig: gross = negativ, klein = neutral. */
h1,h2,h3,h4,h5{
  font-family:var(--serif);
  font-weight:500;
  margin:0 0 .45em;
  font-optical-sizing:auto;
}
h1{font-size:clamp(3rem,15vw,5.25rem);line-height:.94;letter-spacing:-.035em;}
h2{font-size:clamp(1.85rem,7vw,2.6rem);line-height:1.08;letter-spacing:-.022em;}
h3{font-size:clamp(1.45rem,5.5vw,1.9rem);line-height:1.14;letter-spacing:-.016em;}
h4{font-size:1.25rem;line-height:1.24;letter-spacing:-.011em;}
h5{font-size:1.12rem;line-height:1.26;letter-spacing:-.008em;}
p{margin:0 0 1.05em;}
p:last-child{margin-bottom:0;}
strong{font-weight:600;}

.eyebrow{
  font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 .75rem;
}
.lede{color:var(--ink-soft);max-width:34rem;}
.sub{margin-top:3rem;}

/* ═══════════════ HERO ═══════════════ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;
  background:var(--night);
  isolation:isolate;
}
.hero__layers{position:absolute;inset:0;z-index:0;}

.hero__berge{
  position:absolute;inset:-14% -6%;
  width:112%;height:128%;max-width:none;
  object-fit:cover;object-position:center 42%;
  transform:translate3d(0,var(--py,0px),0);
  will-change:transform;
}
.hero__scrim{
  position:absolute;inset:0;
  background:linear-gradient(178deg,rgba(20,28,22,.58) 0%,rgba(20,28,22,.1) 32%,transparent 50%);
}
.hero__cart{
  position:absolute;
  left:50%;bottom:31%;
  width:min(64vw,20rem);
  transform:translate(-50%,var(--py,0px));
  filter:drop-shadow(0 26px 34px rgba(8,14,10,.5));
  will-change:transform;
}

.hero__base{
  position:absolute;inset:0;
  background:linear-gradient(0deg,
    rgba(16,22,18,.97) 6%,
    rgba(16,22,18,.88) 20%,
    rgba(16,22,18,.52) 36%,
    rgba(16,22,18,.14) 52%,
    transparent 66%);
}

.hero__copy{
  position:relative;z-index:2;
  max-width:var(--maxw);width:100%;
  margin-inline:auto;
  padding:0 var(--edge) 5.5rem;
  color:#F6F2E8;
}
.hero__logo{
  width:8.25rem;height:auto;opacity:.9;
  margin-bottom:1.5rem;
}
.hero__title{
  margin:0 0 .8rem;
  color:#FCFAF4;
  text-shadow:0 2px 26px rgba(10,16,12,.45);
}
.hero__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;
  margin:0 0 1.1rem;
  font-size:.83rem;font-weight:500;letter-spacing:.05em;
  text-transform:uppercase;color:rgba(246,242,232,.82);
}
.hero__meta span + span::before{content:"·";margin-right:.55rem;opacity:.5;}
.hero__lead{
  max-width:26rem;margin:0;
  color:rgba(240,236,226,.78);font-size:1.02rem;line-height:1.6;
}

.hero__cue{
  position:absolute;left:50%;bottom:1.6rem;z-index:3;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  text-decoration:none;color:rgba(246,242,232,.62);
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  transition:opacity .3s var(--ease-out);
}
.hero__cue.is-gone{opacity:0;pointer-events:none;}
.hero__cue.is-gone .hero__cueline{animation:none;}
.hero__cueline{
  width:1px;height:2.1rem;
  background:linear-gradient(180deg,transparent,rgba(246,242,232,.75));
  transform-origin:top;
  animation:cue 2.4s var(--ease-in-out) infinite;
}
@keyframes cue{
  0%,100%{transform:scaleY(.42);opacity:.35;}
  50%    {transform:scaleY(1);opacity:.95;}
}

/* ─────────── Hero-Auftritt ─────────── */
@keyframes heroIn{
  from{opacity:0;transform:translateY(16px);}
  to{opacity:1;transform:none;}
}
@keyframes heroFade{from{opacity:0;} to{opacity:1;}}

.hero__berge{animation:heroFade .9s var(--ease-out) both;}
.hero__cart {animation:heroFade .9s var(--ease-out) .18s both;}
.hero__logo {animation:heroIn .6s var(--ease-out) .10s both;}
.hero__title{animation:heroIn .68s var(--ease-out) .18s both;}
.hero__meta {animation:heroIn .6s var(--ease-out) .30s both;}
.hero__lead {animation:heroIn .6s var(--ease-out) .38s both;}

/* ═══════════════ Sektionen ═══════════════ */
.sec{padding:4.5rem 0;}
.sec--decisions{background:var(--paper-deep);}
.sec--flow{padding-bottom:2rem;}
.sec--budget{background:var(--paper-deep);}

/* ─────────── Reveal ─────────── */
.reveal{
  opacity:0;transform:translateY(14px);
  transition:opacity .55s var(--ease-out),transform .55s var(--ease-out);
}
.reveal.is-in{opacity:1;transform:none;}

/* ─────────── Kacheln ─────────── */
.grid4{display:grid;gap:.7rem;margin-top:1.9rem;}
.tile{
  display:flex;flex-direction:column;gap:.28rem;
  padding:1.2rem 1.25rem;
  background:var(--card);
  border:1px solid var(--line-soft);
  border-left:3px solid var(--ink-faint);
  border-radius:.7rem;
  text-decoration:none;
  transition:transform .22s var(--ease-out),box-shadow .22s var(--ease-out);
}
.tile:active{transform:scale(.985);}
.tile__k{font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);}
.tile__v{font-family:var(--serif);font-size:1.22rem;line-height:1.2;letter-spacing:-.012em;}
.tile__d{font-size:.88rem;color:var(--ink-soft);line-height:1.5;}
.tile--tanne{border-left-color:var(--tanne);}
.tile--tanne .tile__v{color:var(--tanne);}
.tile--thermal{border-left-color:var(--thermal);}
.tile--thermal .tile__v{color:var(--thermal);}
.tile--glut{border-left-color:var(--glut);}
.tile--glut .tile__v{color:var(--glut);}

/* ─────────── Status-Pillen ─────────── */
.pill{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.16rem .55rem;border-radius:99px;
  font-family:var(--sans);
  font-size:.66rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  vertical-align:.14em;white-space:nowrap;
}
.pill::before{content:"";width:.4rem;height:.4rem;border-radius:50%;background:currentColor;}
.pill--open{background:var(--glut-tint);color:var(--glut);}
.pill--ok{background:var(--tanne-tint);color:var(--tanne);}

/* ─────────── Entscheidungs-Übersicht ─────────── */
.whoami{
  display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;
  margin:1.6rem 0 0;padding:.7rem .9rem;
  background:var(--card);border:1px solid var(--line-soft);border-radius:.6rem;
  font-size:.86rem;
}
.whoami__label{color:var(--ink-faint);}
.whoami__name{font-family:var(--serif);font-size:1.05rem;font-weight:500;}
.whoami__change{
  margin-left:auto;padding:.25rem .6rem;
  background:none;border:1px solid var(--line);border-radius:99px;
  font:inherit;font-size:.76rem;color:var(--ink-soft);cursor:pointer;
  transition:transform .14s var(--ease-out),background-color .18s ease;
}
.whoami__change:active{transform:scale(.96);}

.dsum{list-style:none;margin:1.4rem 0 0;padding:0;}
.dsum li + li{margin-top:.5rem;}
.dsum a{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  padding:.85rem 1rem;
  background:var(--card);border:1px solid var(--line-soft);border-radius:.6rem;
  text-decoration:none;font-size:.95rem;font-weight:500;
  transition:transform .2s var(--ease-out);
}
.dsum a:active{transform:scale(.99);}
.dsum em{
  margin-left:auto;font-style:normal;font-size:.82rem;color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
}
.dsum li.is-done a{border-color:var(--tanne-tint);}
.dsum li.is-done .pill--open{background:var(--tanne-tint);color:var(--tanne);}

.note{
  margin-top:1.4rem;padding:.9rem 1.05rem;
  border-radius:.55rem;font-size:.9rem;line-height:1.55;
}
.note--urgent{background:var(--glut-tint);color:#7C3F1C;border-left:3px solid var(--glut);}
.note--done{background:var(--tanne-tint);color:#1F3A2B;border-left:3px solid var(--tanne);}
.note--done a{color:var(--tanne);font-weight:600;text-decoration:underline;text-underline-offset:.2em;}

/* ═══════════════ TIMELINE ═══════════════ */
.tl{position:relative;padding-block:.5rem;}
.tl__rail{
  position:absolute;top:0;bottom:0;
  left:calc(50% - var(--maxw)/2 + var(--edge) + .3rem);
  width:2px;background:var(--line);
  border-radius:2px;overflow:hidden;
}
@media (max-width:41rem){
  .tl__rail{left:calc(var(--edge) + .3rem);}
}
.tl__fill{
  position:absolute;top:0;left:0;width:100%;
  height:100%;
  background:linear-gradient(180deg,var(--tanne),var(--thermal));
  transform-origin:top;
  transform:scaleY(var(--fill,0));
}

.day{
  position:relative;
  margin:3.2rem 0 1.5rem;padding-left:2.1rem;
  display:flex;flex-direction:column;
}
.day::before{
  content:"";position:absolute;left:-.31rem;top:.62rem;
  width:.95rem;height:.95rem;border-radius:50%;
  background:var(--paper);border:2px solid var(--ink);
}
.sec--decisions + .sec--flow .day:first-of-type{margin-top:1.2rem;}
.day__name{font-size:1.75rem;letter-spacing:-.018em;}
.day__date{
  font-family:var(--sans);font-size:.74rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-faint);
}

.ev{position:relative;display:flex;gap:1.1rem;padding-left:0;margin-bottom:2.1rem;}
.ev::before{
  content:"";position:absolute;left:-.02rem;top:.52rem;
  width:.62rem;height:.62rem;border-radius:50%;
  background:var(--paper);border:2px solid var(--ink-faint);
  transition:background-color .3s var(--ease-out),border-color .3s var(--ease-out),transform .3s var(--ease-out);
}
.ev.is-in::before{background:var(--tanne);border-color:var(--tanne);transform:scale(1.1);}
.ev--nodot::before{display:none;}
.ev--nodot{padding-left:0;}
.ev--last{margin-bottom:1rem;}

.ev__t{
  flex:0 0 2.9rem;margin-left:1.35rem;
  font-size:.82rem;font-weight:600;letter-spacing:.03em;
  color:var(--ink-soft);font-variant-numeric:tabular-nums;
  padding-top:.16rem;
}
.ev--nodot .ev__t{margin-left:0;}
.ev__b{
  flex:1 1 auto;min-width:0;
  transform:scale(var(--fs,1));
  opacity:var(--fo,1);
}
.ev__b--full{margin-left:2.1rem;}
.ev__b h4{margin-bottom:.42em;}
.ev__b p{font-size:.95rem;color:var(--ink-soft);}
.ev__b p strong{color:var(--ink);}
.ev__hint{font-size:.86rem !important;color:var(--ink-faint) !important;}
.ev__links{
  display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  margin-top:.9rem;font-size:.88rem;
}
.ev__links a{
  color:var(--tanne);font-weight:500;
  text-decoration:underline;text-underline-offset:.22em;
  text-decoration-color:color-mix(in srgb,var(--tanne) 35%,transparent);
}

/* Bilder */
.shot{margin:0 0 1rem;border-radius:.6rem;overflow:hidden;background:var(--paper-deep);}
.shot img{width:100%;}
.shot--wide img{aspect-ratio:16/9;object-fit:cover;}

.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;margin:1rem 0;}
.gal--2{grid-template-columns:repeat(2,1fr);}
.gal figure{margin:0;}
.gal img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:.45rem;background:var(--paper-deep);}
.gal--2 img{aspect-ratio:4/3;}
.gal figcaption{
  padding:.4rem .1rem 0;font-size:.7rem;letter-spacing:.04em;
  color:var(--ink-faint);text-align:center;
}

/* Faktenzeilen */
.facts{display:grid;gap:.45rem;margin:1rem 0;grid-template-columns:repeat(2,1fr);}
.facts--3{grid-template-columns:repeat(3,1fr);}
.facts > div{
  display:flex;flex-direction:column;gap:.08rem;
  padding:.7rem .8rem;background:var(--card);
  border:1px solid var(--line-soft);border-radius:.5rem;
}
.facts span{font-size:.63rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);line-height:1.3;}
.facts strong{font-family:var(--serif);font-size:1.08rem;font-weight:500;letter-spacing:-.012em;white-space:nowrap;}
.facts small{font-size:.74rem;color:var(--ink-faint);line-height:1.35;}

/* Details */
.det{
  margin:1rem 0 0;border:1px solid var(--line-soft);
  border-radius:.55rem;background:var(--card);overflow:hidden;
}
.det summary{
  padding:.75rem .9rem;cursor:pointer;list-style:none;
  font-size:.88rem;font-weight:600;color:var(--ink-soft);
  display:flex;align-items:center;justify-content:space-between;
}
.det summary::-webkit-details-marker{display:none;}
.det summary::after{
  content:"";width:.5rem;height:.5rem;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform .22s var(--ease-out);
}
.det[open] summary::after{transform:rotate(225deg) translateY(-2px);}
.det .tbl{margin:0;}
.det__p{padding:.55rem .9rem;margin:0;font-size:.82rem;color:var(--ink-faint);}

/* Tabellen */
.tbl{width:100%;border-collapse:collapse;font-size:.9rem;}
.tbl th,.tbl td{padding:.55rem .9rem;text-align:left;border-bottom:1px solid var(--line-soft);}
.tbl th{
  font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);
}
.tbl td:not(:first-child),.tbl th:not(:first-child){text-align:right;font-variant-numeric:tabular-nums;}
.tbl tr.is-mark td{background:var(--tanne-tint);font-weight:600;}

/* ═══════════════ PARALLAX-BÜHNEN ═══════════════ */
.stage{
  position:relative;
  height:min(78svh,34rem);
  margin:2.4rem 0;
  overflow:hidden;
  background:var(--night);
  isolation:isolate;
}
.stage__layers{position:absolute;inset:0;}
.stage__bg{
  position:absolute;inset:-16% -8%;
  width:116%;height:132%;max-width:none;
  object-fit:cover;
  transform:translate3d(0,var(--py,0px),0);
  will-change:transform;
}
.stage__haze{
  position:absolute;inset:-10%;
  background:radial-gradient(ellipse 90% 60% at 50% 62%,rgba(255,252,244,.34),transparent 70%);
  transform:translate3d(0,var(--py,0px),0);
  will-change:transform;
}
.stage__haze--warm{background:radial-gradient(ellipse 100% 55% at 50% 70%,rgba(255,246,232,.42),transparent 72%);}
.stage__haze--cool{background:radial-gradient(ellipse 80% 65% at 50% 55%,rgba(214,232,236,.26),transparent 70%);}

.stage__mid{
  position:absolute;
  left:50%;bottom:-14%;
  width:min(92vw,32rem);
  transform:translate(-50%,var(--py,0px));
  border-radius:.7rem;
  box-shadow:0 22px 46px rgba(8,14,10,.42);
  will-change:transform;
}
.stage__mid--steam{
  bottom:-8%;opacity:.9;
  mask-image:radial-gradient(ellipse 78% 74% at 50% 50%,#000 42%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 78% 74% at 50% 50%,#000 42%,transparent 78%);
  box-shadow:none;border-radius:0;
}
.stage__mid--wall{
  bottom:-16%;
  mask-image:linear-gradient(180deg,transparent,#000 22%);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%);
}
.stage__depth{
  position:absolute;left:50%;bottom:-6%;
  width:min(120vw,44rem);aspect-ratio:1/.62;
  transform:translate(-50%,var(--py,0px));
  background:radial-gradient(ellipse 62% 58% at 50% 68%,rgba(22,34,26,.5),transparent 68%);
  will-change:transform;
}
.stage__grad{
  position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(14,20,16,.9) 2%,rgba(14,20,16,.45) 24%,transparent 55%),
             linear-gradient(180deg,rgba(14,20,16,.5) 0%,transparent 34%);
}
.cart{
  position:absolute;left:50%;
  transform:translate(calc(-50% + var(--px,0px)),var(--py,0px)) rotate(var(--rot,0deg));
  will-change:transform;
}
/* Vorderer Cart: gross, tief, kommt von links */
.cart--a{
  bottom:3%;
  width:min(70vw,22rem);
  margin-left:-4%;
  filter:drop-shadow(0 22px 30px rgba(8,14,10,.55));
  z-index:2;
}
/* Hinterer Cart: deutlich kleiner und weiter oben am Hang, kommt von rechts.
   Der Abstand nach oben verhindert, dass er sich über das Fahrerpaar legt. */
.cart--b{
  bottom:52%;
  width:min(27vw,8.5rem);
  margin-left:9%;
  filter:drop-shadow(0 10px 16px rgba(8,14,10,.4));
  opacity:.92;
  z-index:1;
}

.stage__label{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  max-width:var(--maxw);margin-inline:auto;
  padding:0 var(--edge) 1.5rem;
  display:flex;flex-direction:column;gap:.15rem;
  color:#F6F2E8;
}
.stage__time{
  font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(246,242,232,.75);
}
.stage__name{
  font-family:var(--serif);font-size:2rem;font-weight:500;
  line-height:1.06;letter-spacing:-.022em;
  text-shadow:0 2px 20px rgba(10,16,12,.5);
}

/* ═══════════════ ENTSCHEIDUNGEN ═══════════════ */
.choice{display:grid;gap:.7rem;margin:1.1rem 0 0;}
.opt{
  display:flex;flex-direction:column;
  padding:1.1rem 1.15rem;
  background:var(--card);
  border:1px solid var(--line-soft);
  border-radius:.7rem;
  transition:border-color .3s var(--ease-out),box-shadow .3s var(--ease-out);
}
.opt.is-mine{border-color:var(--tanne);box-shadow:0 0 0 1px var(--tanne);}
.opt.is-lead{border-color:var(--glut);}
.opt__h{margin-bottom:.6rem;}
.opt__h h5{margin:0 0 .1rem;}
.opt__profile{margin:0;font-size:.86rem;color:var(--ink-soft);line-height:1.4;}
.opt__list{margin:0 0 .8rem;padding:0;list-style:none;}
.opt__list li{
  position:relative;padding-left:.95rem;
  font-size:.9rem;color:var(--ink-soft);line-height:1.5;
}
.opt__list li + li{margin-top:.28rem;}
.opt__list li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:.28rem;height:.28rem;border-radius:50%;background:var(--line);
}
.opt__price{
  margin:0 0 .85rem;font-family:var(--serif);
  font-size:1.15rem;font-weight:500;letter-spacing:-.01em;
}
.opt__price small{font-family:var(--sans);font-size:.75rem;font-weight:400;color:var(--ink-faint);letter-spacing:0;}
.opt__foot{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-top:auto;}
.opt__foot a{
  font-size:.86rem;font-weight:500;color:var(--ink-soft);
  text-decoration:underline;text-underline-offset:.2em;
  text-decoration-color:var(--line);
}
.opt__tel{margin:.65rem 0 0;font-size:.82rem;color:var(--ink-faint);}
.opt__tel a{color:var(--glut);font-weight:600;text-decoration:none;}

.vote{
  margin-left:auto;
  padding:.5rem 1.05rem;
  background:var(--ink);color:var(--paper);
  border:0;border-radius:99px;
  font:inherit;font-size:.86rem;font-weight:500;
  cursor:pointer;
  transition:transform .14s var(--ease-out),background-color .2s var(--ease-out),opacity .2s ease;
}
.vote:active{transform:scale(.96);}
.vote[data-state="mine"]{background:var(--tanne);}
.vote[data-state="mine"]::before{content:"✓ ";}
.vote[disabled]{opacity:.55;cursor:default;}

.voters{
  display:flex;flex-wrap:wrap;gap:.35rem;
  margin-top:.7rem;min-height:0;
}
.voters:empty{margin-top:0;}
.voter{
  display:inline-block;
  padding:.2rem .6rem;border-radius:99px;
  background:var(--tanne-tint);color:var(--tanne);
  font-size:.76rem;font-weight:600;
  animation:voterIn .34s var(--ease-out) both;
}
@keyframes voterIn{
  from{opacity:0;transform:scale(.9) translateY(4px);}
  to{opacity:1;transform:none;}
}
.tally{
  margin:.8rem 0 0;font-size:.84rem;color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
}

/* ═══════════════ BUDGET ═══════════════ */
.budget{
  margin-top:1.8rem;padding:.2rem 0 1rem;
  background:var(--card);border:1px solid var(--line-soft);border-radius:.7rem;
  overflow:hidden;
}
.tbl--budget{font-size:.86rem;}
.tbl--budget td:first-child{line-height:1.4;}
.tbl--budget tfoot td{
  padding-top:.85rem;padding-bottom:.85rem;
  font-family:var(--serif);font-size:1.2rem;font-weight:600;
  border-bottom:0;border-top:2px solid var(--ink);
}
.tag{
  display:inline-block;margin-left:.3rem;padding:.05rem .4rem;
  border-radius:99px;background:var(--tanne-tint);color:var(--tanne);
  font-size:.62rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
}
.budget__rest{
  margin:0;padding:.9rem 1.1rem 0;
  font-size:.88rem;color:var(--ink-soft);
}

.xtra{list-style:none;margin:1.3rem 0 0;padding:0;}
.xtra li{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:.72rem 0;border-bottom:1px solid var(--line-soft);
  font-size:.92rem;
}
.xtra li:last-child{border-bottom:0;}
.xtra span{font-weight:500;}
.xtra em{font-style:normal;color:var(--ink-faint);font-size:.86rem;text-align:right;}

/* ═══════════════ PACKLISTE ═══════════════ */
.pack{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;gap:.55rem;}
.pack li{
  display:flex;flex-direction:column;gap:.1rem;
  padding:.9rem 1.1rem;
  background:var(--card);border:1px solid var(--line-soft);border-radius:.6rem;
}
.pack strong{font-family:var(--serif);font-size:1.05rem;font-weight:500;letter-spacing:-.008em;}
.pack span{font-size:.87rem;color:var(--ink-soft);}

/* ═══════════════ FOOTER ═══════════════ */
.foot{
  padding:3.2rem 0 4rem;
  background:var(--night);color:rgba(240,236,226,.72);
  text-align:center;
}
.foot__logo{width:6rem;height:auto;margin:0 auto 1.4rem;opacity:.42;filter:invert(1) brightness(2);}
.foot__note{font-size:.92rem;color:rgba(246,242,232,.9);margin-bottom:.5rem;}
.foot__meta{font-size:.82rem;margin-bottom:.5rem;}
.foot__credit{font-size:.72rem;color:rgba(240,236,226,.45);max-width:26rem;margin-inline:auto;line-height:1.5;}

/* ═══════════════ TAGES-ANZEIGE ═══════════════ */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:60;
  transform:translateY(-101%);
  background:rgba(244,239,228,.84);
  backdrop-filter:blur(16px) saturate(170%);
  -webkit-backdrop-filter:blur(16px) saturate(170%);
  border-bottom:1px solid rgba(218,210,188,.5);
  transition:transform .34s var(--ease-out);
}
.topbar.is-on{transform:none;}
.topbar__in{
  max-width:var(--maxw);margin-inline:auto;
  padding:.42rem var(--edge);
  display:flex;align-items:baseline;gap:.55rem;
}
.topbar__label{
  font-family:var(--serif);font-size:1.02rem;font-weight:600;letter-spacing:-.012em;
  color:var(--ink);white-space:nowrap;
}
.topbar__date{
  font-size:.68rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-faint);white-space:nowrap;
}
.topbar__prog{
  position:absolute;left:0;bottom:-1px;height:2px;width:100%;
  transform-origin:left;transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,var(--tanne),var(--thermal));
}

/* ─────────── Burger ─────────── */
.burger{
  margin-left:auto;align-self:center;
  width:2.6rem;height:2.6rem;margin-right:-.55rem;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.28rem;
  background:none;border:0;padding:0;cursor:pointer;
  border-radius:.5rem;
  transition:transform .14s var(--ease-out),background-color .2s ease;
}
.burger:active{transform:scale(.94);}
.burger__l{
  display:block;width:1.15rem;height:1.6px;border-radius:2px;
  background:var(--ink);
  transition:transform .24s var(--ease-out),opacity .18s var(--ease-out);
}
.burger[aria-expanded="true"] .burger__l:nth-child(1){transform:translateY(.46rem) rotate(45deg);}
.burger[aria-expanded="true"] .burger__l:nth-child(2){opacity:0;transform:scaleX(.4);}
.burger[aria-expanded="true"] .burger__l:nth-child(3){transform:translateY(-.46rem) rotate(-45deg);}

/* ─────────── Sprungmenü ─────────── */
.menu{
  position:fixed;inset:0;z-index:55;
  background:rgba(20,26,20,.42);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;transition:opacity .22s var(--ease-out);
}
.menu.is-on{opacity:1;}
.menu__panel{
  position:absolute;top:3.15rem;right:.6rem;
  width:min(17rem,calc(100vw - 1.6rem));
  max-height:calc(100svh - 4rem);overflow-y:auto;
  padding:1rem .5rem .7rem;
  background:var(--card);
  border:1px solid var(--line-soft);
  border-radius:.85rem;
  box-shadow:0 22px 54px rgba(14,20,16,.3);
  transform-origin:top right;          /* wächst aus dem Burger darüber heraus */
  transform:scale(.94);opacity:0;
  transition:transform .24s var(--ease-out),opacity .24s var(--ease-out);
}
.menu.is-on .menu__panel{transform:none;opacity:1;}
.menu__t{
  margin:0 0 .5rem;padding:0 .7rem;
  font-family:var(--sans);font-size:.66rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);
}
.menu__list{list-style:none;margin:0;padding:0;}
.menu__list a{
  display:block;padding:.52rem .7rem;border-radius:.45rem;
  font-size:.97rem;font-weight:500;text-decoration:none;color:var(--ink);
  transition:transform .14s var(--ease-out),background-color .18s ease;
}
.menu__list a:active{transform:scale(.98);background:var(--paper-deep);}
.menu__list a:focus-visible,.burger:focus-visible{
  outline:2px solid var(--tanne);outline-offset:2px;border-radius:.45rem;
}
.menu__panel:focus{outline:none;}
.menu__list a.is-here{color:var(--tanne);background:var(--tanne-tint);}
.menu__grp{
  margin:.6rem 0 .15rem;padding:0 .7rem;
  font-size:.63rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-faint);
}
.menu__grp:first-child{margin-top:0;}
/* Einträge laufen gestaffelt ein, sobald das Panel offen ist */
.menu.is-on .menu__list > li{animation:menuItem .3s var(--ease-out) both;}
@keyframes menuItem{
  from{opacity:0;transform:translateY(6px);}
  to{opacity:1;transform:none;}
}
.menu.is-on .menu__list > li:nth-child(1){animation-delay:0ms;}
.menu.is-on .menu__list > li:nth-child(2){animation-delay:22ms;}
.menu.is-on .menu__list > li:nth-child(3){animation-delay:44ms;}
.menu.is-on .menu__list > li:nth-child(4){animation-delay:66ms;}
.menu.is-on .menu__list > li:nth-child(5){animation-delay:88ms;}
.menu.is-on .menu__list > li:nth-child(6){animation-delay:110ms;}
.menu.is-on .menu__list > li:nth-child(7){animation-delay:132ms;}
.menu.is-on .menu__list > li:nth-child(8){animation-delay:154ms;}
.menu.is-on .menu__list > li:nth-child(9){animation-delay:176ms;}
.menu.is-on .menu__list > li:nth-child(10){animation-delay:198ms;}
.menu.is-on .menu__list > li:nth-child(11){animation-delay:200ms;}
.menu.is-on .menu__list > li:nth-child(12){animation-delay:200ms;}
.menu.is-on .menu__list > li:nth-child(13){animation-delay:200ms;}
.menu.is-on .menu__list > li:nth-child(14){animation-delay:200ms;}

/* ═══════════════ NAMENSDIALOG ═══════════════ */
.ndlg{
  position:fixed;inset:0;z-index:60;
  display:grid;place-items:center;
  padding:var(--edge);
  background:rgba(20,26,20,.5);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .22s var(--ease-out);
}
.ndlg.is-on{opacity:1;}
.ndlg__box{
  width:100%;max-width:22rem;
  padding:1.5rem 1.45rem 1.3rem;
  background:var(--card);border-radius:.9rem;
  box-shadow:0 24px 60px rgba(14,20,16,.35);
  transform:scale(.96);opacity:0;
  transition:transform .26s var(--ease-out),opacity .26s var(--ease-out);
}
.ndlg.is-on .ndlg__box{transform:none;opacity:1;}
.ndlg__box h3{margin-bottom:.35em;}
.ndlg__box p{font-size:.89rem;color:var(--ink-soft);margin-bottom:1.1rem;}
.ndlg input{
  width:100%;padding:.7rem .85rem;
  border:1px solid var(--line);border-radius:.5rem;
  background:var(--paper);font:inherit;font-size:1rem;color:var(--ink);
  transition:border-color .18s ease,box-shadow .18s ease;
}
.ndlg input:focus{outline:0;border-color:var(--tanne);box-shadow:0 0 0 3px var(--tanne-tint);}
.ndlg__foot{display:flex;gap:.6rem;justify-content:flex-end;margin-top:1rem;}
.btn{
  padding:.58rem 1.15rem;border:0;border-radius:99px;
  background:var(--ink);color:var(--paper);
  font:inherit;font-size:.9rem;font-weight:500;cursor:pointer;
  transition:transform .14s var(--ease-out);
}
.btn:active{transform:scale(.96);}
.btn--ghost{background:none;color:var(--ink-soft);border:1px solid var(--line);}

/* ═══════════════ TOAST ═══════════════ */
.toast{
  position:fixed;left:50%;bottom:1.4rem;z-index:70;
  transform:translate(-50%,140%);
  max-width:calc(100vw - 2rem);
  padding:.7rem 1.1rem;border-radius:99px;
  background:var(--ink);color:var(--paper);
  font-size:.87rem;font-weight:500;
  box-shadow:0 10px 30px rgba(14,20,16,.3);
  transition:transform .4s var(--ease-out),opacity .4s var(--ease-out);
  opacity:0;pointer-events:none;
}
.toast.is-on{transform:translate(-50%,0);opacity:1;}
.toast--warn{background:var(--glut);}

/* ═══════════════ Grössere Screens ═══════════════ */
@media (min-width:34rem){
  .grid4{grid-template-columns:1fr 1fr;}
  .grid4 .tile:nth-child(2n){transition-delay:60ms;}
  .grid4 .tile:nth-child(n+3){transition-delay:120ms;}
  .grid4 .tile:nth-child(4){transition-delay:180ms;}
  .choice{grid-template-columns:1fr 1fr;}
  .stage{height:min(72svh,36rem);}
}
@media (min-width:41rem){
  .sec{padding:6rem 0;}
  .hero__copy{padding-bottom:7rem;}
}

/* Zeigegeräte mit echtem Hover */
@media (hover:hover) and (pointer:fine){
  .tile:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(36,38,31,.09);}
  .vote:hover{background:var(--tanne);}
  .dsum a:hover{border-color:var(--line);}
  .whoami__change:hover{background:var(--paper-deep);}
}

/* ═══════════════ Bewegung reduziert ═══════════════
   Keine Transforms, keine Parallaxe — Endzustand sofort.  */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;transition:none;}
  .hero__berge,.hero__cart,
  .stage__bg,.stage__mid,.stage__haze,.cart{will-change:auto;}
  .tl__fill{transition:none;}
  .hero__cueline{animation:none;opacity:.7;}
  .voter{animation:none;}
  .hero__berge,.hero__cart,.hero__logo,.hero__title,.hero__meta,.hero__lead{animation:none;}

  /* Timeline-Fokus: Helligkeit bleibt als Orientierung, die Skalierung entfällt */
  .ev__b{transform:none !important;}

  .topbar,.ndlg,.ndlg__box,.toast,.menu,.menu__panel{transition:opacity .2s ease;}
  .topbar{transform:none;opacity:0;}
  .topbar.is-on{opacity:1;}
  .toast.is-on{transform:translate(-50%,0);}
  .ndlg.is-on .ndlg__box{transform:none;}
  .menu.is-on .menu__panel{transform:none;}
  .menu.is-on .menu__list > li{animation:none;}
  .burger__l{transition:opacity .18s ease;}
  .tile:active,.vote:active,.btn:active,.dsum a:active,
  .burger:active,.menu__list a:active{transform:none;}
}

/* Weniger Transparenz */
@media (prefers-reduced-transparency:reduce){
  .topbar{background:var(--card);backdrop-filter:none;-webkit-backdrop-filter:none;}
  .menu{background:rgba(20,26,20,.8);backdrop-filter:none;-webkit-backdrop-filter:none;}
  .ndlg{background:rgba(20,26,20,.8);backdrop-filter:none;-webkit-backdrop-filter:none;}
}