/* ---------- Kasse & Team: Handy-Layout & Animationen ----------
   Geladen von kasse/index.html und team/index.html (nicht vom Login).
   Ergänzt style.css, ändert sie nicht. */

/* ---------- Weiche Animationen ----------
   style.css schaltet beim Antippen hart um (scale ohne Übergang, Farben
   springen). Hier bekommt alles eine kurze, ausgerollte Bewegung. */
.check-item.toggleable {
  transition:
    transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
    background-color 0.2s ease,
    opacity 0.2s ease;
}

.check-item.toggleable:active {
  transform: scale(0.985);
  transition-duration: 0.08s;
}

.check-item > span:not(.icon) {
  transition: opacity 0.25s ease;
}

.check-item .icon {
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.check-item.toggleable.on .icon {
  animation: kw-check-pop 0.28s cubic-bezier(0.2, 0.8, 0.2, 1.4);
}

@keyframes kw-check-pop {
  0% {
    transform: scale(0.6);
  }
  60% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}

.pkg-row {
  transition:
    border-color 0.15s ease,
    background-color 0.2s ease,
    transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.pkg-row:active {
  transform: scale(0.985);
  transition-duration: 0.08s;
}

.tab {
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tab-panel:not([hidden]) {
  animation: kw-panel-in 0.22s ease-out;
}

@keyframes kw-panel-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Handy ---------- */
@media (max-width: 760px) {
  body {
    margin: 0;
    padding: 30px 10px 24px;
  }

  .account-bar {
    margin-top: 4px;
  }

  /* Tabs: Breite und Spalten siehe "Tab-Leiste" weiter unten */
  .tabbar {
    margin-bottom: 12px;
  }

  .tab {
    padding: 9px 4px;
    font-size: 0.82rem;
    letter-spacing: 0;
  }

  .tab.active {
    box-shadow: 0 3px 0 var(--olive-dark);
  }

  .page-head {
    margin-bottom: 12px;
  }

  h1 {
    font-size: 1.9rem;
  }

  .layout {
    gap: 14px;
  }

  .calc-card {
    padding: 14px 12px;
    border-radius: 18px;
  }

  .ticket {
    padding: 16px 14px;
    border-radius: 18px;
  }

  /* Wetter: Datum oben, Tag-Buttons darunter nebeneinander */
  .date-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "date date"
      "prev next";
    gap: 8px;
  }

  .today-date {
    grid-area: date;
    min-width: 0;
    text-align: center;
  }

  #prevDay {
    grid-area: prev;
  }

  #nextDay {
    grid-area: next;
  }

  /* Gleicher Abstand zwischen allen Wetter-Karten */
  .top-row {
    gap: 12px;
    margin: 12px 0;
  }

  .card {
    padding: 16px 14px;
    border-radius: 18px;
    margin-bottom: 12px;
  }

  .top-row .card {
    margin-bottom: 0;
  }

  .rain-chart {
    gap: 3px;
  }

  .rain-col {
    min-width: 24px;
  }

  /* Wetter- und Blitzradar auf dem Handy weglassen. Die iframes laden
     "lazy" und werden so nie sichtbar — also auch nicht geladen. */
  .card:has(iframe) {
    display: none;
  }
}

/* ---------- Tab-Auswahl (tabs.js) ---------- */
.tab[hidden] {
  display: none !important;
}

/* Zeilenumbruch in der Knopfleiste: das Menü kommt unter die Knöpfe,
   über die Trennlinie. flex-basis am Menü allein reicht nicht — mit
   max-width passt es am Desktop sonst noch neben die Knöpfe. */
.bar-break {
  flex-basis: 100%;
  height: 0;
}

.tab-picker {
  flex: 0 1 640px;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 16px 18px;
  background: var(--cream-light);
  border-radius: 20px;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.25);
  color: var(--ink);
  text-align: center;
  /* Auf-/Zuklappen animiert tabs.js */
}

.tab-picker-title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
}

.tab-picker-presets,
.tab-picker-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.tab-picker-presets {
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 2px dashed var(--cream);
}

.tab-picker button {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--terracotta-dark);
  background: var(--white);
  border: 2px solid var(--terracotta-dark);
  border-radius: 999px;
  padding: 7px 16px;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tab-picker button:active {
  transform: scale(0.96);
}

.tab-picker button.on {
  background: var(--olive);
  border-color: var(--olive-dark);
  color: var(--white);
  box-shadow: 0 3px 0 var(--olive-dark);
}

.tab-picker-presets button.on {
  background: var(--terracotta);
  border-color: var(--terracotta-dark);
  box-shadow: 0 3px 0 var(--terracotta-dark);
}

.tab-picker-hint {
  margin: 10px 0 0;
  font-size: 0.72rem;
  color: var(--terracotta-dark);
}

/* Code-Platzhalter, solange die Codes gesperrt sind */
.code-locked {
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* ---------- Tab-Leiste ----------
   Ragt am Desktop über die 1040 px der Seite hinaus. Die Spaltenzahl
   (--tab-cols) setzt tabs.js: so viele Tabs pro Zeile wie möglich, aber
   nur so viele, dass jeder Name ganz lesbar bleibt — sonst eine Zeile mehr.
   flex-basis schlägt die feste Breite aus equalizeTabWidths. */
.tabbar {
  --tab-gap: 8px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(100vw - 40px), 1400px);
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--tab-gap);
}

@media (max-width: 760px) {
  .tabbar {
    --tab-gap: 6px;
    width: 100%;
  }
}

@media (min-width: 761px) {
  .tab {
    padding: 10px 8px;
  }
}

.tab {
  flex: 0 0
    calc((100% - (var(--tab-cols, 4) - 1) * var(--tab-gap)) / var(--tab-cols, 4));
  min-width: 0;
  max-width: 170px;
  white-space: nowrap;
  overflow: hidden;
}

/* ---------- Klare Trennung: Knöpfe oben, Tabs darunter ---------- */
.account-bar {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.35);
}