/* ── COMPARE SLIDER ── */

/* ── CONTENT VIEW (Menü-Seiten) ── */
#content-view {
  position: absolute;
  inset: 0;
  display: none;
  overflow-y: auto;
  background: var(--white);
  z-index: 8;
  align-items: flex-start;
  justify-content: center;
  padding: 60px var(--pad);
  scrollbar-width: none;
  cursor: pointer;
}
#content-view:has(#content-body.hist-view) {
  padding-top: var(--pad);
}
#content-view::-webkit-scrollbar {
  width: 0;
}
#content-view.on {
  display: flex;
}
#content-body {
  max-width: 560px;
  width: 100%;
  cursor: default;
}
#content-body p {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 300;
  color: var(--black);
  line-height: 1.85;
  margin-bottom: 1.5em;
}
#content-body p:last-child {
  margin-bottom: 0;
}
.invoice-list {
  margin-top: 0.5em;
  margin-bottom: 1.5em;
}
.invoice-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}
.invoice-row:last-child {
  border-bottom: none;
}
.invoice-year {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 300;
  color: var(--black);
}
.invoice-dl {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mid);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  transition: color 0.15s;
}
.invoice-dl:hover {
  color: var(--black);
}
/* ── TAGESBLOECKE IN DER GROSSEN HISTORIE ─────────────────────────
   Ueber den Bildern eines Tages liegt dieselbe duenne Linie wie an den
   Aufklappmenues, nur waagerecht; darunter links das Datum, rechts die
   drei Handlungen fuer diesen Tag.                                   */
.cv-tag + .cv-tag {
  margin-top: 58px;
}
/* Breiter als das Raster: die Karten stehen mit ihrem zufaelligen Versatz
   bis zu vierzehn Punkte darueber hinaus, und die Linie darf nie schmaler
   wirken als die Bilder darunter.                                    */
.cv-tag-linie {
  height: 1px;
  background: #c9c9c9;
  width: calc(100% + 48px);
  margin-left: -24px;
}
/* Der Kopf nimmt Breite und Versatz der Linie: das Datum steht an ihrem
   linken Ende, die Zeichen an ihrem rechten. Im Raster allein laege er
   24 Punkte innerhalb — die Linie reicht ja darueber hinaus, damit sie
   nie schmaler wirkt als die Bilder darunter. Die zwei Punkte Polster
   der Knoepfe gleicht der rechte Rand wieder aus.                    */
.cv-tag-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 9px 0 22px;
  width: calc(100% + 48px);
  margin-left: -24px;
  margin-right: -24px;
}
/* Zwei Punkte Polster hat der Knopf, knapp zwei weitere laesst das
   Zeichen in seinem Feld frei: erst zusammen steht das Kreuz wirklich
   auf dem Ende der Linie und nicht bloss sein Kasten.            */
.cv-tag-aktionen {
  margin-right: -3.8px;
}
/* Das Datum traegt die Schrift eines Chips aus dem linken Aufklappmenue:
   dieselbe Groesse, dieselbe Familie. Im Grauwert steht es einen Schritt
   davor — ein Chip haengt an seiner Gruppe und darf zurueckstehen, das
   Datum traegt einen ganzen Tag. Oben buendig mit den Zeichen rechts. */
.cv-tag-datum {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  color: #8c8c8c;
  white-space: nowrap;
  line-height: 1;
  padding-top: 4px;
}
/* Die drei Handlungen tragen dieselben Zeichen wie die Karten: Marker,
   Pfeil, Kreuz. Ohne Text — die Zeichen sind in dieser App gesetzt.  */
.cv-tag-aktionen {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: flex-end;
}
.cv-tag-aktionen button {
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: #8c8c8c;
  transition: color 0.15s;
  line-height: 0;
}
/* Die Striche kommen aus den Zeichen selbst (0,9 und 1,55) — hier in der
   Tageszeile stehen sie etwas staerker, sonst wirken sie neben dem Datum
   zu fein. Auf den Karten bleiben sie, wie sie sind.                 */
.cv-tag-aktionen button .sym-linie {
  stroke-width: 1.15;
}
.cv-tag-aktionen button .sym-marker {
  stroke-width: 1.85;
}
/* Beim Ueberfahren und im eingeschalteten Zustand werden die Zeichen dunkler
   UND dicker — kein Rot: Rot heisst in dieser App wegnehmen und markieren,
   nicht „hier ist der Zeiger". Der Strich waechst je Zeichen von seinem
   eigenen Wert aus, sonst wuerde der Marker (1,55) neben Pfeil und Kreuz
   (0,9) plump.                                                        */
.cv-tag-aktionen button svg {
  transition: stroke-width 0.13s ease;
}
.cv-tag-aktionen button:hover,
.cv-tag-aktionen button:active,
.cv-tag-aktionen button.an {
  color: var(--black);
}
.cv-tag-aktionen button:hover .sym-linie,
.cv-tag-aktionen button:active .sym-linie,
.cv-tag-aktionen button.an .sym-linie {
  stroke-width: 1.7;
}
.cv-tag-aktionen button:hover .sym-marker,
.cv-tag-aktionen button:active .sym-marker,
.cv-tag-aktionen button.an .sym-marker {
  stroke-width: 2.5;
}
/* Historie-Grid — frei arrangiert, keine Überschneidungen */
#content-body.hist-view {
  max-width: min(960px, calc(100vw - 80px));
}
#cv-grid,
.cv-grid {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}
.cv-col {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.cv-thumb {
  cursor: pointer;
  position: relative;
  perspective: 900px;
  transition: opacity 0.25s ease;
}
.cv-thumb:hover {
  opacity: 0.85;
}
/* Gewendet bleibt die Karte voll deckend — sonst wuerde aus dem Rot der
   Rueckseite ein Rosa.                                              */
.cv-thumb.flipped,
.cv-thumb.flipped:hover {
  opacity: 1;
}
.cv-thumb img {
  width: 100%;
  height: auto;
  display: block;
}
/* Die Karte: vorn das Bild, hinten Rot. Gewendet wird per Doppelklick, wie
   bei den Miniaturen in der Leiste, und um dieselbe waagerechte Achse. */
.cv-card {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.44s cubic-bezier(0.4, 0, 0.3, 1);
}
.cv-thumb.flipped .cv-card {
  transform: rotateX(180deg);
}
/* Beide Seiten liegen sonst genau aufeinander, und die Kinder der
   abgewandten Seite malt der Browser weiter — die Zahl, der Marker und der
   Pfeil standen auf dem Rot, und die Blende darueber machte aus dem Rot ein
   Rosa. Zwei Mittel, dieselben wie am Generieren-Knopf: jede Seite steht
   einen Pixel vor ihrer eigenen Ebene, und auf halber Wende (0,22 s von
   0,44 s) wird die abgewandte ausdruecklich unsichtbar.              */
.cv-front,
.cv-back {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.cv-front {
  position: relative;
  overflow: hidden;
  transform: translateZ(1px);
  transition: visibility 0s 0.22s;
}
.cv-thumb.flipped .cv-front {
  visibility: hidden;
}
.cv-back {
  position: absolute;
  inset: 0;
  background: var(--red);
  transform: rotateX(180deg) translateZ(1px);
  visibility: hidden;
  transition: visibility 0s 0.22s;
}
.cv-thumb.flipped .cv-back {
  visibility: visible;
}
@media (max-width: 600px) {
  #cv-grid,
  .cv-grid {
    gap: 16px;
  }
}
/* Hover-Overlay über Historiebild — Lightbox-Trigger */
.cv-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.65);
  opacity: 0;
  transition: opacity 0.15s;
  cursor: zoom-in;
  z-index: 1;
}
.cv-thumb:hover .cv-overlay {
  opacity: 1;
}
/* Rueckseite: das Kreuz oben rechts, das Kopierzeichen unten links —
   beide in Weiss auf dem Rot, wie auf der Rueckseite der Miniaturen. */
.cv-del {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: #fff;
  transition: opacity 0.15s;
  opacity: 0.92;
}
.cv-del:hover {
  opacity: 1;
}
/* Dasselbe Prinzip wie in der Tageszeile: beim Ueberfahren wird das Zeichen
   dicker (und wo es auf Weiss sitzt, auch dunkler). Der Strich waechst je
   Zeichen von seinem eigenen Wert aus.                                */
.cv-dl svg,
.cv-marker svg,
.cv-del svg,
.cv-kopie svg {
  transition: stroke-width 0.13s ease;
}
.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: 1.6;
}
.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);
} /* dunkler und dicker, nicht blasser */
.cv-kopie {
  position: absolute;
  bottom: 10px;
  left: 12px;
  z-index: 2;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: #fff;
  transition: opacity 0.15s;
  opacity: 0.92;
}
.cv-kopie:hover {
  opacity: 1;
}
/* Der Marker sitzt vorn, wo frueher das Kopierzeichen sass: er allein
   (oder Umschalt + Klick) setzt die Markierung.                      */
.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);
}
/* Ist das Bild markiert, wird der Marker nur DICKER — sichtbar bleibt er
   trotzdem nur, solange der Zeiger auf dem Bild liegt. Was stehen bleibt,
   sind der Zahlenkreis und der schwarze Rahmen.                      */
.cv-thumb.pinned .cv-marker svg {
  stroke-width: 2.6;
}
/* Nummerierungskreis unten links */
.cv-num {
  position: absolute;
  bottom: 8px;
  left: 8px;
  z-index: 3;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #e8391c;
  color: #fff;
  font-size: 17px;
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  opacity: 0;
  transition:
    opacity 0.15s,
    background 0.15s,
    transform 0.15s;
}
.cv-thumb:hover .cv-num {
  opacity: 1;
}
.cv-thumb.pinned .cv-num {
  opacity: 1;
}
/* Unter Umschalt liegt auch hier die rote Flaeche auf — dasselbe System wie
   ueberall: blass fuer alle, 70 % unter dem Zeiger, 90 % beim Bewegen. Sie
   deckt die Knoepfe zu, damit man beim Schieben nichts anderes trifft. */
.cv-thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--red);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
  transition: opacity 0.12s;
}
body.sortier .cv-thumb::before {
  opacity: 0.7;
}
body.sortier .cv-thumb:hover::before {
  opacity: 0.9;
}
body.sortier .cv-thumb.zieht::before,
.cv-thumb.zieht::before {
  opacity: 1;
}
/* Wohin es geht: ein roter Balken an der Kante des Zielbildes — oben, wenn
   das gezogene davor kommt, unten, wenn dahinter. Umgeordnet wird erst
   beim Absetzen; waehrend des Ziehens bleibt das Raster ruhig.       */
.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;
}
.cv-thumb.ziel .cv-marke {
  opacity: 1;
  top: -7px;
}
.cv-thumb.ziel.nach .cv-marke {
  opacity: 1;
  top: auto;
  bottom: -7px;
}
body.sortier .cv-thumb {
  user-select: none;
}
/* Von frueheren Tagen liegt zunaechst nur die Vorschau vor. Solche Karten
   stehen halb da — man sieht, dass es sie gibt, und dass noch etwas
   fehlt. „hinzuladen" in der Tageszeile holt die Originale.
   Solange eines unterwegs ist, atmet die Karte: ein ruhiges Auf und Ab,
   das ohne Worte sagt, dass gerade etwas geschieht.                 */
@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;
}
/* Das Hinzuladen steht als viertes Zeichen links neben den anderen dreien
   und traegt deren Regeln. Solange es laeuft, steht es still.       */
.cv-tag-aktionen button[disabled] {
  color: #c9c9c9;
  cursor: default;
}
.cv-tag-aktionen button[disabled]:hover .sym-linie {
  stroke-width: 1.15;
}

/* Schwarzer Rahmen bei gepinnten Bildern — individuelle Stärken via
   CSS-Variablen. Er sitzt auf der VORDERSEITE, nicht auf der Karte: er
   gehoert zum Bild und muss sich darum mitwenden, sonst bliebe er beim
   Doppelklick als leeres Viereck stehen.                             */
.cv-thumb.pinned .cv-front::after {
  content: '';
  position: absolute;
  inset: 0;
  border-style: solid;
  border-color: #000;
  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;
}
/* In der Lupe verschwindet die Historie darunter — sie besteht jetzt aus
   einem Raster je Tag, die Blende haengt darum am body.               */
body.lb-open .cv-grid,
body.lb-open .cv-tag-kopf,
body.lb-open .cv-tag-linie {
  visibility: hidden;
}
/* Strip + A/B ausblenden wenn Content-View offen */
body.cv-open #hist {
  display: none !important;
}
/* Lightbox-Fokus: alles ausblenden, inkl. Logo */
body.lb-open .panel,
body.lb-open aside.ctx,
body.lb-open footer,
body.lb-open .edge-hint,
body.lb-open #ctx-line,
body.lb-open #panel-line,
body.lb-open .panel-pfeil,
body.lb-open .hdr-nav,
body.lb-open #credit-display,
body.lb-open .hdr {
  display: none !important;
}
/* Lightbox */
#cv-lightbox {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--white);
  z-index: 10;
  cursor: zoom-out;
}
#cv-lightbox.on {
  display: flex;
}
#cv-lb-num {
  display: none !important;
}
#cv-lb-del {
  display: none !important;
}
/* Lightbox-Bild: per JS auf oz-Fläche positioniert */
#cv-lb-img {
  position: fixed;
  object-fit: contain;
  display: block;
  cursor: zoom-out;
}
.cv-lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: var(--light);
  padding: 20px;
  transition: color 0.15s;
}
.cv-lb-nav:hover {
  color: var(--black);
}
#cv-lb-prev {
  left: 0;
}
#cv-lb-next {
  right: 0;
}

.cv-leer {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.85;
}

/* Verweise im Fließtext der Inhaltsseiten */
#content-text a.text-link {
  color: inherit;
  text-decoration: underline;
}