/* ═══════════════════════════════════════════════════════════
   Calypso Live — Weekend-App
   Ein Screen, kein Scrollen. Höhe in dvh, Zonen im Grid.
   Bewegung nur über transform/opacity.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* Grund und Flächen */
  --nacht:#1B2620;
  --tiefer:#141D18;
  --flaeche:#243129;
  --flaeche-hoch:#2B3A31;

  /* Akzente, aus der Website-Palette */
  --tanne:#2E4A3A;
  --thermal:#2F5C63;
  --glut:#C9683A;
  --glut-hell:#E0784A;
  --bernstein:#D9A441;
  --moos:#7FA88F;

  /* Schrift */
  --papier:#F4EFE4;
  --soft:#B9B5A6;
  --faint:#8B8D82;
  --linie:rgba(244,239,228,.14);
  --linie-stark:rgba(244,239,228,.24);

  /* Blatt: hell wie die Website */
  --blatt:#F4EFE4;
  --blatt-tief:#24261F;
  --blatt-soft:#62655A;
  --blatt-linie:#DAD2BC;

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

  /* Ränder des Geräts */
  --st:env(safe-area-inset-top,0px);
  --sb:env(safe-area-inset-bottom,0px);
  --edge:1rem;

  --ease-out:cubic-bezier(0.23,1,0.32,1);
}

*,*::before,*::after{box-sizing:border-box;}
[hidden]{display:none !important;}

html,body{
  height:100%;
  margin:0;
  overflow:hidden;                 /* die Seite selbst scrollt nie */
  overscroll-behavior:none;
  background:var(--tiefer);
}

body{
  color:var(--papier);
  font-family:var(--sans);
  font-size:.9375rem;              /* 15px */
  line-height:1.4;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  text-rendering:optimizeLegibility;
}

img{display:block;max-width:100%;}

button{
  font:inherit;color:inherit;
  background:none;border:0;margin:0;padding:0;
  cursor:pointer;text-align:left;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

input{font:inherit;color:inherit;}

.sprite{position:absolute;width:0;height:0;overflow:hidden;}
.sprite g{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}

.ic{width:1.375rem;height:1.375rem;flex:none;fill:none;stroke:currentColor;
    stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.ic--s{width:1rem;height:1rem;}
.ic--xl{width:2.5rem;height:2.5rem;}
.ic--soft{color:var(--soft);}
.ic--faint{color:var(--faint);}

/* Kleine Grossbuchstaben-Zeile, überall gleich */
.lbl{
  font-size:.65rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);
}

/* ═══════════════ Zugang ═══════════════ */
.gate{
  position:fixed;inset:0;z-index:60;
  background:var(--nacht);
  display:flex;align-items:center;justify-content:center;
  padding:calc(var(--st) + 2rem) var(--edge) calc(var(--sb) + 2rem);
}
.gate__in{width:100%;max-width:22rem;text-align:center;}
.gate__logo{
  width:4.5rem;height:4.5rem;margin:0 auto 1.25rem;border-radius:50%;
  background:var(--glut);color:var(--nacht);
  display:flex;align-items:center;justify-content:center;
}
.gate__t{
  font-family:var(--serif);font-weight:500;
  font-size:2.5rem;line-height:1;letter-spacing:-.03em;
  margin:0 0 .5rem;font-optical-sizing:auto;
}
.gate__s{color:var(--soft);font-size:.875rem;margin:0 0 1.5rem;}
.gate__form{display:flex;flex-direction:column;gap:.625rem;}
.gate__inp{
  height:3.25rem;width:100%;
  background:var(--flaeche);border:1px solid var(--linie);border-radius:.875rem;
  padding:0 1rem;text-align:center;
  font-size:1.125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
}
.gate__inp::placeholder{letter-spacing:.05em;text-transform:none;font-weight:400;color:var(--faint);}
.gate__inp:focus{outline:2px solid var(--glut);outline-offset:1px;}
.gate__err{
  margin:1rem 0 0;color:var(--glut-hell);font-size:.875rem;
}
.gate__who{margin-top:.5rem;}

.who{display:grid;grid-template-columns:repeat(4,1fr);gap:.625rem;}
.who__b{
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
  padding:.625rem .25rem;border-radius:.875rem;background:var(--flaeche);
  transition:transform .12s var(--ease-out),background .12s linear;
}
.who__b:active{transform:scale(.95);background:var(--flaeche-hoch);}
.who__b img{width:2.75rem;height:2.75rem;border-radius:50%;object-fit:cover;}
.who__b span{font-size:.75rem;font-weight:500;}

/* ═══════════════ Gerüst ═══════════════ */
.app{
  height:100dvh;
  height:100svh;                   /* Rückfall für Browser ohne dvh */
  height:100dvh;
  display:grid;
  /* Die Bereiche sind benannt, nicht nur der Reihe nach zugeordnet.
     Sonst rutscht alles eine Zeile hoch, sobald die Danach-Zeile versteckt ist
     (vor und nach dem Wochenende) — die Bühne bekäme dann keine Höhe. */
  grid-template-rows:auto auto auto minmax(0,1fr) auto;
  grid-template-areas:"kopf" "jetzt" "danach" "buehne" "leiste";
  padding:calc(var(--st) + .625rem) var(--edge) calc(var(--sb) + .375rem);
  gap:.625rem;
  background:var(--nacht);
  max-width:32rem;margin-inline:auto;
}
.top{grid-area:kopf;}
.now{grid-area:jetzt;}
.next{grid-area:danach;}
.stage{grid-area:buehne;}
.tabs{grid-area:leiste;}

/* Ohne Danach-Zeile bleibt sonst deren Abstand als Lücke stehen */
.app.app--ohne-danach{grid-template-rows:auto auto 0 minmax(0,1fr) auto;}

/* ─── Kopfzeile ─── */
.top{
  display:flex;align-items:center;gap:.5rem;
  height:1.5rem;font-size:.75rem;color:var(--soft);
  letter-spacing:.01em;
}
.top__time{font-variant-numeric:tabular-nums;}
.top__net{
  margin-left:auto;font-size:.625rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--glut);background:rgba(201,104,58,.16);border-radius:99px;padding:.1rem .45rem;
}
.top__me{margin-left:auto;display:flex;align-items:center;gap:.5rem;}
.top__net:not([hidden]) + .top__me{margin-left:.5rem;}
.top__ava{width:1.5rem;height:1.5rem;border-radius:50%;object-fit:cover;
          box-shadow:0 0 0 1px var(--linie-stark);}

/* ─── Jetzt ─── */
.now{
  background:var(--flaeche);border-radius:.875rem;
  padding:.875rem 1rem .75rem;
  display:flex;flex-direction:column;gap:.375rem;
  transition:background .4s var(--ease-out);
}
.now[data-kat="aktiv"]{background:var(--tanne);}
.now[data-kat="wasser"]{background:var(--thermal);}
.now[data-kat="frei"]{background:#38281F;}
.now[data-kat="weg"]{background:#25302E;}

.now__k{
  display:flex;align-items:center;gap:.5rem;
  font-size:.65rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--soft);
}
.now__dot{
  width:.4375rem;height:.4375rem;border-radius:50%;background:var(--moos);
  box-shadow:0 0 0 3px rgba(127,168,143,.25);flex:none;
}
.now__t{
  font-family:var(--serif);font-weight:500;font-optical-sizing:auto;
  font-size:1.625rem;line-height:1.08;letter-spacing:-.022em;
  margin:0;text-wrap:balance;
}
.now__m{margin:0;font-size:.8125rem;color:#D8D3C4;}
.now__tip{margin:0;font-size:.8125rem;color:var(--soft);}
.now__acts{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.25rem;}

.chip{
  display:inline-flex;align-items:center;gap:.375rem;
  height:2rem;padding:0 .75rem;border-radius:99px;
  border:1px solid var(--linie-stark);
  font-size:.78125rem;font-weight:500;
  transition:transform .12s var(--ease-out),background .12s linear;
}
.chip:active{transform:scale(.95);background:rgba(244,239,228,.1);}
.chip .ic{width:1rem;height:1rem;}

/* ─── Nächstes ─── */
.next{
  display:flex;align-items:center;gap:.625rem;
  height:1.875rem;padding:0 .375rem;
  font-size:.8125rem;color:var(--soft);
  border-radius:.5rem;
  transition:background .12s linear;
}
.next:active{background:rgba(244,239,228,.06);}
.next__l{
  font-size:.65rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);flex:none;
}
.next__t{color:var(--papier);font-weight:500;flex:none;}
.next__m{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ─── Bühne ─── */
.stage{position:relative;min-height:0;}
.panel{
  /* Unten Platz lassen: der Horn-Knopf ragt über die Tab-Leiste hinaus
     und würde sonst die letzte Zeile der Bühne überdecken. */
  position:absolute;inset:0 0 .875rem;
  display:flex;flex-direction:column;gap:.625rem;
  min-height:0;
}
.panel:not(.is-on){pointer-events:none;}

.soon{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.75rem;color:var(--faint);text-align:center;
}
.soon p{margin:0;font-size:.875rem;max-width:16rem;}

/* ═══════════════ Drinks ═══════════════ */
.bak{
  background:var(--flaeche);border-radius:.875rem;
  padding:.625rem .875rem .5rem;
  display:flex;align-items:center;gap:.875rem;
}
.bak__arc{position:relative;width:9.375rem;flex:none;}
.arc{display:block;width:100%;height:auto;overflow:visible;}
.arc__bg{fill:none;stroke:rgba(244,239,228,.12);stroke-width:10;stroke-linecap:round;}
.arc__v{fill:none;stroke:url(#arcG);stroke-width:10;stroke-linecap:round;
        transition:stroke-dashoffset .6s var(--ease-out);}
.bak__n{
  position:absolute;left:0;right:0;top:1.9rem;text-align:center;
}
.bak__val{
  font-family:var(--serif);font-weight:500;font-optical-sizing:auto;
  font-size:2.375rem;line-height:1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.bak__l{
  position:absolute;left:0;right:0;top:4.6rem;text-align:center;
  font-size:.65rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);
}
.bak__side{display:flex;flex-direction:column;gap:.25rem;min-width:0;flex:1;}
.bak__drink{
  font-family:var(--serif);font-weight:500;font-optical-sizing:auto;
  font-size:1.1875rem;line-height:1.1;letter-spacing:-.015em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bak__since{font-size:.78125rem;color:var(--soft);}
.bak__stats{
  display:flex;flex-wrap:wrap;gap:.625rem;margin-top:.125rem;
  font-size:.75rem;color:var(--soft);
}
.bak__stats strong{color:var(--papier);font-weight:600;}

/* Getränkekacheln */
.tiles{
  flex:1;min-height:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-rows:minmax(0,1fr);gap:.5rem;
}
.tile{
  position:relative;background:var(--flaeche);border-radius:.875rem;
  min-height:4.5rem;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;
  transition:transform .1s var(--ease-out),background .1s linear;
}
.tile:active{transform:scale(.94);background:var(--flaeche-hoch);}
.tile.is-hit{animation:hit .42s var(--ease-out);}
@keyframes hit{
  0%{transform:scale(.94);background:var(--glut);}
  100%{transform:scale(1);background:var(--flaeche);}
}
.tile .ic{width:1.75rem;height:1.75rem;}
.tile__n{font-size:.8125rem;font-weight:500;}
.tile__s{font-size:.65rem;color:var(--faint);}
.tile__c{
  position:absolute;top:.5rem;right:.625rem;
  font-size:.6875rem;font-weight:600;color:var(--soft);
  font-variant-numeric:tabular-nums;
}

.drow{display:flex;gap:.5rem;}

.btn{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  height:3rem;border-radius:.75rem;
  font-size:.9375rem;font-weight:600;
  transition:transform .1s var(--ease-out),background .12s linear,opacity .12s linear;
}
.btn:active{transform:scale(.97);}
.btn--glut{background:var(--glut);color:var(--nacht);}
.btn--glut:active{background:var(--glut-hell);}
.btn--line{
  flex:1;border:1px solid var(--linie);color:var(--soft);
  height:2.5rem;font-size:.8125rem;font-weight:500;
}
.btn--line:active{background:rgba(244,239,228,.08);}
.btn--undo{color:var(--papier);}
.btn[disabled]{opacity:.45;pointer-events:none;}

/* ═══════════════ Rangliste ═══════════════ */
.rhead{display:flex;justify-content:space-between;align-items:center;gap:.5rem;}
.rhead__t{
  font-family:var(--serif);font-weight:500;font-optical-sizing:auto;
  font-size:1.25rem;letter-spacing:-.015em;margin:0;
}
.seg{
  display:flex;background:var(--flaeche);border-radius:99px;padding:.1875rem;
  font-size:.71875rem;font-weight:500;
}
.seg__b{
  height:1.625rem;padding:0 .75rem;border-radius:99px;
  display:flex;align-items:center;color:var(--soft);
  transition:background .16s var(--ease-out),color .16s linear;
}
.seg__b.is-on{background:var(--papier);color:var(--blatt-tief);font-weight:600;}

/* Die vier Zeilen verteilen sich über den freien Raum der Bühne */
.rank{flex:1;min-height:0;display:flex;flex-direction:column;gap:.5rem;}
.rrow{
  display:grid;grid-template-columns:1.5rem 2.25rem 1fr auto auto;
  align-items:center;gap:.625rem;
  flex:1 1 0;min-height:2.6rem;max-height:5rem;padding:0 .875rem;
  background:var(--flaeche);border-radius:.875rem;
  transition:background .3s var(--ease-out);
}
.rrow--top{background:var(--tanne);}
.rrow--me{box-shadow:inset 0 0 0 1px var(--linie-stark);}
.rrow__p{
  font-family:var(--serif);font-weight:500;font-size:1.375rem;
  color:var(--faint);line-height:1;
}
.rrow--top .rrow__p{color:var(--papier);}
.rrow__a{width:2.25rem;height:2.25rem;border-radius:50%;object-fit:cover;}
.rrow__n{min-width:0;line-height:1.2;display:flex;flex-direction:column;}
.rrow__name{font-weight:600;font-size:.9375rem;
            overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rrow__d{font-size:.71875rem;color:var(--soft);
         overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rrow__num,.rrow__bak{
  display:flex;flex-direction:column;align-items:flex-end;
  line-height:1.05;
}
.rrow__num{min-width:2.75rem;}
.rrow__bak{min-width:2.5rem;}
.rrow__big{
  font-family:var(--serif);font-weight:500;font-size:1.5rem;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.rrow__sub{font-size:.625rem;color:var(--soft);}
.rrow__bak b{
  font-family:var(--serif);font-weight:500;font-size:1.125rem;
  font-variant-numeric:tabular-nums;
}

.bhead{display:flex;justify-content:space-between;align-items:baseline;margin-top:.125rem;}
.bhead__n{font-size:.71875rem;color:var(--faint);}
.badges{display:flex;gap:.5rem;overflow:hidden;}
.badge{
  display:flex;flex-direction:column;align-items:center;gap:.3125rem;
  width:4rem;flex:none;
}
.badge__i{
  width:2.5rem;height:2.5rem;border-radius:50%;
  border:1px solid var(--linie-stark);
  display:flex;align-items:center;justify-content:center;
  color:var(--bernstein);
}
.badge--off .badge__i{border-style:dashed;color:var(--faint);opacity:.5;}
.badge__l{font-size:.625rem;color:var(--soft);text-align:center;line-height:1.2;}
.badge--off .badge__l{color:var(--faint);}

/* ═══════════════ Ich ═══════════════ */
.me{display:flex;align-items:center;gap:.875rem;}
.me__ava{width:4rem;height:4rem;border-radius:50%;object-fit:cover;
         box-shadow:0 0 0 2px var(--papier);}
.me__n{
  font-family:var(--serif);font-weight:500;font-optical-sizing:auto;
  font-size:1.5rem;letter-spacing:-.02em;line-height:1.1;
}
.me__s{font-size:.78125rem;color:var(--soft);}

.card{
  display:block;width:100%;
  background:var(--flaeche);border-radius:.75rem;padding:.625rem .875rem;
  transition:transform .1s var(--ease-out),background .12s linear;
}
button.card:active{transform:scale(.985);background:var(--flaeche-hoch);}
.card--row{display:flex;align-items:center;gap:.75rem;}
.card--slim{min-height:3rem;padding-block:.5rem;}
.card__grow{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25;}
.card__t{font-weight:600;font-size:.875rem;}
.card__s{font-size:.71875rem;color:var(--faint);font-weight:400;}
.card__v{
  font-family:var(--serif);font-weight:500;font-size:1.5rem;
  font-variant-numeric:tabular-nums;
}
.card__v small{font-family:var(--sans);font-size:.8125rem;color:var(--soft);}
.card__v--s{font-family:var(--sans);font-size:.8125rem;font-weight:500;color:var(--soft);}

/* ═══════════════ Verlauf im Blatt ═══════════════ */
.sh__tag{
  font-size:.65rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tanne);padding:.75rem 0 .25rem;
}
.sh__hrow{
  display:flex;align-items:center;gap:.625rem;width:100%;
  min-height:2.75rem;padding:.375rem 0;
  border-top:1px solid #E6DFCE;
  font-size:.84375rem;color:var(--blatt-tief);
  transition:opacity .12s linear;
}
.sh__hrow:active{opacity:.5;}
.sh__hrow__t{width:2.75rem;color:var(--blatt-soft);font-variant-numeric:tabular-nums;flex:none;}
.sh__hrow__n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sh__hrow__n em{font-style:normal;color:var(--blatt-soft);}
.sh__hrow .ic{color:var(--blatt-soft);}
.sh__tag + .sh__hrow{border-top:0;}

/* ═══════════════ Tab-Leiste ═══════════════ */
.tabs{
  display:grid;grid-template-columns:1fr 1fr 5.25rem 1fr 1fr;
  align-items:end;height:4rem;
}
.tab{
  display:flex;flex-direction:column;align-items:center;gap:.25rem;
  height:3rem;justify-content:flex-end;
  font-size:.65rem;font-weight:500;color:var(--faint);
  transition:color .16s linear,transform .1s var(--ease-out);
}
.tab.is-on{color:var(--papier);}
.tab:active{transform:scale(.92);}

.horn{
  justify-self:center;position:relative;
  width:4.5rem;height:4.5rem;border-radius:50%;
  background:var(--glut);color:var(--nacht);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 .5rem 1.5rem rgba(201,104,58,.35),0 0 0 .375rem var(--nacht);
  margin-bottom:-.125rem;
  transition:transform .12s var(--ease-out),background .16s linear;
}
.horn:active{transform:scale(.92);}
.horn .ic--horn{width:2.25rem;height:2.25rem;stroke-width:2;}
.horn.is-live{background:var(--glut-hell);}
.horn.is-live .ic--horn{animation:hornpuls 2.4s var(--ease-out) infinite;}
@keyframes hornpuls{
  0%,72%,100%{transform:scale(1);}
  78%{transform:scale(1.12);}
  86%{transform:scale(.98);}
}
.horn__ring{
  position:absolute;inset:0;width:100%;height:100%;
  transform:rotate(-90deg);pointer-events:none;
}
.horn__track{fill:none;stroke:none;}
.horn__prog{
  fill:none;stroke:var(--papier);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:125.66;stroke-dashoffset:125.66;
  opacity:.85;transition:stroke-dashoffset 1s linear;
}
.horn:not(.is-live) .horn__prog{opacity:0;}

/* ═══════════════ Blatt von unten ═══════════════ */
.scrim{
  position:fixed;inset:0;z-index:40;
  background:rgba(15,21,18,.55);
  opacity:0;transition:opacity .28s var(--ease-out);
}
.scrim.is-on{opacity:1;}

.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  max-width:32rem;margin-inline:auto;
  max-height:82dvh;
  background:var(--blatt);color:var(--blatt-tief);
  border-radius:1.375rem 1.375rem 0 0;
  box-shadow:0 -1.25rem 3.75rem rgba(0,0,0,.45);
  display:flex;flex-direction:column;
  transform:translate3d(0,100%,0);
  transition:transform .34s var(--ease-out);
  will-change:transform;
  touch-action:none;
}
.sheet.is-on{transform:translate3d(0,0,0);}
.sheet.is-drag{transition:none;}

.sheet__grab{
  padding:.625rem 0 .375rem;display:flex;justify-content:center;flex:none;
  cursor:grab;
}
.sheet__grab span{width:2.5rem;height:.25rem;border-radius:2px;background:#C9BFA7;display:block;}

.sheet__body{
  overflow-y:auto;                 /* die eine Stelle, die scrollen darf */
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-y;
  padding:0 1.125rem calc(var(--sb) + 1.375rem);
  display:flex;flex-direction:column;gap:.75rem;
}

/* Inhalte im Blatt */
.sh__kick{
  font-size:.65rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tanne);
}
.sh__t{
  font-family:var(--serif);font-weight:500;font-optical-sizing:auto;
  font-size:1.625rem;line-height:1.05;letter-spacing:-.022em;margin:0;
  text-wrap:balance;
}
.sh__lede{margin:0;font-size:.84375rem;color:var(--blatt-soft);line-height:1.45;}
.sh__facts{display:flex;flex-direction:column;}
.sh__fact{
  display:flex;justify-content:space-between;gap:.75rem;
  font-size:.84375rem;line-height:1.35;padding:.5rem 0;
  border-top:1px solid #E6DFCE;
}
.sh__fact span{color:var(--blatt-soft);}
.sh__fact b{text-align:right;font-weight:500;}
.sh__acts{display:flex;gap:.5rem;flex-wrap:wrap;}
.sh__btn{
  flex:1;min-width:8rem;
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  height:2.875rem;border-radius:.75rem;
  font-size:.875rem;font-weight:600;text-decoration:none;
  transition:transform .1s var(--ease-out),opacity .12s linear;
}
.sh__btn:active{transform:scale(.97);}
.sh__btn--fill{background:var(--tanne);color:var(--papier);}
.sh__btn--line{border:1px solid var(--blatt-linie);color:var(--blatt-tief);}
.sh__btn--glut{background:var(--glut);color:var(--nacht);}

/* Optionen (Restaurantwahl, Ortswahl) */
.sh__opts{display:flex;flex-direction:column;gap:.5rem;}
.sh__opt{
  display:flex;align-items:center;gap:.75rem;width:100%;
  min-height:3.25rem;padding:.5rem .875rem;
  border-radius:.75rem;background:#FBF8F1;border:1px solid var(--blatt-linie);
  transition:transform .1s var(--ease-out),background .12s linear;
}
.sh__opt:active{transform:scale(.985);background:#F0EADC;}
.sh__opt.is-on{background:var(--tanne);border-color:var(--tanne);color:var(--papier);}
.sh__opt.is-on .sh__opt__s{color:#D8D3C4;}
.sh__opt__b{flex:1;min-width:0;line-height:1.25;display:flex;flex-direction:column;}
.sh__opt__n{font-weight:600;font-size:.875rem;}
.sh__opt__s{font-size:.71875rem;color:var(--blatt-soft);}

/* Getränkekatalog im Blatt */
.sh__cat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;}
.sh__ct{
  background:#FBF8F1;border:1px solid var(--blatt-linie);border-radius:.75rem;
  min-height:4.75rem;padding:.5rem .25rem;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;
  transition:transform .1s var(--ease-out),background .12s linear;
}
.sh__ct:active{transform:scale(.94);background:#F0EADC;}
.sh__ct .ic{width:1.625rem;height:1.625rem;}
.sh__ct__n{font-size:.78125rem;font-weight:500;text-align:center;line-height:1.15;}
.sh__ct__s{font-size:.625rem;color:var(--blatt-soft);}

/* Zahlen-Eingabe (Gewicht) */
.sh__num{
  display:flex;align-items:center;justify-content:center;gap:1.25rem;
  padding:.5rem 0;
}
.sh__num__b{
  width:3rem;height:3rem;border-radius:50%;
  border:1px solid var(--blatt-linie);
  display:flex;align-items:center;justify-content:center;
  color:var(--blatt-tief);
  transition:transform .1s var(--ease-out),background .12s linear;
}
.sh__num__b:active{transform:scale(.9);background:#F0EADC;}
.sh__num__v{
  font-family:var(--serif);font-weight:500;font-size:3rem;line-height:1;
  font-variant-numeric:tabular-nums;min-width:5rem;text-align:center;
}
.sh__num__v small{font-family:var(--sans);font-size:1rem;color:var(--blatt-soft);}

.sh__note{
  font-size:.75rem;color:var(--blatt-soft);line-height:1.45;margin:0;
  padding:.625rem .75rem;background:#EBE4D4;border-radius:.5rem;
}
.sh__steps{margin:0;padding-left:1.125rem;font-size:.84375rem;line-height:1.6;color:var(--blatt-tief);}
.sh__steps li{margin-bottom:.25rem;}

/* ═══════════════ Meldung ═══════════════ */
.toast{
  position:fixed;left:50%;top:calc(var(--st) + .625rem);z-index:70;
  transform:translate3d(-50%,-140%,0);
  max-width:calc(100vw - 2rem);
  background:var(--papier);color:var(--blatt-tief);
  border-radius:.75rem;padding:.625rem .875rem;
  font-size:.84375rem;font-weight:500;
  box-shadow:0 .5rem 1.5rem rgba(0,0,0,.4);
  transition:transform .34s var(--ease-out);
  display:flex;align-items:center;gap:.625rem;
}
.toast.is-on{transform:translate3d(-50%,0,0);}
.toast__i{
  width:1.75rem;height:1.75rem;border-radius:50%;flex:none;
  background:var(--glut);color:var(--nacht);
  display:flex;align-items:center;justify-content:center;
}
.toast__i .ic{width:1.125rem;height:1.125rem;}

/* ═══════════════ Rücksicht ═══════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.12s !important;
  }
  .sheet{transition:opacity .16s linear;}
  .horn.is-live .ic--horn{animation:none;}
}

/* Sehr kleine Geräte: etwas enger — nichts darf über den Screen hinauswachsen */
@media (max-height:700px){
  .app{gap:.5rem;}
  .now{padding:.75rem .875rem .625rem;}
  .now__t{font-size:1.4375rem;}
  .now__tip{display:none;}
  .bak{padding:.5rem .75rem .375rem;}
  .bak__arc{width:8.25rem;}
  .bak__val{font-size:2rem;}
  .bak__n{top:1.6rem;}
  .bak__l{top:4rem;}
  .tabs{height:3.5rem;}
  .horn{width:4rem;height:4rem;}
  .horn .ic--horn{width:2rem;height:2rem;}

  /* Rangliste: kleinere Zeilen und Abzeichen, sonst drängt es sich */
  .rrow{min-height:2.5rem;gap:.5rem;padding:0 .625rem;}
  .rrow__a{width:1.875rem;height:1.875rem;}
  .rrow__big{font-size:1.25rem;}
  .rrow__name{font-size:.875rem;}
  .badge{width:3.5rem;}
  .badge__i{width:2rem;height:2rem;}
  .badge__l{font-size:.5625rem;}
  .me__ava{width:3.25rem;height:3.25rem;}
  .me__n{font-size:1.25rem;}
  .panel{gap:.5rem;}
  .card{padding:.5rem .75rem;}
  .card--slim{min-height:2.375rem;padding-block:.25rem;}
  .card__t{font-size:.8125rem;}
}

/* Das Horn ist eine gefüllte Form, keine Strichzeichnung */
.sprite g.fill path{fill:currentColor;stroke:none;}
.ic--horn{fill:currentColor;stroke:none;}
.gate__logo .ic{fill:currentColor;stroke:none;}