/* Angepinnt – Gestaltung zu public/pins.js.

   Arbeitet ausschliesslich mit den Werten aus styles.css: Farben ueber
   var(--...), Schriftgroessen ueber --fs-xs..--fs-2xl, Radien 8px (innen 6px),
   Abstaende in 4/8/12/16px. Keine neuen Farben, keine neuen Groessen.

   Massstab ist AUSTAUSCH/design-referenz-claude-app.md:
     - Haarlinien statt Rahmen: 1px in var(--border), nie ein eigenes Grau.
     - Kleine Radien: 8px aussen, 6px innen. Pillen nur fuer die Zahlenblase.
     - Kaum Schatten: die Karte traegt var(--shadow), sonst nichts. Tiefe
       kommt aus der Flaechenabstufung (--surface-1 auf --surface-2).
     - Gewichte 500/600, nie 700. Wenige kraeftige Woerter, viel ruhiges Grau –
       der Kontrast entsteht aus der Abstufung primaer/sekundaer, nicht aus
       Farbe.

   Der Ordnen-Zustand ist bewusst der lautere von beiden: Dort duerfen die
   Griffe sichtbar sein, weil man sie in genau diesem Moment sucht. Im
   Ruhezustand traegt die Zeile ausser dem Pfeil nichts.

   Geladen in index.html nach styles.css. */

/* Der Behaelter selbst hat keine Gestalt – die Karte bringt sie mit. Ohne Pin
   ist er leer und darf keinen Abstand erzeugen, sonst klafft auf der
   Startseite eine Luecke, wo nichts ist. */
.pin-leer { display: none; }

.pin-karte {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* ============================================================== Kopfzeile */

.pin-kopf {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 12px 12px 10px;
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text-primary);
}

.pin-kopf-zeichen {
  display: inline-flex;
  color: var(--accent-fg);
}

.pin-kopf-titel { flex: none; }
.pin-kopf-luft { flex: 1; }

/* Die Zahl ist eine Angabe, keine Warnung: dieselbe Flaeche wie die Zeilen
   darunter, kein Akzentton. Eine bunte Blase machte aus "vier Pins" eine
   Meldung. */
.pin-blase {
  flex: none;
  min-width: 20px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-align: center;
}

/* Der einzige Knopf im Ruhezustand. Ghost-Anmutung: Er soll da sein, wenn man
   ihn sucht, und sonst nicht auffallen. */
.pin-ordnen {
  flex: none;
  border: 1px solid transparent;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: color var(--dur-schnell) var(--easing),
              background-color var(--dur-schnell) var(--easing);
}
.pin-ordnen:hover { color: var(--text-primary); background: var(--surface-2); }
.pin-ordnen:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ================================================================= Zeilen */

.pin-liste { display: flex; flex-direction: column; }

/* Eine Haarlinie zwischen den Zeilen, keine um jede herum. Die Zeilen gehoeren
   zusammen – ein Rahmen je Zeile machte aus einer Liste zwoelf Kaesten. */
.pin-zeile {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-top: 1px solid var(--border);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-schnell) var(--easing);
}
.pin-zeile.ist-ordnen { cursor: default; }
.pin-zeile:hover { background: var(--surface-2); }
.pin-zeile.ist-ordnen:hover { background: none; }
.pin-zeile:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.pin-zeile-zeichen {
  flex: none;
  display: inline-flex;
  color: var(--text-muted);
}

.pin-zeile-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Ein Titel, der umbricht, macht aus der 56px-Zeile (gemessen) eine doppelt so
   hohe und zerlegt den ruhigen Rhythmus der Karte – eine Feststellung traegt
   schnell einen ganzen Satz als Titel. Er wird darum abgeschnitten; der volle
   Text steht am Ziel, dorthin fuehrt die Zeile ja. */
.pin-zeile-titel {
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pin-zeile-unter {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pin-pfeil {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  opacity: .55;
}

/* ---- Griffe im Ordnen-Zustand ---- */

.pin-griffe { flex: none; display: flex; align-items: center; gap: 2px; }

/* 32px Trefferflaeche: klein genug, dass drei nebeneinander in die Zeile
   passen, gross genug fuer einen Daumen im Handschuh. */
.pin-griff {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--dur-schnell) var(--easing),
              border-color var(--dur-schnell) var(--easing);
}
.pin-griff:hover { color: var(--text-primary); border-color: var(--border-strong); }
.pin-griff:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pin-griff[disabled] { opacity: .35; cursor: default; }
.pin-griff[disabled]:hover { color: var(--text-secondary); border-color: var(--border); }

/* Das Loesen faerbt sich erst beim Beruehren – ein dauerhaft rotes Kreuz in
   jeder Zeile machte aus dem Ordnen eine Gefahrenzone. Rueckgaengig ist es
   ohnehin in zwei Griffen: nochmal anpinnen. */
.pin-griff.ist-loesen:hover { color: var(--critical); border-color: var(--critical); }

.pin-griff-bild { width: 16px; height: 16px; }

/* ============================================== Nicht mehr verfuegbar */

/* Abgesetzt auf der tieferen Flaeche: Das gehoert zur Karte, ist aber kein
   Pin mehr. Kein Warnrot – niemand hat etwas falsch gemacht, es hat sich nur
   etwas geaendert. */
.pin-entzogen {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: var(--surface-sunken);
}

.pin-entzogen-text {
  flex: 1;
  min-width: 180px;
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.pin-aufraeumen {
  flex: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: 5px 10px;
  cursor: pointer;
  transition: color var(--dur-schnell) var(--easing),
              border-color var(--dur-schnell) var(--easing);
}
.pin-aufraeumen:hover { color: var(--text-primary); border-color: var(--border-strong); }
.pin-aufraeumen:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ====================================================== Der Pin-Knopf */

/* Sitzt in fremden Ansichten (Objektkarte, Rapportkopf, Unterlagenzeile).
   Darum keine eigene Flaeche im Ruhezustand: Er soll sich der Umgebung
   unterordnen, bis er gesetzt ist. */
.pin-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--dur-schnell) var(--easing),
              background-color var(--dur-schnell) var(--easing);
}
.pin-knopf:hover { color: var(--text-primary); background: var(--surface-2); }
.pin-knopf:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pin-knopf[disabled] { opacity: .5; cursor: default; }

/* Gesetzt: Akzentfarbe UND gefuelltes Zeichen. Die Farbe allein waere die
   einzige Aussage – wer sie nicht unterscheidet, saehe keinen Unterschied
   zwischen angepinnt und nicht angepinnt. */
.pin-knopf.ist-an { color: var(--accent-fg); }
.pin-knopf.ist-an .pin-knopf-bild { fill: currentColor; }

.pin-knopf-bild { width: 18px; height: 18px; }

/* ============================================================== Zeichen */

.pin-zeichen { width: 18px; height: 18px; }

/* ============================================================== Schmal */

@media (max-width: 560px) {
  /* Auf dem Handy zaehlt jede Zeile: Der Pfeil rechts sagt nichts, was die
     Zeile nicht schon sagt, und kostet Platz, den der Titel braucht. */
  .pin-pfeil { display: none; }
  .pin-zeile { padding: 8px 10px; }
  .pin-kopf { padding: 10px 10px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .pin-ordnen, .pin-zeile, .pin-griff, .pin-aufraeumen, .pin-knopf { transition: none; }
}