/* ══ DIE KARTEN DES KONTAKTBOGENS ═══════════════════════════════════
   Aus dem Prototyp V3 übernommen (CSS Zeilen 3590–3660, 4467–4560,
   4573–4641 und 5690–5696); js/contact-sheet/cards.js und render.js.
   Vorn das Bild mit Herunterladen und Marker, hinten Rot mit Löschen,
   Einstellungen übernehmen und der Notiz; darunter Nummer und Sterne. */

#cv-grid,
.cv-grid {
  display: flex;
  align-items: flex-start;
  gap: 34px;
}
.cv-col {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.cv-thumb {
  will-change: transform;
}
.cv-thumb {
  cursor: pointer;
  position: relative;
  perspective: 900px;
  transition: opacity 0.25s ease;
}
/* Unter dem Zeiger bleibt das Bild, wie es ist — man sucht hier Bilder
   aus, und dabei soll keines anders aussehen, nur weil die Hand darüber
   liegt. Gewendet bleibt die Karte voll deckend. */
.cv-thumb.flipped,
.cv-thumb.flipped:hover {
  opacity: 1;
}
/* Solange ein Bild noch nicht da ist, hält es seinen Platz (4:5): ohne
   das wäre die Karte höhenlos, und das Tagesfeld hätte nichts zu
   umspannen. Geladen trägt es data-da und sein eigenes Verhältnis. */
.cv-thumb img {
  width: 100%;
  height: auto;
  display: block;
}
.cv-thumb img:not([data-da]) {
  aspect-ratio: 4 / 5;
  background: var(--grau-100);
}

/* ── WARUM DIE 3D-EIGENSCHAFTEN NUR BEIM WENDEN GELTEN ────────────
   Eine Karte mit preserve-3d ist für den Browser eine eigene Ebene, die
   er einmal rastert und danach nur noch skaliert — und der Kontaktbogen
   ist eine Fläche, die man vergrößert: beim Heranfahren sah man die
   hochgezogene Rasterung, weich. Gebraucht wird der 3D-Raum nur während
   der Drehung: `flipped` steht für die gewendete Karte, `wendet` für die
   Zeit der Drehung (cards.js turnCard). */
.cv-card {
  position: relative;
  transition: transform 0.44s cubic-bezier(0.4, 0, 0.3, 1);
}
.cv-thumb.flipped .cv-card,
.cv-thumb.wendet .cv-card {
  transform-style: preserve-3d;
}
.cv-thumb.flipped .cv-card {
  transform: rotateX(180deg);
}
.cv-thumb.flipped .cv-front,
.cv-thumb.wendet .cv-front,
.cv-thumb.flipped .cv-back,
.cv-thumb.wendet .cv-back {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.cv-front {
  position: relative;
  overflow: hidden;
  transition: visibility 0s 0.22s;
}
.cv-thumb.flipped .cv-front,
.cv-thumb.wendet .cv-front {
  transform: translateZ(1px);
}
.cv-thumb.flipped .cv-front {
  visibility: hidden;
}
.cv-back {
  position: absolute;
  inset: 0;
  background: var(--red);
  transform: rotateX(180deg);
  visibility: hidden;
  transition: visibility 0s 0.22s;
}
.cv-thumb.flipped .cv-back,
.cv-thumb.wendet .cv-back {
  transform: rotateX(180deg) translateZ(1px);
}
.cv-thumb.flipped .cv-back {
  visibility: visible;
}
@media (max-width: 600px) {
  #cv-grid,
  .cv-grid {
    gap: 16px;
  }
}

/* ── ANMERKUNGEN ───────────────────────────────────────────────────
   Auf der Rückseite lässt sich schreiben, einfach so; gesetzt wie ein
   Prompt, nur weiß auf dem Rot. */
.cv-notiz {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 46px;
  bottom: 14px;
  background: none;
  border: none;
  outline: none;
  resize: none;
  z-index: 2;
  padding: 0;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--white);
  caret-color: var(--white);
  min-height: 0;
  overflow: auto;
  scrollbar-width: none;
}
.cv-notiz::placeholder {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  font-weight: 300;
  font-style: italic;
}
.cv-notiz::-webkit-scrollbar {
  display: none;
}

/* Die Fläche über dem Bild fängt den Klick für die Lupe und trägt deren
   Zeiger — mehr nicht. Kein Schleier: wer aussucht, soll das Bild sehen,
   keine aufgehellte Fassung davon. */
.cv-overlay {
  position: absolute;
  inset: 0;
  background: none;
  cursor: zoom-in;
  z-index: 1;
}
/* Rückseite: Löschen oben rechts, das Kopierzeichen links daneben —
   darunter bleibt die Fläche für die Anmerkungen. */
.cv-del {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--white);
  transition: opacity 0.15s;
  opacity: 0.92;
}
.cv-del:hover {
  opacity: 1;
}
/* Unter dem Zeiger wird das Zeichen dicker, nicht blasser. Keine
   Haarlinien: 1,1 Punkte in Ruhe, 1,6 unter der Hand. */
.cv-dl svg,
.cv-marker svg,
.cv-del svg,
.cv-kopie svg,
.cv-edit svg {
  transition: stroke-width 0.13s ease;
}
.cv-dl svg,
.cv-edit svg {
  stroke-width: 1.58;
}
.cv-edit:hover svg {
  stroke-width: 2.3;
}
.cv-del svg,
.cv-kopie svg {
  stroke-width: 1.65;
}
.cv-del:hover svg,
.cv-kopie:hover svg {
  stroke-width: 2.67;
}
.cv-dl:hover svg {
  stroke-width: 2.3;
}
.cv-marker:hover svg {
  stroke-width: 2.4;
}
.cv-dl {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--black);
  opacity: 0;
  transition: opacity 0.15s;
}
.cv-thumb:hover .cv-dl {
  opacity: 1;
}
.cv-dl:hover {
  color: var(--black);
}
.cv-kopie {
  position: absolute;
  top: 10px;
  right: 44px;
  z-index: 2;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--white);
  transition: opacity 0.15s;
  opacity: 0.92;
}
.cv-kopie:hover {
  opacity: 1;
}
/* Die Markierung ist die AUSWAHL (history/marks.js). Ist das Bild
   markiert, wird der Marker dicker UND rot — sichtbar bleibt er trotzdem
   nur unter dem Zeiger; was stehen bleibt, ist der rote Rahmen. */
.cv-marker {
  position: absolute;
  top: 10px;
  right: 40px;
  z-index: 2;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--black);
  opacity: 0;
  transition:
    opacity 0.15s,
    color 0.15s;
}
.cv-thumb:hover .cv-marker {
  opacity: 1;
}
.cv-marker:hover {
  color: var(--black);
}
.cv-thumb.markiert .cv-marker svg {
  stroke-width: 2.6;
}
.cv-thumb.markiert .cv-marker {
  color: var(--red);
}
.cv-thumb.markiert .cv-marker:hover {
  color: var(--red);
}
/* Von hier ins Bearbeiten: links neben dem Marker, dasselbe Zeichen wie in
   der unteren Leiste (der Knopf kommt mit dem Editor, Teil 15.1). */
.cv-edit {
  position: absolute;
  top: 10px;
  right: 68px;
  z-index: 2;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--black);
  opacity: 0;
  transition: opacity 0.15s;
}
.cv-thumb:hover .cv-edit,
.bl-bild:hover .cv-edit {
  opacity: 1;
}
/* Schwarz oder weiß? Das sagt nicht der Geschmack, sondern das Bild unter
   dem Zeichen (cards.js cardTone): wo es darunter dunkel ist, stehen sie
   weiß. Die Regeln für den Zeiger oben setzen die Farbe auch — darum
   steht das hier danach und nimmt sie gleich mit. */
.cv-dl.hell,
.cv-marker.hell,
.cv-edit.hell,
.cv-dl.hell:hover,
.cv-marker.hell:hover,
.cv-edit.hell:hover {
  color: var(--white, #fff);
}
/* Trefferflächen: 22 Punkte, im Bogen 15 — mit 28 bzw. 32 Punkten
   Teilung passen 24 mit Luft. */
.cv-dl::before,
.cv-marker::before,
.cv-edit::before,
.cv-del::before,
.cv-kopie::before {
  content: '';
  position: absolute;
  inset: -1px;
}
body.hist-voll .cv-dl::before,
body.hist-voll .cv-marker::before,
body.hist-voll .cv-edit::before,
body.hist-voll .cv-del::before,
body.hist-voll .cv-kopie::before {
  inset: -4.5px;
}

/* ── DIE NUMMER UNTER DER KARTE ──────────────────────────────────
   Linksbündig an der Bildkante, wie im Druckfenster: die Raute mager und
   grau, die Zahl fett. Sie teilt die Zeile mit den Sternen; ihre Mitte
   liegt auf der Mitte der Sterne — bei jeder Sterngröße. Sie fängt
   keinen Zeiger, so wenig wie die Sterne. */
.cv-nr {
  position: absolute;
  left: 0;
  top: calc(100% + var(--stern-ab-hist, 10px) + var(--stern-hist, 12px) / 2);
  transform: translateY(-50%);
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  font-family: var(--sans);
  font-size: var(--t-nummer-groesse);
  font-weight: var(--t-nummer-gewicht);
  letter-spacing: var(--t-nummer-sperrung);
  line-height: var(--t-nummer-zeilenhoehe);
  white-space: nowrap;
  color: var(--black, #000);
}
.cv-nr .cv-raute {
  font-weight: 400;
  color: var(--grau-500);
}

/* Dieselbe rote Fläche wie überall — sie blitzt auf, wenn die Marke
   gesetzt wird, nur von der Hand, nie beim Neuzeichnen. */
.cv-thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--red);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
  transition: opacity 0.12s;
}
.cv-thumb.zieht::before {
  opacity: 1;
}
@keyframes cv-blitz {
  0% {
    opacity: 0;
  }
  18% {
    opacity: 0.62;
  }
  100% {
    opacity: 0;
  }
}
.cv-thumb.blitzt::before {
  animation: cv-blitz 0.5s ease-out forwards;
}
.cv-marke {
  position: absolute;
  left: -4px;
  right: -4px;
  height: 3px;
  background: var(--red);
  opacity: 0;
  z-index: 6;
  pointer-events: none;
  transition: opacity 0.1s;
}
body.sortier .cv-thumb {
  -webkit-user-select: none;
  user-select: none;
}

/* Von früheren Tagen liegt zunächst nur die Vorschau vor. Solche Karten
   stehen halb da — man sieht, dass es sie gibt und dass noch etwas
   fehlt. Solange gefragt wird, atmet die Karte. */
@keyframes cv-atmen {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.8;
  }
}
.cv-thumb.nurvorschau,
.cv-thumb.nurvorschau:hover {
  opacity: 0.5;
}
.cv-thumb.laedt,
.cv-thumb.laedt:hover {
  animation: cv-atmen 1.6s ease-in-out infinite;
}

/* ── DER RAHMEN EINES MARKIERTEN BILDES ───────────────────────────
   Er sagt eines: dieses Bild ist ausgewählt. Jede Kante ist anders
   stark, damit er gezeichnet und nicht gedruckt wirkt (marks.js frameOf).
   Er sitzt auf der Vorderseite und wendet sich mit ihr. */
.cv-thumb.markiert .cv-front::after {
  content: '';
  position: absolute;
  inset: 0;
  border-style: solid;
  border-color: var(--red);
  border-top-width: var(--bt, 3px);
  border-right-width: var(--br, 4px);
  border-bottom-width: var(--bb, 5px);
  border-left-width: var(--bl, 2px);
  z-index: 2;
  pointer-events: none;
}