/* Handgeschrieben, kein Build. Wird immer geladen – egal ob Tailwind
   gerade von der CDN oder aus assets/app.css kommt. */

/* ---- Bausteine ----------------------------------------------------------
   Was auf mehreren Seiten gleich aussehen soll, steht hier einmal statt als
   wiederholte Utility-Kette. Dunkelvarianten haengen an `.dark`, das Tailwind
   auf <html> setzt. */

.karte {
  border-radius: 1rem;
  background-color: #ffffff;
  /* Der Seitenhintergrund (slate-50) liegt tonal fast auf Weiss – ohne
     spuerbaren Schatten gingen Karte und Hintergrund im Hellmodus optisch
     ineinander ueber. Der Ring bleibt fuer eine knackige Kante, dazu ein
     weicherer, groesserer Schatten fuer echte Tiefe. */
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.07), 0 10px 24px -6px rgba(15, 23, 42, 0.10);
}

.dark .karte {
  background-color: rgba(255, 255, 255, 0.035);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09);
}

.feld {
  width: 100%;
  border: 0;
  border-radius: 0.75rem;
  padding: 0.65rem 0.9rem;
  color: inherit;
  background-color: #ffffff;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.14);
}

.feld:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgb(234, 88, 12);
}

.dark .feld {
  background-color: rgba(255, 255, 255, 0.04);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.dark .feld:focus {
  box-shadow: 0 0 0 2px rgb(255, 135, 0);
}

.knopf {
  display: inline-block;
  border-radius: 0.75rem;
  padding: 0.75rem 1.25rem;
  font-weight: 600;
  text-align: center;
  transition: background-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.knopf:active {
  transform: translateY(1px);
}

.knopf-haupt {
  /* Das Orange aus dem Logo, mit dunkler Schrift – umgekehrt waere der
     Kontrast auf so einer hellen Flaeche zu schwach. */
  color: rgb(15, 23, 42);
  background-color: rgb(255, 135, 0);
  box-shadow: 0 1px 3px rgba(194, 65, 12, 0.4);
}

.knopf-haupt:hover {
  background-color: rgb(255, 158, 51);
}

.knopf-neben {
  background-color: #ffffff;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.14);
}

.knopf-neben:hover {
  background-color: rgb(248, 250, 252);
}

.dark .knopf-neben {
  background-color: rgba(255, 255, 255, 0.04);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.dark .knopf-neben:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

/* Aufklapper: das Standard-Dreieck stoert, der Rest ist Tailwind. */
.mehr,
.menue > summary {
  list-style: none;
  cursor: pointer;
}

.mehr::-webkit-details-marker,
.menue > summary::-webkit-details-marker {
  display: none;
}

/* Die Menuetafel legt sich ueber den Inhalt und braucht deshalb einen
   deckenden Grund – .karte ist im Dunkeln bewusst fast durchsichtig. */
.menue-tafel {
  border-radius: 0.875rem;
  background-color: #ffffff;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08), 0 12px 28px rgba(15, 23, 42, 0.18);
}

.dark .menue-tafel {
  background-color: rgb(15, 23, 42);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 14px 32px rgba(0, 0, 0, 0.65);
}

/* Eintraege im Handy-Menue.
   display: flex statt block – vorher schlug diese Regel Tailwinds .flex,
   weil eigen.css nach app.css geladen wird, und Symbol und Beschriftung
   standen untereinander statt nebeneinander. */
.menue-eintrag {
  display: flex;
  align-items: center;
  width: 100%;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 500;
}

.menue-eintrag:hover {
  background-color: rgba(15, 23, 42, 0.06);
}

.dark .menue-eintrag:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

/* ---- Benachrichtigung ---------------------------------------------------
   Schwebt wie eine Handy-Meldung ueber allem, auch ueber der Kopfleiste,
   und schiebt deshalb nichts weg. Verschwindet nach 20 Sekunden von
   selbst oder auf Antippen. */

.notiz-tafel {
  position: relative;
  pointer-events: auto;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  width: 100%;
  max-width: 26rem;
  padding: 0.75rem 0.85rem 0.8rem 1rem;
  border-radius: 1.25rem;
  background-color: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  /* Duenner orangener Rand statt neutralem Ring – hebt die Meldung vom
     Countdown darunter ab, ueber dem sie liegt. */
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(255, 135, 0, 0.65);
  animation: notiz-rein 420ms cubic-bezier(0.2, 0.9, 0.3, 1.25);
}

.dark .notiz-tafel {
  background-color: rgba(30, 41, 59, 0.86);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 150, 40, 0.7);
}

.notiz-tafel.geht {
  animation: none;
  opacity: 0;
  transform: translateY(-130%) scale(0.96);
  transition: opacity 260ms ease-in, transform 260ms ease-in;
}

@keyframes notiz-rein {
  from { opacity: 0; transform: translateY(-130%) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

.notiz-inhalt {
  flex: 1;
  min-width: 0;
}

/* Ohne Titelzeile bleibt der Rand der einzige Hinweis auf die Art –
   Fehler bekommen ihn deshalb in Rot statt Orange. */
.notiz-tafel[data-art="fehler"] {
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(220, 38, 38, 0.7);
}

.dark .notiz-tafel[data-art="fehler"] {
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(248, 113, 113, 0.75);
}

/* ---- Meldungsarten ------------------------------------------------------
   Vier Meldungen haben ein eigenes Gesicht: kleines Bild links, Titel ueber
   dem Text, eigene Randfarbe. Alles hier in CSS, damit die vom Server
   gerenderte Meldung und die per JavaScript gebaute gleich aussehen – das
   Markup bleibt ein <p> und ein Kreuz.
   data-art: suende, storno, austritt, coin. Alle anderen bleiben schlicht. */

.notiz-tafel[data-art="suende"]::before,
.notiz-tafel[data-art="storno"]::before,
.notiz-tafel[data-art="austritt"]::before,
.notiz-tafel[data-art="coin"]::before {
  content: "";
  flex: none;
  width: 2.2rem;
  height: 2.2rem;
  margin-top: 0.1rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.notiz-tafel[data-art="suende"]::before   { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%226 5 25 25%22%3E%3Ccircle cx=%2217%22 cy=%229.2%22 r=%222.5%22 fill=%22%23fde047%22 stroke=%22%23a16207%22 stroke-width=%221%22/%3E%3Cpath d=%22M9.6 19.4c-2.2-.3-3-2.3-1.4-3.4%22 fill=%22none%22 stroke=%22%23c2410c%22 stroke-width=%221.4%22 stroke-linecap=%22round%22/%3E%3Cellipse cx=%2218%22 cy=%2220%22 rx=%229%22 ry=%226.4%22 fill=%22%23fdba74%22 stroke=%22%23c2410c%22 stroke-width=%221.4%22/%3E%3Cellipse cx=%2216.5%22 cy=%2222.2%22 rx=%225.2%22 ry=%222.6%22 fill=%22%23fed7aa%22/%3E%3Cpath d=%22M21.6 15.2l2.6-3.4 1.2 4.3z%22 fill=%22%23fb923c%22 stroke=%22%23c2410c%22 stroke-width=%221.3%22 stroke-linejoin=%22round%22/%3E%3Crect x=%2225.6%22 y=%2218.6%22 width=%223.4%22 height=%223.6%22 rx=%221.2%22 fill=%22%23fb923c%22 stroke=%22%23c2410c%22 stroke-width=%221.2%22/%3E%3Crect x=%2212.6%22 y=%2225%22 width=%222.6%22 height=%223.2%22 rx=%22.8%22 fill=%22%23fb923c%22 stroke=%22%23c2410c%22 stroke-width=%221.2%22/%3E%3Crect x=%2221%22 y=%2225%22 width=%222.6%22 height=%223.2%22 rx=%22.8%22 fill=%22%23fb923c%22 stroke=%22%23c2410c%22 stroke-width=%221.2%22/%3E%3Ccircle cx=%2223%22 cy=%2218.4%22 r=%22.95%22 fill=%22%237c2d12%22/%3E%3Cpath d=%22M14.4 14.6h5%22 stroke=%22%237c2d12%22 stroke-width=%221.2%22 stroke-linecap=%22round%22/%3E%3C/svg%3E"); }
.notiz-tafel[data-art="storno"]::before   { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%226 6 24 24%22%3E%3Ccircle cx=%2218%22 cy=%2218%22 r=%229%22 fill=%22%23fde68a%22 stroke=%22%23a16207%22 stroke-width=%221.5%22/%3E%3Ccircle cx=%2218%22 cy=%2218%22 r=%225.6%22 fill=%22none%22 stroke=%22%23a16207%22 stroke-width=%221%22 stroke-dasharray=%221.6 1.8%22/%3E%3Cpath d=%22M12.4 23.6L23.6 12.4%22 stroke=%22%23fff%22 stroke-width=%224.4%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M12.4 23.6L23.6 12.4%22 stroke=%22%23dc2626%22 stroke-width=%222.4%22 stroke-linecap=%22round%22/%3E%3C/svg%3E"); }
.notiz-tafel[data-art="austritt"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%227 7 22 22%22%3E%3Cpath d=%22M18 8.6l9 4.8v9.2l-9 4.8-9-4.8v-9.2z%22 fill=%22%23fff%22 stroke=%22%23991b1b%22 stroke-width=%221.5%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M9 13.4l9 4.8 9-4.8M18 18.2v9.2%22 fill=%22none%22 stroke=%22%23991b1b%22 stroke-width=%221.3%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E"); }
.notiz-tafel[data-art="coin"]::before     { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%224 4 28 28%22%3E%3Ccircle cx=%2218%22 cy=%2218%22 r=%2213.5%22 fill=%22%23fb923c%22 stroke=%22%23ea580c%22 stroke-width=%221.8%22/%3E%3Ccircle cx=%2218%22 cy=%2218%22 r=%2210.4%22 fill=%22none%22 stroke=%22%23fff7ed%22 stroke-opacity=%22.6%22 stroke-width=%221%22 stroke-dasharray=%221.8 2.2%22/%3E%3Cpath d=%22M18 10.4l6.6 3.5v8l-6.6 3.5-6.6-3.5v-8z%22 fill=%22%23fff7ed%22 stroke=%22%239a3412%22 stroke-width=%221.2%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M11.4 13.9l6.6 3.5 6.6-3.5M18 17.4v8%22 fill=%22none%22 stroke=%22%239a3412%22 stroke-width=%221%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E"); }

.notiz-tafel[data-art="suende"] .notiz-text::before,
.notiz-tafel[data-art="storno"] .notiz-text::before,
.notiz-tafel[data-art="austritt"] .notiz-text::before,
.notiz-tafel[data-art="coin"] .notiz-text::before {
  display: block;
  margin-bottom: 0.1rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.notiz-tafel[data-art="suende"] .notiz-text::before   { content: "Sünde";          color: rgb(194, 65, 12); }
.notiz-tafel[data-art="storno"] .notiz-text::before   { content: "Zurückgenommen"; color: rgb(71, 85, 105); }
.notiz-tafel[data-art="austritt"] .notiz-text::before { content: "Austritt";       color: rgb(185, 28, 28); }
.notiz-tafel[data-art="coin"] .notiz-text::before     { content: "Sugar-Coin";     color: rgb(194, 65, 12); }

.dark .notiz-tafel[data-art="suende"] .notiz-text::before   { color: rgb(253, 186, 116); }
.dark .notiz-tafel[data-art="storno"] .notiz-text::before   { color: rgb(203, 213, 225); }
.dark .notiz-tafel[data-art="austritt"] .notiz-text::before { color: rgb(252, 165, 165); }
.dark .notiz-tafel[data-art="coin"] .notiz-text::before     { color: rgb(253, 186, 116); }

/* Randfarbe je Art – Soll: auf einen Blick unterscheidbar, ohne zu schreien.
   "suende" behaelt das Orange der Standardmeldung. */
.notiz-tafel[data-art="storno"] {
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(100, 116, 139, 0.7);
}

.notiz-tafel[data-art="austritt"] {
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(220, 38, 38, 0.7);
}

.notiz-tafel[data-art="coin"] {
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(255, 135, 0, 0.65);
}

.dark .notiz-tafel[data-art="storno"] {
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(148, 163, 184, 0.7);
}

.dark .notiz-tafel[data-art="austritt"] {
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(248, 113, 113, 0.75);
}

.dark .notiz-tafel[data-art="coin"] {
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 150, 40, 0.7);
}

.notiz-text {
  padding-right: 1.5rem;
  font-size: 0.95rem;
  line-height: 1.35;
  color: rgb(15, 23, 42);
}

.dark .notiz-text {
  color: rgb(241, 245, 249);
}

/* Kleines Kreuz fest in der oberen rechten Ecke. Nur hier wird geschlossen –
   ein Tipp auf die Karte selbst soll die Meldung nicht versehentlich wegwischen. */
.notiz-zu {
  position: absolute;
  top: 0.45rem;
  right: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  cursor: pointer;
  color: rgb(100, 116, 139);
  transition: background-color 120ms ease, color 120ms ease;
}

.notiz-zu:hover {
  background-color: rgba(15, 23, 42, 0.08);
  color: rgb(15, 23, 42);
}

.dark .notiz-zu {
  color: rgb(148, 163, 184);
}

.dark .notiz-zu:hover {
  background-color: rgba(255, 255, 255, 0.12);
  color: rgb(255, 255, 255);
}

@media (prefers-reduced-motion: reduce) {
  .notiz-tafel { animation: none; }
  .notiz-tafel.geht { transition: none; }
}

/* ---- Herunterziehen zum Aktualisieren -----------------------------------
   Sitzt fest oben in der Mitte und faehrt beim Ziehen herunter. Waehrend
   des Ziehens ohne Uebergang, damit sie dem Finger folgt. */

.nachladen {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-left: -1.25rem;
  border-radius: 9999px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-3.5rem);
  color: rgb(234, 88, 12);
  background-color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(255, 135, 0, 0.5);
  transition: transform 220ms ease, opacity 220ms ease;
}

.dark .nachladen {
  color: rgb(251, 146, 60);
  background-color: rgba(30, 41, 59, 0.94);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 150, 40, 0.6);
}

.nachladen.zieht {
  transition: none;
}

.nachladen.laedt svg {
  animation: nachladen-dreht 700ms linear infinite;
}

@keyframes nachladen-dreht {
  to { transform: rotate(360deg); }
}

/* Die eigene Geste ersetzt die des Browsers, sonst passiert beides. */
html {
  overscroll-behavior-y: contain;
}

/* ---- Sparschwein --------------------------------------------------------
   Die Leinwand liegt ueber dem SVG und malt nur Muenzen. Sobald sie laeuft,
   verschwinden die fest gezeichneten Muenzen darunter. Ohne JavaScript
   bleiben sie stehen, damit kein leeres Schwein dasteht. */

[data-schwein]:not(.physik) canvas {
  display: none;
}

/* Kein Aufblitzen der alten Ansicht beim Laden. Die fest gemalten Muenzen sind nur die
   Notloesung ohne JavaScript – mit JavaScript stehen sie erst, wenn die Physik nicht
   anspringt (Klasse `fallback`, siehe partials/sparschwein.php). Sonst sah man beim Laden
   kurz die Pyramide und die wartende Muenze, bevor die echten Muenzen erschienen. */
.js [data-schwein]:not(.physik):not(.fallback) .muenzen-statisch,
.js [data-schwein]:not(.physik):not(.fallback) .muenze-wartend {
  visibility: hidden;
}

/* Die Muenzen blenden weich ein, statt ploetzlich da zu sein – und erst, wenn das Bild
   steht (Klasse `bereit`, die das Skript nach dem ersten Zeichnen setzt). Vorher bliebe
   die Leinwand leer, waehrend die Physik noch aufbaut. */
[data-schwein].physik:not(.bereit) canvas {
  opacity: 0;
}

[data-schwein].bereit canvas {
  animation: schwein-ein 350ms ease-out both;
}

@keyframes schwein-ein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Ladezeichen im Bauch – erscheint erst nach 0,7 s, damit es bei schnellem Laden gar
   nicht auffaellt, und verschwindet, sobald die Physik laeuft (oder nicht mehr kommt). */
.schwein-laed {
  position: absolute;
  left: 50%;
  top: 55%;
  width: 1.75rem;
  height: 1.75rem;
  margin: -0.875rem 0 0 -0.875rem;
  border: 3px solid rgba(251, 146, 60, 0.25);
  border-top-color: rgb(251, 146, 60);
  border-radius: 9999px;
  opacity: 0;
  pointer-events: none;
  animation: laed-ein 200ms ease 700ms forwards, laed-dreh 800ms linear infinite;
}

html:not(.js) .schwein-laed,
[data-schwein].bereit .schwein-laed,
[data-schwein].fallback .schwein-laed {
  display: none;
}

@keyframes laed-ein {
  to { opacity: 1; }
}

@keyframes laed-dreh {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .schwein-laed { animation: laed-ein 200ms ease 700ms forwards; }
  [data-schwein].bereit canvas { animation: none; }
}

[data-schwein].physik svg .muenzen-statisch,
[data-schwein].physik svg .muenze-wartend {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .knopf { transition: none; }
}

/* ---- Nur Hochformat auf dem Handy ----------------------------------------
   Eine Webseite kann das Drehen nicht verbieten – nur die installierte App, per
   Manifest, und iOS ignoriert auch das. Deshalb deckt dieser Hinweis die Seite zu,
   solange ein Handy quer gehalten wird: Querformat, niedriger Bildschirm und Touch
   als Zeiger. Ein schmales Browserfenster am Computer (Maus) und Tablets (hoch genug)
   sind nicht betroffen. */
.hochkant-hinweis {
  display: none;
}

@media (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
  .hochkant-hinweis {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    text-align: center;
    color: rgb(15, 23, 42);
    background-color: rgb(248, 250, 252);
  }

  html.dark .hochkant-hinweis {
    color: rgb(241, 245, 249);
    background-color: rgb(2, 6, 23);
  }

  .hochkant-hinweis svg {
    color: rgb(234, 88, 12);
  }

  html.dark .hochkant-hinweis svg {
    color: rgb(251, 146, 60);
  }

  .hochkant-titel {
    font-size: 1.125rem;
    font-weight: 700;
  }

  .hochkant-text {
    font-size: 0.875rem;
    opacity: 0.7;
  }

  /* Dahinter nichts mehr scrollen. */
  html, body {
    overflow: hidden;
  }
}