/* Design der Party (13.08.2026).

   DIE KARTEN HEISSEN .dashboard-card, NICHT .card. Das ist kein Geschmack,
   sondern ein behobener Fehler (13.08.2026): `.card` steht in
   vorseite-design.css und gehoert der Vorseite, die kein Dunkelthema kennt.
   Ihr `background: var(--color-surface)` bleibt cremefarben, waehrend thema.js
   die Schriftfarbe der App auf hell dreht - das Ergebnis war helle Schrift auf
   hellem Grund, unlesbar im Dunkelmodus. `.dashboard-card` nutzt `--surface`
   und dreht mit, so wie auf jeder anderen App-Seite.
   Aus demselben Grund heissen die Erklaerzeilen .card-hint und nicht
   .card-lead: Letzteres war erfunden und in keinem Stylesheet definiert.

   HIER STAND EIN KOMMENTARENDE ZU VIEL (bis 13.08.2026). Der Kopfkommentar
   war damit schon nach diesem Absatz zu Ende, und alles bis zur naechsten
   geschweiften Klammer las der Browser als einen einzigen unsinnigen
   Selektor - die Klammer danach war die von .party-leiste. Die Leiste hatte
   deshalb ueberhaupt keine Gestaltung: kein position: fixed, keine
   Akzentflaeche. Sie stand als blosser Link am Ende des Seitenflusses, wo
   sie niemand sucht, waehrend body.hat-partyleiste oben brav 2,1 rem Platz
   freihielt. Ein Stylesheet meldet so etwas nicht - es ueberspringt die
   kaputte Regel und laedt weiter.

   Laedt als LETZTE Datei nach styles.css, vorseite-design.css, app-design.css
   und dashboard-design.css - hier steht deshalb nur, was es sonst nirgends
   gibt. Karten, Knoepfe und Schrift kommen unveraendert von dort.

   Farben ueber die Token der App (--accent, --ink, --ink-soft, --surface,
   --divider). Damit stimmt der Dunkelmodus von selbst; eigene Hex-Werte
   waeren die eine Stelle, die nachts nicht mitdreht. */

/* ---- Leiste "Party laeuft" (party.js) ----
   Dieselbe Ueberlegung wie bei .jagd-leiste: Waehrend einer Party MUSS
   sichtbar sein, dass Artnamen den Server erreichen. Sie sitzt an derselben
   Stelle und darf das - beide zugleich kommen nur vor, wenn jemand waehrend
   der Klassenwoche auch noch mit der Familienrunde losgezogen ist, und dann
   steht die Party oben, weil sie die laengere ist. */
.party-leiste {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 71;
  display: block;
  text-align: center;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  background: var(--accent);
  padding: calc(0.42rem + env(safe-area-inset-top, 0px)) 0.8rem 0.42rem;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
}

/* Ohne diesen Ausgleich verschwindet die Kopfzeile unter der Leiste. Wird von
   party.js gesetzt, solange sie sichtbar ist. */
body.hat-partyleiste {
  padding-top: 2.1rem;
}

/* Die Regel aus app-design.css, die .jagd-leiste die Schrift auf den Akzent
   legt, zaehlt eine Klasse mehr und traefe diese Leiste nicht - deshalb hier
   noch einmal. */
body.app-body .party-leiste {
  color: var(--color-bg);
}

/* ---- Beitrittsformular ---- */

.party-form {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.party-form label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-top: 0.6rem;
}

.party-form input {
  font: inherit;
  font-size: 1.05rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--divider, rgba(0, 0, 0, 0.15));
  border-radius: var(--radius-sm, 8px);
  background: var(--surface);
  color: var(--ink);
}

.party-form input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Der Code wird abgetippt, oft von einem Kind vom Bildschirm eines anderen.
   Grosse Schrift mit weiten Abstaenden macht das Ablesen zuverlaessiger, und
   die feste Zeichenbreite verhindert, dass ABCD-EFGH je nach Zeichen
   unterschiedlich lang aussieht. */
#party-code {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  font-size: 1.2rem;
}

/* Das Ortsmenue im Anlege-Formular auf der Profilseite. Ohne diese Regel traegt
   es den Standardrahmen des Browsers und steht als einziges Feld der Karte aus
   der Reihe - .konto-feld gestaltet input, aber kein select. */
.konto-feld select {
  font: inherit;
  font-size: 1rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--divider, rgba(0, 0, 0, 0.15));
  border-radius: var(--radius-sm, 8px);
  background: var(--surface);
  color: var(--ink);
  width: 100%;
}

.konto-feld select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.party-hinweis {
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin: 0.1rem 0 0;
}

/* Der Kasten mit der Einwilligung. Er ist abgesetzt, weil er das Einzige auf
   der Seite ist, das man gelesen haben muss - nicht weil er huebsch ist. */
.party-einwilligung {
  margin: 0.9rem 0 0.4rem;
  padding: 0.75rem 0.85rem;
  border-left: 3px solid var(--accent);
  background: rgba(127, 127, 127, 0.08);
  border-radius: 0 var(--radius-sm, 8px) var(--radius-sm, 8px) 0;
}

.party-einwilligung p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
}

.party-fehler {
  margin: 0.7rem 0 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: #b3261e;
}

/* ---- Kopf der laufenden Party ---- */

.party-restzeit {
  margin: 0 0 0.2rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent);
}

.party-restzeit-aus {
  color: var(--ink-soft);
}

.party-zahlen {
  display: flex;
  gap: 1.6rem;
  margin: 0.9rem 0 0.2rem;
}

.party-zahl {
  display: flex;
  flex-direction: column;
}

.party-zahl strong {
  font-family: var(--font-heading, inherit);
  font-size: 2rem;
  line-height: 1.1;
  color: var(--ink);
}

.party-zahl span {
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.party-cta {
  margin: 1rem 0 0;
}

.party-cta a {
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
}

/* ---- Rangliste ----
   Zwei Zeilen je Person: oben Platz, Name und Artenzahl, darunter leiser die
   beiden Zahlen, die den Reiz ausmachen (zuerst, allein). Ein einziges Raster
   waere schmaler, aber auf einem Handy braechen die Namen um. */
.party-rangliste {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}

.party-rang {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  align-items: baseline;
  gap: 0.1rem 0.5rem;
  padding: 0.55rem 0.6rem;
  border-radius: var(--radius-sm, 8px);
  background: rgba(127, 127, 127, 0.06);
}

/* Die eigene Zeile hebt sich ab, damit man sie beim Scrollen wiederfindet -
   in einer Klasse mit 25 Namen ist das die haeufigste Frage an die Liste. */
.party-rang-ich {
  background: rgba(127, 127, 127, 0.14);
  box-shadow: inset 3px 0 0 var(--accent);
}

.party-rang-platz {
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}

.party-rang-name {
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.party-rang-zahlen {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ink);
}

.party-rang-zahlen strong {
  font-size: 1.1rem;
}

.party-rang-einheit {
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.party-rang-unten {
  grid-column: 2 / -1;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

/* ---- Der Abschluss ----
   Bewusst die einzige Karte mit Akzentrahmen: Sie ist die Ueberschrift ueber
   allem, was darunter stehen bleibt, und der Moment, in dem jemand die Seite
   herumzeigt. */
.party-ende {
  border: 2px solid var(--accent);
}

.party-ende-eyebrow {
  margin: 0 0 0.15rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.party-ende-sieger {
  margin: 0.5rem 0 0;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}

.party-ende-sieger-leer {
  font-weight: 400;
  color: var(--ink-soft);
}

/* Ein noch offenes Abzeichen sieht nur der Gastgeber. Es tritt zurueck, damit
   die vergebenen die Karte tragen. */
.party-abzeichen-offen {
  opacity: 0.55;
  background: transparent;
  border: 1px dashed var(--divider, rgba(0, 0, 0, 0.2));
}

/* ---- Sonderabzeichen ----
   Zwei Spalten ab Tablettbreite, darunter eine. Das Symbol steht als eigene
   Spalte links, damit die Titel untereinander auf einer Linie beginnen. */
.party-abzeichen-liste {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}

@media (min-width: 34rem) {
  .party-abzeichen-liste {
    grid-template-columns: 1fr 1fr;
  }
}

.party-abzeichen {
  display: grid;
  grid-template-columns: 2.1rem 1fr;
  align-items: start;
  gap: 0.1rem 0.5rem;
  padding: 0.6rem;
  border-radius: var(--radius-sm, 8px);
  background: rgba(127, 127, 127, 0.06);
}

.party-abzeichen-ich {
  background: rgba(127, 127, 127, 0.14);
  box-shadow: inset 3px 0 0 var(--accent);
}

.party-abzeichen-symbol {
  grid-row: 1 / 3;
  font-size: 1.5rem;
  line-height: 1.1;
}

.party-abzeichen-text {
  display: flex;
  flex-direction: column;
}

.party-abzeichen-text strong {
  color: var(--ink);
}

.party-abzeichen-wer {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
  overflow-wrap: anywhere;
}

.party-abzeichen-satz {
  font-size: 0.78rem;
  color: var(--ink-soft);
}

/* ---- Gemeinsames Ziel ----
   Ein breiter Balken und ein Satz, mehr nicht. Er steht bewusst VOR der
   Rangliste: Was alle zusammen schaffen, kommt vor dem, was einer allein
   schafft. */
.party-ziel-satz {
  margin: 0 0 0.6rem;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
}

.party-ziel-bahn {
  display: block;
  height: 0.7rem;
  border-radius: 999px;
  background: rgba(127, 127, 127, 0.16);
  overflow: hidden;
}

.party-ziel-fuellung {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--accent);
  transition: width 0.4s ease;
}

/* Geschafft: Der Rahmen sagt es, ohne dass Text dazukommt. */
.party-ziel-geschafft {
  border: 2px solid var(--accent);
}

/* ---- Was fehlt euch noch? ---- */

.party-tipps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* Jeder Vorschlag ist ein Link ins Detail-Sheet der Art. Er sieht aus wie eine
   Marke und nicht wie ein Textlink - eine Reihe unterstrichener Artnamen waere
   unruhig, und dass man sie antippen kann, sagt schon die Form. */
.party-tipp {
  display: inline-block;
  margin: 0;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  background: rgba(127, 127, 127, 0.1);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}

.party-tipp:hover,
.party-tipp:focus-visible {
  background: var(--accent);
  color: var(--color-bg, #fff);
}

/* ---- Teams ---- */

.party-teams {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.party-team {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.2rem 0.5rem;
  align-items: baseline;
}

.party-team-name {
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--ink);
}

.party-team-zahl {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-weight: 600;
  color: var(--ink);
}

.party-team-balken {
  grid-column: 1 / -1;
  display: block;
  height: 0.55rem;
  border-radius: 999px;
  background: rgba(127, 127, 127, 0.16);
  overflow: hidden;
}

.party-team-balken > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
}

.party-team-leute {
  grid-column: 1 / -1;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

/* ---- Verlauf über die Tage ----
   Stehende Balken statt liegender: Ein Verlauf liest sich von links nach
   rechts, und die Tage sind wenige und kurz beschriftet. */
/* Feste Spaltenbreite statt Dehnung: Bei drei Tagen liefen die Balken sonst
   quer ueber die ganze Karte auseinander, bei vierzehn wuerden sie zu Strichen.
   So sehen zwei Tage und zwei Wochen gleich aus, und was nicht mehr passt,
   scrollt seitwaerts. */
.party-tage {
  display: flex;
  align-items: flex-end;
  gap: 0.7rem;
  min-height: 7rem;
  overflow-x: auto;
  padding-bottom: 0.2rem;
}

.party-tag {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  width: 2.8rem;
}

.party-tag-balken {
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 4.5rem;
  border-radius: var(--radius-sm, 8px);
  background: rgba(127, 127, 127, 0.14);
  overflow: hidden;
}

.party-tag-balken > span {
  display: block;
  width: 100%;
  border-radius: var(--radius-sm, 8px);
  background: var(--accent);
}

.party-tag-zahl {
  font-size: 0.9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.party-tag-name {
  font-size: 0.75rem;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* ---- Wo wart ihr? ----
   Name, Zahl, darunter ein Balken ueber die ganze Breite. Derselbe Aufbau wie
   die Ortsliste im Profil, damit die beiden nicht wie zwei fremde Sachen
   aussehen. */
.party-orte {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.party-ort {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.15rem 0.5rem;
  align-items: baseline;
}

.party-ort-name {
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.party-ort-zahl {
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ink-soft);
}

.party-ort-balken {
  grid-column: 1 / -1;
  display: block;
  height: 0.4rem;
  border-radius: 999px;
  background: rgba(127, 127, 127, 0.16);
  overflow: hidden;
}

.party-ort-balken > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
}

/* ---- Fundstrom ---- */

.party-funde {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.party-fund {
  margin: 0;
  padding: 0.3rem 0;
  font-size: 0.92rem;
  border-bottom: 1px solid var(--divider, rgba(0, 0, 0, 0.08));
}

.party-fund:last-child {
  border-bottom: none;
}

.party-fund-ich strong {
  color: var(--accent);
}

.party-fund-stern {
  margin-right: 0.3rem;
}

.party-fund-wer {
  font-size: 0.84rem;
  color: var(--ink-soft);
}

/* ---- Code und Knoepfe ---- */

.party-code {
  font-family: var(--font-heading, inherit);
  font-size: 1.7rem;
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
  margin: 0.2rem 0 0.8rem;
  color: var(--ink);
}

.party-code-zeile {
  margin-bottom: 1.1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--divider, rgba(0, 0, 0, 0.08));
}

/* ---- QR-Code ----
   Der weisse Rahmen ist keine Zierde: Ein QR-Code braucht eine helle Ruhezone
   von vier Modulen, und im Dunkelmodus liegt sonst Dunkel auf Dunkel. Das SVG
   bringt seinen eigenen weissen Grund mit, die Polsterung hier setzt ihn nur
   fort. */
.party-qr {
  margin: 0 0 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}

.party-qr-bild {
  width: 11rem;
  max-width: 100%;
  padding: 0.5rem;
  background: #fff;
  border-radius: var(--radius-sm, 8px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14);
  line-height: 0;
}

.party-qr-bild svg {
  width: 100%;
  height: auto;
  display: block;
}

.party-qr figcaption {
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.party-knoepfe {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* ---- Streifen auf der Startseite ----
   Erscheint nur, wenn dieses Geraet bei einer Party mitmacht (party.js zeichnet
   ihn aus dem Merkzettel). Er steht ueber den drei Kacheln und muss sich
   deshalb gegen sie behaupten, ohne sie zu erschlagen: eine Zeile, ein Knopf,
   fertig. Auf dem Handy stapelt er sich. */
.party-start {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 var(--leading, 1.5rem);
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-md, 12px);
  border: 2px solid var(--accent);
  background: rgba(127, 127, 127, 0.06);
}

.party-start-kicker {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1;
}

.party-start-text {
  flex: 1 1 auto;
  min-width: 0;
}

.party-start-titel {
  margin: 0;
  font-family: var(--font-heading, inherit);
  font-size: 1.15rem;
  line-height: 1.25;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.party-start-zeile {
  margin: 0.1rem 0 0;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.party-start-knopf {
  flex: 0 0 auto;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--color-bg, #fff);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  white-space: nowrap;
}

/* Vorbei: Der Rahmen tritt zurueck, der Knopf bleibt. Das Ergebnis ist noch
   interessant, aber es drueckt nicht mehr. */
.party-start-vorbei {
  border-color: var(--divider, rgba(0, 0, 0, 0.15));
}

.party-start-vorbei .party-start-knopf {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}

@media (max-width: 30rem) {
  .party-start {
    flex-wrap: wrap;
  }
  .party-start-knopf {
    width: 100%;
    text-align: center;
  }
}

/* ---- Party verwalten (nur Gastgeber) ---- */

.party-hostbereich {
  margin: 1rem 0 0.4rem;
}

.party-umbenennen {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1.2rem;
}

.party-umbenennen label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.party-umbenennen input {
  font: inherit;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--divider, rgba(0, 0, 0, 0.15));
  border-radius: var(--radius-sm, 8px);
  background: var(--surface);
  color: var(--ink);
}

.party-umbenennen input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.party-gaeste {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.7rem;
}

.party-gast {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius-sm, 8px);
  background: rgba(127, 127, 127, 0.06);
}

.party-gast-name {
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.party-gast-zahl {
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ink-soft);
}

/* Leise und klein: Entfernen ist der seltene Fall, nicht der Normalfall. Rot
   erst beim Antippen - eine Liste voller roter Knoepfe sieht nach Gefahr aus,
   wo meistens gar nichts zu tun ist. */
.party-gast-raus {
  font: inherit;
  font-size: 0.8rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--divider, rgba(0, 0, 0, 0.2));
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
}

.party-gast-raus:hover,
.party-gast-raus:focus-visible {
  border-color: #b3261e;
  color: #b3261e;
}

.party-gast-raus:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ---- Die Karte im Profil ----
   Nur die eine Zeile ist eigen; Karte, Formular und Knoepfe kommen von den
   Klassen der Profilseite (.dashboard-card, .konto-form, .konto-button). */
.party-karte-zeile {
  margin: 0 0 0.9rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
}