/* Die Akzentfarben sind die sechs Farben, die das Spectra-6-Panel selbst kann.
   Die Oberfläche spricht damit dieselbe Sprache wie das Gerät, für das sie da
   ist — und man gewöhnt sich beim Bedienen an die Palette, in der später jedes
   Foto landet. */
:root {
  --schwarz: #1c1c1e;
  --weiss:   #e9e5db;
  --gelb:    #e2bd3e;
  --rot:     #ba342c;
  --blau:    #2a3e94;
  --gruen:   #367a44;

  --grund:   #f6f3ec;
  --flaeche: #fffdf9;
  --tinte:   #22201d;
  --gedaempft: #79736a;
  --linie:   rgba(34, 32, 29, .12);
  --schatten: 0 1px 2px rgba(34,32,29,.05), 0 6px 20px rgba(34,32,29,.06);
  --rund: 16px;
  --leiste: 4.4rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund:   #17161a;
    --flaeche: #211f24;
    --tinte:   #efece6;
    --gedaempft: #a29b91;
    --linie:   rgba(239,236,230,.14);
    --schatten: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    --gelb: #e6c65a; --rot: #d8564c; --blau: #6f82d8; --gruen: #57a468;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 16px/1.55 ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  background: var(--grund);
  color: var(--tinte);
  /* Die Leiste klebt unten; ohne Polster verschwindet der letzte Knopf
     dahinter, und zwar genau der, den man drücken will. */
  padding-bottom: calc(var(--leiste) + env(safe-area-inset-bottom));
}
a { color: inherit; }

/* --- Navigation ---------------------------------------------------------
   Am Handy unten: hochgeladen wird einhändig aus dem Urlaub, und der Daumen
   erreicht den oberen Bildschirmrand nicht. Am Schreibtisch oben, wo man sie
   erwartet. */
nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; justify-content: space-around; align-items: stretch;
  background: color-mix(in srgb, var(--flaeche) 92%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--linie);
  padding-bottom: env(safe-area-inset-bottom);
}
nav a, nav button {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: .15rem;
  padding: .55rem .2rem; min-height: var(--leiste);
  font-size: .68rem; font-weight: 600; letter-spacing: .01em;
  color: var(--gedaempft); text-decoration: none;
  background: none; border: 0; cursor: pointer; font-family: inherit;
}
nav a.aktiv { color: var(--blau); }
nav svg { width: 22px; height: 22px; stroke-width: 1.8; }

main { padding: 1.1rem 1rem 2rem; max-width: 780px; margin: 0 auto; }

@media (min-width: 720px) {
  body { padding-bottom: 0; }
  nav {
    position: sticky; top: 0; bottom: auto;
    justify-content: center; gap: .3rem; padding: .5rem;
    border-top: 0; border-bottom: 1px solid var(--linie);
  }
  nav a, nav button {
    flex: 0 0 auto; flex-direction: row; gap: .45rem;
    min-height: 0; padding: .55rem .9rem; font-size: .92rem;
    border-radius: 10px;
  }
  nav a.aktiv { background: color-mix(in srgb, var(--blau) 12%, transparent); }
  main { padding-top: 1.6rem; }
}

/* --- Typografie --------------------------------------------------------- */
h1 { font-size: 1.6rem; letter-spacing: -.02em; margin: 0 0 1.1rem; }
h2 { font-size: 1.05rem; margin: 1.8rem 0 .7rem; color: var(--gedaempft);
     text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
h3 { font-size: 1.15rem; margin: 0; letter-spacing: -.01em; }

/* --- Karten ------------------------------------------------------------- */
.karte {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--rund); box-shadow: var(--schatten);
  padding: 1rem; margin-bottom: .9rem;
}
.kopf { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }

/* Ein Passepartout: das Bild sitzt in einem Rahmen, wie später an der Wand. */
.passepartout {
  margin: .9rem 0 0; padding: .7rem; border-radius: 10px;
  background: var(--weiss); border: 1px solid var(--linie);
}
@media (prefers-color-scheme: dark) { .passepartout { background: #2c2930; } }
.passepartout img {
  display: block; width: 100%; border-radius: 3px;
  /* Renditions sind 800×480 mit hartem Dither. Interpolation würde genau das
     Muster verwischen, das man beurteilen will. */
  image-rendering: pixelated;
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.unterschrift {
  text-align: center; font-size: .85rem; color: var(--gedaempft);
  padding-top: .6rem; font-style: italic;
}

/* --- Statusanzeigen ----------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .6rem; border-radius: 999px;
  background: color-mix(in srgb, var(--tinte) 6%, transparent);
  font-size: .8rem; font-variant-numeric: tabular-nums;
}
.chip svg { width: 15px; height: 15px; stroke-width: 1.9; opacity: .75; }
.chip.warnung { background: color-mix(in srgb, var(--rot) 15%, transparent); color: var(--rot); font-weight: 600; }
.chip.gut     { background: color-mix(in srgb, var(--gruen) 15%, transparent); color: var(--gruen); }

.akku { width: 34px; height: 8px; border-radius: 3px; overflow: hidden;
        background: color-mix(in srgb, var(--tinte) 15%, transparent); }
.akku span { display: block; height: 100%; background: var(--gruen); }
.akku.schwach span { background: var(--rot); }

.punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--gruen); flex: none; }
.punkt.still { background: var(--rot); }
.punkt.nie   { background: var(--gedaempft); }

/* --- Formulare ---------------------------------------------------------- */
label.feld { display: block; margin: 1rem 0 .35rem; font-weight: 600; font-size: .92rem; }
textarea,
input[type=text], input[type=password], input[type=number], select {
  width: 100%; padding: .85rem; font-size: 1rem; font-family: inherit;
  color: var(--tinte); background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: 12px;
}
input:focus, select:focus, button:focus-visible {
  outline: 2px solid var(--blau); outline-offset: 1px;
}

/* Große Tippfläche statt winzigem „Datei auswählen" — am Handy ist der
   Systemknopf kaum zu treffen. */
.ablage {
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  padding: 2rem 1rem; margin-top: .4rem;
  border: 2px dashed var(--linie); border-radius: var(--rund);
  background: var(--flaeche); cursor: pointer; text-align: center;
}
.ablage svg { width: 30px; height: 30px; stroke-width: 1.5; color: var(--blau); }
.ablage strong { font-size: 1rem; }
.ablage small { color: var(--gedaempft); }
.ablage input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ablage.gefuellt { border-style: solid; border-color: var(--gruen); }

.auswahl { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
.auswahl label {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem .9rem; border: 1px solid var(--linie); border-radius: 999px;
  background: var(--flaeche); cursor: pointer; user-select: none;
}
.auswahl input { accent-color: var(--blau); width: 1.05rem; height: 1.05rem; }
.auswahl label:has(input:checked) {
  border-color: var(--blau); background: color-mix(in srgb, var(--blau) 10%, transparent);
  font-weight: 600;
}

button.haupt, .knopf {
  display: block; width: 100%; margin-top: 1.2rem;
  padding: .95rem 1.2rem; font: inherit; font-weight: 700;
  background: var(--blau); color: #fff; border: 0; border-radius: 12px;
  cursor: pointer; text-align: center; text-decoration: none;
}
button.haupt:active { transform: translateY(1px); }
button.leise {
  width: auto; margin-top: .8rem; padding: .55rem .9rem; font-size: .88rem;
  background: none; color: var(--blau); border: 1px solid var(--linie);
  border-radius: 999px; cursor: pointer; font-family: inherit; font-weight: 600;
}

/* --- Sonstiges ---------------------------------------------------------- */
.meta { color: var(--gedaempft); font-size: .87rem; margin: .25rem 0 0; }
.leer {
  text-align: center; color: var(--gedaempft); padding: 2.5rem 1rem;
  border: 1px dashed var(--linie); border-radius: var(--rund);
}
.leer svg { width: 34px; height: 34px; stroke-width: 1.4; opacity: .5; margin-bottom: .5rem; }
.leer a { color: var(--blau); font-weight: 600; }

.token {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .82rem; word-break: break-all; line-height: 1.6;
  background: color-mix(in srgb, var(--gelb) 18%, var(--flaeche));
  border: 1px solid color-mix(in srgb, var(--gelb) 45%, transparent);
  border-radius: 12px; padding: .8rem; margin: .6rem 0;
}
.fehler {
  color: var(--rot); font-weight: 600; background: color-mix(in srgb, var(--rot) 10%, transparent);
  padding: .7rem .9rem; border-radius: 12px; margin: 0 0 1rem;
}

.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; margin-top: .8rem; }
.galerie figure { margin: 0; }
.galerie img { width: 100%; display: block; border-radius: 8px; border: 1px solid var(--linie); image-rendering: pixelated; }
.galerie figcaption { font-size: .78rem; color: var(--gedaempft); padding-top: .3rem; }
.wartet {
  display: grid; place-items: center; aspect-ratio: 5/3; border-radius: 8px;
  border: 1px dashed var(--linie); font-size: .8rem; color: var(--gedaempft);
}

.anmeldung { max-width: 340px; margin: 12vh auto 0; text-align: center; }
.anmeldung .logo { font-size: 2.6rem; line-height: 1; margin-bottom: .4rem; }
.anmeldung form { text-align: left; }

/* Zuschnitt-Vorschau: dasselbe Seitenverhältnis wie das Panel, damit sichtbar
   ist, was wirklich wegfällt. */
.buehne {
  position: relative; overflow: hidden; width: 100%;
  border-radius: 12px; border: 1px solid var(--linie);
  background: var(--tinte); margin-top: .4rem;
  cursor: grab; touch-action: none; user-select: none;
}
.buehne:active { cursor: grabbing; }
.buehne img { position: absolute; max-width: none; display: block; }
/* Drittel-Linien als leise Setzhilfe, nicht als Dekoration. */
.buehne::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right, transparent 33.33%, rgba(255,255,255,.28) 33.33%,
      rgba(255,255,255,.28) calc(33.33% + 1px), transparent calc(33.33% + 1px),
      transparent 66.66%, rgba(255,255,255,.28) 66.66%,
      rgba(255,255,255,.28) calc(66.66% + 1px), transparent calc(66.66% + 1px)),
    linear-gradient(to bottom, transparent 33.33%, rgba(255,255,255,.28) 33.33%,
      rgba(255,255,255,.28) calc(33.33% + 1px), transparent calc(33.33% + 1px),
      transparent 66.66%, rgba(255,255,255,.28) 66.66%,
      rgba(255,255,255,.28) calc(66.66% + 1px), transparent calc(66.66% + 1px));
}

/* Löschen ist endgültig — der Knopf trägt die Warnfarbe, aber leise. Ein
   greller Knopf neben jedem Bild macht das Archiv unruhig. */
button.leise.gefahr { color: var(--rot); border-color: color-mix(in srgb, var(--rot) 35%, transparent); }
button.leise.klein { margin-top: .35rem; padding: .3rem .6rem; font-size: .74rem; }
.aktionen { display: flex; justify-content: flex-end; }
.galerie figcaption form { margin: 0; }

/* Archiv als Kachelraster. Die Aktionen leben in der Großansicht — hier zählt
   nur, ein Bild wiederzuerkennen. */
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.kachel {
  display: block; text-decoration: none; background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: 12px; overflow: hidden;
  box-shadow: var(--schatten);
}
.kachel img { width: 100%; display: block; image-rendering: pixelated; }
.kachel .titel {
  display: block; padding: .45rem .6rem; font-size: .82rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kachel:active { transform: scale(.99); }

textarea { min-height: 7rem; resize: vertical; line-height: 1.4; }

/* Post-it im Zuschnitt-Editor. Weißes Feld mit schwarzer Schrift — genau so
   zeichnet es der Server, weil heller Text auf einem gedittherten Foto nicht
   lesbar wäre und dieses Panel keinen Schlagschatten kann. */
.postit {
  position: absolute; transform: translate(-50%, -50%);
  max-width: 88%; padding: .3em .45em;
  background: #fff; color: #000; border: 2px solid #000;
  font-family: system-ui, sans-serif; line-height: 1.3;
  cursor: grab; white-space: pre-wrap; word-break: break-word;
}
.postit:active { cursor: grabbing; }
input[type=range] { width: 100%; accent-color: var(--blau); }

/* --- Wer hat es geschickt ------------------------------------------------
   Nur für den Admin sichtbar. Bei einem einzigen Konto bleibt beides weg:
   ein Name an jeder Kachel, der immer derselbe ist, trägt nichts bei. */
.filterleiste {
  display: flex; gap: .4rem; overflow-x: auto; margin: -.3rem 0 1rem;
  padding-bottom: .3rem; scrollbar-width: none;
}
.filterleiste::-webkit-scrollbar { display: none; }
.marke {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .7rem; border-radius: 999px;
  border: 1px solid var(--linie); background: var(--flaeche);
  color: var(--gedaempft); text-decoration: none;
  font-size: .82rem; font-weight: 600;
}
.marke.aktiv {
  border-color: transparent; color: #fff;
  background: var(--blau);
}
.marke .zahl {
  font-weight: 500; font-variant-numeric: tabular-nums; opacity: .7;
}
.kachel .urheber {
  display: block; padding: 0 .6rem .45rem; margin-top: -.3rem;
  font-size: .72rem; color: var(--gedaempft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- Wer gerade senden darf ---------------------------------------------
   Ein Schalter je Konto, direkt am Rahmen. Abgeschaltet heißt: Bilder bleiben
   im Archiv, erreichen den Rahmen aber nicht — weder als aktuelles Bild noch
   beim Durchblättern. */
.sender { margin-top: .9rem; }
.sender-titel {
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--gedaempft); margin-bottom: .4rem;
}
.sender-liste { display: flex; flex-wrap: wrap; gap: .4rem; }
.sender-liste form { margin: 0; }
.schalter {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .7rem .35rem .6rem; border-radius: 999px;
  font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
  border: 1px solid var(--linie); background: var(--flaeche);
}
.schalter::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 50%;
  background: currentColor; opacity: .9;
}
.schalter.an  { color: var(--gruen); border-color: color-mix(in srgb, var(--gruen) 40%, transparent); }
.schalter.aus { color: var(--gedaempft); }
.schalter.aus::before { background: none; box-shadow: inset 0 0 0 1px currentColor; }
.schalter .zahl { font-weight: 500; opacity: .65; font-variant-numeric: tabular-nums; }
.schalter:active { transform: scale(.97); }

/* --- Reihenfolge & Galerie ------------------------------------------------
   Eine gezogene Liste: sort_order ist auch für den Rahmen die einzige
   Wahrheit, also zeigt genau diese Reihenfolge, was oben "aktuell" ist, was
   in den ersten acht als Galerie läuft und was der ganze Verlauf ist. */
.reihenfolge-link {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: .5rem; font-size: .82rem; font-weight: 600;
  color: var(--blau); text-decoration: none;
}
.reihenfolge-link svg { width: 16px; height: 16px; }

.rf-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.rf-zeile {
  display: grid; grid-template-columns: auto auto 3.4rem 1fr; align-items: center;
  gap: .7rem; padding: .55rem .7rem; border-radius: 12px;
  background: var(--flaeche); border: 1px solid var(--linie);
  touch-action: none; user-select: none;
}
.rf-zeile.in-galerie { background: color-mix(in srgb, var(--gelb) 10%, var(--flaeche)); }
.rf-zeile.stumm { opacity: .45; }
.rf-zeile.rf-ziehend { box-shadow: var(--schatten); border-color: var(--blau); z-index: 2; }
.rf-griff { cursor: grab; font-size: 1.3rem; line-height: 1; color: var(--gedaempft); padding: .2rem; }
.rf-griff:active { cursor: grabbing; }
.rf-nr {
  min-width: 1.4rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--gedaempft); font-size: .85rem;
}
.rf-bild { width: 3.4rem; height: 3.4rem; border-radius: 8px; object-fit: cover; image-rendering: pixelated; }
.rf-platzhalter {
  display: flex; align-items: center; justify-content: center;
  background: var(--linie); color: var(--gedaempft); font-size: .68rem; text-align: center;
}
.rf-info { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.rf-info strong { font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rf-urheber { font-size: .74rem; color: var(--gedaempft); }
.rf-abzeichen { display: flex; gap: .3rem; }
.abz {
  display: inline-block; padding: .1rem .5rem; border-radius: 999px;
  font-size: .68rem; font-weight: 700;
}
.abz-aktuell { background: color-mix(in srgb, var(--gruen) 18%, transparent); color: var(--gruen); }
.abz-galerie { background: color-mix(in srgb, var(--gelb) 25%, transparent); color: #7a5d10; }
.abz-stumm   { background: var(--linie); color: var(--gedaempft); }

@media (min-width: 560px) {
  .rf-zeile { grid-template-columns: auto auto 4.4rem 1fr; }
  .rf-bild, .rf-platzhalter { width: 4.4rem; height: 4.4rem; }
}