/* ---------------------------------------------------------------------
   Bilder, Marken und die Lupe

   GETRENNT VON DER UEBERSICHT, weil es nicht nur dort gebraucht wird:
   Die Projektseite zeigt Symbol und Banner, die Einstellungen zeigen die
   hochgeladenen Bilder. Als das alles noch in `uebersicht.css` stand,
   war der Banner auf der Projektseite ohne jedes Format - die Datei wird
   dort nicht geladen.
   --------------------------------------------------------------------- */

/* ------------------------------------------------------------ Farbtoene
   Sieben Toene, alle gedaempft. Bei mehr faengt man an, Bedeutung in
   Nuancen zu legen, die niemand mehr auseinanderhaelt. Definiert werden
   sie als Tokens, damit Marke, Punkt und Ersatzsymbol dieselbe Farbe
   benutzen und nicht dreimal fast dieselbe. */
:root {
  --ton-grau:    #6b7280;
  --ton-blau:    #4a6fd0;
  --ton-gruen:   #3f8f66;
  --ton-gelb:    #a8862c;
  --ton-orange:  #c07038;
  --ton-rot:     #c0504a;
  --ton-violett: #7b5bbd;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ton-grau:    #98a2b3;
    --ton-blau:    #8aa2e8;
    --ton-gruen:   #6dbd94;
    --ton-gelb:    #d4b155;
    --ton-orange:  #e09a63;
    --ton-rot:     #e08a84;
    --ton-violett: #ab8ee0;
  }
}

:root[data-theme="dark"] {
  --ton-grau:    #98a2b3;
  --ton-blau:    #8aa2e8;
  --ton-gruen:   #6dbd94;
  --ton-gelb:    #d4b155;
  --ton-orange:  #e09a63;
  --ton-rot:     #e08a84;
  --ton-violett: #ab8ee0;
}

.ton-grau    { --ton: var(--ton-grau); }
.ton-blau    { --ton: var(--ton-blau); }
.ton-gruen   { --ton: var(--ton-gruen); }
.ton-gelb    { --ton: var(--ton-gelb); }
.ton-orange  { --ton: var(--ton-orange); }
.ton-rot     { --ton: var(--ton-rot); }
.ton-violett { --ton: var(--ton-violett); }
/* ---------------------------------------------------------------- Marken */

.marken {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
}

.marken-filter { margin-top: .2rem; }

.marke {
  display: inline-flex;
  gap: .3rem;
  align-items: center;
  padding: .12rem .5rem;
  font-size: .76rem;
  color: var(--ton, var(--muted));
  text-decoration: none;
  background: color-mix(in srgb, var(--ton, var(--muted)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ton, var(--muted)) 30%, transparent);
  border-radius: 999px;
}

.marke:hover { text-decoration: none; background: color-mix(in srgb, var(--ton, var(--muted)) 22%, transparent); }

.marke-zahl {
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
  opacity: .7;
}

/* Eine gewaehlte Kategorie ist gefuellt, keine bloss umrandete. Der
   Unterschied muss auf einen Blick sichtbar sein, sonst sucht man. */
.marke-waehlbar.aktiv {
  color: var(--bg);
  background: var(--ton, var(--muted));
  border-color: var(--ton, var(--muted));
}

.marke-wahl { display: inline-flex; gap: .35rem; align-items: center; }
.marken-wahl { display: flex; flex-wrap: wrap; gap: .6rem; }

/* --------------------------------------------------------------- Symbole */

.projekt-symbol {
  flex: 0 0 auto;
  object-fit: contain;
  border-radius: 8px;
}

/* Ohne hochgeladenes Bild: der Anfangsbuchstabe auf getoentem Grund.
   Kein leeres Kaestchen - Projekte sollen auch ohne Bild
   auseinanderzuhalten sein. */
.projekt-symbol-ersatz {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--groesse, 24px);
  height: var(--groesse, 24px);
  font-size: calc(var(--groesse, 24px) * .5);
  font-weight: 600;
  line-height: 1;
  color: var(--ton, var(--muted));
  background: color-mix(in srgb, var(--ton, var(--muted)) 16%, transparent);
}

.repo-titel-symbol {
  vertical-align: -6px;
  margin-right: .45rem;
  border-radius: 6px;
}
/* ---------------------------------------------------------------- Banner
   Erscheint NUR, wenn das Projekt ihn eingeschaltet hat UND es ein Bild
   gibt. Ohne beides bleibt der Kopf unveraendert. */

.banner {
  margin-bottom: 1rem;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.banner > img {
  display: block;
  width: 100%;
  max-height: 16rem;
  object-fit: cover;
}

/* Eine Reihe zum Schieben, kein selbsttaetiger Wechsel. Ein Bild, das
   von allein weiterspringt, waehrend jemand liest, ist keine Zierde. */
.banner-galerie {
  display: flex;
  gap: .5rem;
  padding: .5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.banner-bild {
  flex: 0 0 auto;
  max-width: 22rem;
  margin: 0;
  scroll-snap-align: start;
}

.banner-bild img {
  display: block;
  width: 100%;
  max-height: 13rem;
  object-fit: cover;
  border-radius: calc(var(--radius) - 2px);
}

.banner-bild figcaption {
  padding-top: .25rem;
  font-size: .78rem;
  color: var(--muted);
}
/* ------------------------------------------------------------------ Lupe
   Bild anklicken, Bild gross sehen. Die Tafel wird von `lupe.js`
   eingeblendet - nicht mehr ueber `:target`, weil das Fragment jetzt die
   Zustandsmarke der Adresse traegt und zwei Dinge es sich nicht teilen
   koennen. */

.lupe-ausloeser {
  display: inline-flex;
  cursor: zoom-in;
  border-radius: 8px;
}

.lupe-ausloeser:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.lupe {
  display: none;
}

.lupe.auf {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
}

/* Der Grund liegt UNTER der Tafel: Ein Klick auf das Bild soll nicht
   zumachen, ein Klick daneben schon. */
.lupe-grund {
  position: absolute;
  inset: 0;
  background: rgb(8 12 18 / 78%);
  cursor: zoom-out;
}

/* DIE TAFEL BEKOMMT DIE BREITE, nicht das Bild.
   Mit `max-width: 100%` am Bild und einer Tafel, die sich nach ihrem
   Inhalt richtet, bezieht sich das Prozent auf eine Breite, die es erst
   durch das Bild gibt - ein Zirkelschluss. Der Browser loest ihn mit
   seinem Ersatzwert auf, und die "Vergroesserung" war 103 Punkte breit. */
.lupe-tafel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  align-items: center;
  width: min(46rem, 88vw);
  max-height: 100%;
  margin: 0;
}

.lupe-tafel img {
  /* EINE BREITE, KEIN MAXIMUM: Ein SVG hat keine Eigengroesse, an der
     sich `max-width` messen koennte - der Browser nimmt dann seinen
     Ersatzwert, und die "Vergroesserung" war 103 Punkte breit. Mit einer
     gesetzten Breite waechst auch ein SVG so gross, wie es soll.
     Die Hoehe bleibt gedeckelt, damit ein hohes Bild die Beschriftung
     nicht aus dem Fenster schiebt. */
  width: 100%;
  height: auto;
  max-height: calc(100vh - 9rem);
  object-fit: contain;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.lupe-text {
  padding: .3rem .7rem;
  font-size: .86rem;
  color: #e8ecf2;
  background: rgb(8 12 18 / 60%);
  border-radius: 999px;
}

/* Solange die Tafel offen ist, scrollt der Hintergrund nicht mit -
   sonst verliert man beim Schliessen seine Stelle. */
body.lupe-offen { overflow: hidden; }

.lupe-schliessen {
  position: absolute;
  padding: 0;
  font: inherit;
  cursor: pointer;
  border: 0;
  top: 1rem;
  right: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  font-size: 1.7rem;
  line-height: 1;
  color: #e8ecf2;
  text-decoration: none;
  background: rgb(255 255 255 / 12%);
  border-radius: 50%;
}

.lupe-schliessen:hover {
  color: #fff;
  text-decoration: none;
  background: rgb(255 255 255 / 22%);
}
/* ------------------------------------------------------------- Bildpflege */

.bild-abschnitt { margin-top: 1.2rem; }
.bild-liste { display: flex; flex-wrap: wrap; gap: .8rem; margin: .5rem 0; padding: 0; list-style: none; }

.bild-eintrag {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  align-items: center;
  padding: .5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.bild-eintrag img { max-width: 9rem; max-height: 6rem; object-fit: contain; }

.bild-formular { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

.feldgruppe {
  padding: .8rem;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.feldgruppe legend { padding: 0 .4rem; font-size: .85rem; color: var(--muted); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}