/* ══ DER KONTAKTBOGEN — RAUM, FLÄCHE, TAGESFELDER ══════════════════
   Aus dem Prototyp V3 übernommen (CSS Zeilen 2961–2969, 3365–3454,
   3475–3600, 3683–3707, 4467, 4612–4621 und 5697–5703); die Karten in
   cards.css. Die Ansicht der Fläche steht als Custom Properties an
   #content-view (js/contact-sheet/surface.js) und wirkt nur hier, unter
   body.hist-voll — V3 schrieb sie als style an die Elemente, und die
   nächste Menüseite stand dann verschoben und gezoomt da. */

/* ── DIE HISTORIE IM VOLLBILD ──────────────────────────────────────
   Sie ist keine Menüseite mehr, sondern ein eigener Raum: kein
   Schriftzug, keine Aufklappmenüs, kein Knopf im Fuß. Was im Fluss steht
   — der Schriftzug oben, der Knopfblock im Fuß —, wird nur UNSICHTBAR,
   nicht weggenommen: sonst wäre das Hauptfenster während der Historie
   124 Punkte höher, und alles, was in dieser Zeit misst, merkte sich ein
   falsches Maß. Was schwebt, darf ganz weg. */
body.hist-voll .hdr,
body.hist-voll footer .gen-wrap,
body.hist-voll footer .f-right {
  visibility: hidden !important;
}
body.hist-voll .panel,
body.hist-voll aside.ctx,
body.hist-voll #ctx-line,
body.hist-voll #panel-line,
body.hist-voll .panel-pfeil,
body.hist-voll .edge-hint {
  display: none !important;
}

/* ── DAS PUNKTRASTER ───────────────────────────────────────────────
   Der Grund des Kontaktbogens: ein Raster feiner Punkte. Es fährt mit dem
   Maßstab mit — Weite UND Punkt —, damit es beim Hineinfahren nicht zu
   Fliegendreck zerfällt und beim Hinausfahren nicht zu Grau. */
:root {
  --raster: 22px;
  --raster-punkt: #d9d9d9;
}
body.hist-voll #content-view {
  background-image: radial-gradient(circle, var(--raster-punkt) 1px, transparent 1.1px);
  background-size: var(--raster) var(--raster);
}
/* Punkt und Lage folgen der Ansicht (contact-sheet/surface.js applyView;
   V3 schrieb sie als style an den Rahmen). */
body.hist-voll #content-view {
  background-image: radial-gradient(
    circle,
    var(--raster-punkt) var(--raster-dot, 1px),
    transparent var(--raster-fade, 1.1px)
  );
  background-position: var(--raster-x, 0px) var(--raster-y, 0px);
}

/* ── DAS TAGESFELD ────────────────────────────────────────────────
   Ein Rechteck, das alle Bilder des Tages umspannt und ihnen folgt. Es
   wird gemessen, nicht gesetzt (fields.js layoutFields). */
.cv-tag + .cv-tag {
  margin-top: 58px;
}
.cv-tag {
  position: relative;
  padding-top: 52px;
}
.cv-tag-feld {
  position: absolute;
  border: 1px solid var(--spur);
  pointer-events: none;
  z-index: 0;
}
/* Steht am Rad eine Sorte, ist der Rahmen kein Strich mehr, sondern ein
   Bogen: sein Ton füllt die Fläche, das gewürfelte Prägebild liegt mit
   soft-light darüber, und die Kante setzt sich mit denselben Schatten ab
   wie ein Blatt im Editor. */
.cv-tag-feld.blatt {
  border: none;
  box-shadow: var(--schatten-blatt);
}
.cv-tag-feld.blatt::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--relief);
  background-size: var(--kachel, 220px);
  mix-blend-mode: soft-light;
  opacity: var(--kraft, 0.2);
}
/* Die Zeichen stehen INNERHALB der oberen Kante, um denselben Rand
   eingerückt, um den das Rad über der unteren steht. */
.cv-tag-feld .cv-tag-kopf {
  top: var(--blattrand, 26px);
  transform: translateX(-50%);
  background: transparent;
}
/* Das Einstellrad des Blattes: über der Unterkante, mittig. Die Regel muss
   stärker sein als .ed-rad (components/dial.css setzt position:relative). */
.cv-tag-feld .cv-tag-rad {
  position: absolute;
  left: 50%;
  bottom: var(--blattrand, 26px);
  transform: translateX(-50%);
  width: 260px;
  height: 56px;
  --ed-rad-breite: 260px;
  pointer-events: auto;
  z-index: 3;
  opacity: 0.72;
  transition: opacity 0.15s;
}
/* Es antwortet auf die Hand: unter dem Zeiger steht es voll da. */
.cv-tag-feld .cv-tag-rad:hover {
  opacity: 1;
}
/* Lässt die Sternwahl keine Karte durch, bleibt der Rahmen schmal stehen
   und sagt in der Mitte, warum er leer ist. */
.cv-tag-leer {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: var(--mid, #686868);
  pointer-events: none;
}
.cv-tag-feld.leer .cv-tag-leer {
  display: block;
}

/* ── DER KOPF ─────────────────────────────────────────────────────
   Datum und Zeichen stehen beieinander in der Mitte der oberen Kante,
   darunter die drei Sterne des Filters. Weil er am Feld hängt, wandert
   er mit, sobald ein Bild die Kante hebt. */
.cv-tag-kopf {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  background: var(--white);
  pointer-events: auto;
  white-space: nowrap;
  z-index: 2;
}
.cv-tag-zeile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
/* Die drei Bewertungssterne unter den Zeichen: grau, schwarz wenn sie
   gelten. Ein Klick auf denselben Stern nimmt es zurück. */
.cv-tag-sterne {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.cv-tag-sterne button {
  width: 13px;
  height: 13px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--light);
  transition: color 0.12s;
  line-height: 0;
}
.cv-tag-sterne button:hover {
  color: var(--mid, #686868);
}
.cv-tag-sterne button.an {
  color: var(--black, #000);
}
.cv-tag-sterne button svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
/* Was die Sterne aussortieren, ist nicht da — auch nicht für das Maß des
   Rahmens. */
.cv-thumb.aus {
  display: none;
}
/* Im Kontaktbogen stehen die Zeichen um ein Drittel kleiner als sonst in
   der App: der Bogen zeigt viele Bilder auf einmal, und die Zeichen sollen
   ihn begleiten, nicht beherrschen. */
body.hist-voll .cv-tag-aktionen button svg {
  width: 14px;
  height: 14px;
}
body.hist-voll .cv-tag-sterne button {
  width: 9px;
  height: 9px;
}
body.hist-voll {
  --stern-hist: 8px;
}
/* Die Zeile unter der Karte — Nummer links, Sterne mittig — rückt an die
   Unterkante heran: vier Punkte bis zur Oberkante der Sterne. */
body.hist-voll {
  --stern-ab-hist: 4px;
}
body.hist-voll .cv-dl svg,
body.hist-voll .cv-marker svg,
body.hist-voll .cv-edit svg,
body.hist-voll .cv-del svg,
body.hist-voll .cv-kopie svg {
  width: 15px;
  height: 15px;
}
body.hist-voll .cv-tag-datum {
  font-size: var(--t-nummer-groesse);
}
/* Das Rad des Blattes kann nicht einfach schmaler werden: seine Striche
   stehen in festen Punkten. Also wird es als Ganzes verkleinert, von
   seiner Unterkante aus, damit es über der Blattkante stehen bleibt. */
body.hist-voll .cv-tag-feld .cv-tag-rad {
  transform: translateX(-50%) scale(0.667);
  transform-origin: 50% 100%;
}

/* ── GETRAGEN HEISST ROT ─────────────────────────────────────────
   Liegt das Feld in der Hand, steht ALLES rot, was fest zu ihm gehört:
   der Rahmen, das Datum, jedes Zeichen der Zeile, die Sterne, die Zeichen
   und Nummern der Karten und das Rad. Nur die Bilder bleiben, was sie
   sind. Das Rad liest seine Farben aus --light/--mid/--black; fields.js
   lässt es sie neu lesen. */
.cv-tag.schiebt .cv-tag-feld {
  border-color: var(--red);
}
.cv-tag.schiebt .cv-tag-datum {
  color: var(--red);
}
.cv-tag.schiebt .cv-tag-aktionen button,
.cv-tag.schiebt .cv-tag-aktionen button:hover {
  color: var(--red);
}
.cv-tag.schiebt .cv-tag-aktionen button .sym-linie {
  stroke: var(--red);
}
.cv-tag.schiebt .cv-tag-aktionen button .sym-marker {
  stroke: var(--red);
}
.cv-tag.schiebt,
.cv-tag.schiebt .cv-tag-kopf,
.cv-tag.schiebt .cv-tag-sterne button,
.cv-tag.schiebt .cv-tag-sterne button.an,
.cv-tag.schiebt .cv-tag-sterne button:hover,
.cv-tag.schiebt .cv-thumb,
.cv-tag.schiebt .cv-dl,
.cv-tag.schiebt .cv-marker,
.cv-tag.schiebt .cv-edit,
.cv-tag.schiebt .cv-dl:hover,
.cv-tag.schiebt .cv-marker:hover,
.cv-tag.schiebt .cv-edit:hover,
.cv-tag.schiebt .sterne .fig {
  color: var(--red);
}
.cv-tag.schiebt .sym-linie,
.cv-tag.schiebt .sym-marker {
  stroke: var(--red);
}
.cv-tag.schiebt .cv-tag-rad {
  opacity: 1;
  color: var(--red);
  --light: var(--red);
  --mid: var(--red);
  --black: var(--red);
}
.cv-tag.schiebt .ed-rad-marke {
  background: var(--red);
}
.cv-tag.schiebt .cv-nr,
.cv-tag.schiebt .cv-nr .cv-raute {
  color: var(--red);
}

/* ── DIE ZEILE ───────────────────────────────────────────────────
   Das Datum trägt die Schrift eines Chips aus dem linken Aufklappmenü;
   die Handlungen tragen dieselben Zeichen wie die Karten. */
.cv-tag-aktionen {
  margin-right: 0;
}
.cv-tag-datum {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--grau-500);
  white-space: nowrap;
  line-height: 1;
}
.cv-tag-aktionen {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
}
.cv-tag-aktionen button {
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: var(--zeichen-ruhe);
  transition: color 0.15s;
  line-height: 0;
}
/* Keine Haarlinien: 1,1 Punkte auf dem Schirm, 1,6 unter der Hand —
   für alle Zeichen der Zeile derselbe Strich. */
.cv-tag-aktionen button .sym-linie {
  stroke-width: 1.69;
}
.cv-tag-aktionen button .sym-marker {
  stroke-width: 1.69;
}
/* Beim Überfahren und im eingeschalteten Zustand werden die Zeichen
   dunkler UND dicker — kein Rot: Rot heißt in dieser App wegnehmen und
   markieren, nicht „hier ist der Zeiger“. */
.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: 2.46;
}
.cv-tag-aktionen button:hover .sym-marker,
.cv-tag-aktionen button:active .sym-marker,
.cv-tag-aktionen button.an .sym-marker {
  stroke-width: 2.46;
}
/* Abgeschaltet heißt hier nicht „kaputt“, sondern „läuft gerade“: das
   Zeichen steht blasser als seine Nachbarn und antwortet auf nichts. */
.cv-tag-aktionen button[disabled],
.cv-tag-aktionen button[disabled]:hover,
.cv-tag-aktionen button[disabled]:active {
  color: var(--zeichen-gesperrt);
  cursor: default;
}
.cv-tag-aktionen button[disabled]:hover .sym-linie,
.cv-tag-aktionen button[disabled]:active .sym-linie {
  stroke-width: 1.69;
}
/* Trefferflächen: die Zeile 18 Punkte mit 6 Luft — 24 bis zur Mitte;
   die Sterne darunter bekommen die halbe Lücke zu jeder Seite. */
body.hist-voll .cv-tag-aktionen button,
body.hist-voll .cv-tag-sterne button {
  position: relative;
}
body.hist-voll .cv-tag-aktionen button::before {
  content: '';
  position: absolute;
  inset: -3px;
}
body.hist-voll .cv-tag-sterne button::before {
  content: '';
  position: absolute;
  top: -3.5px;
  bottom: -6px;
  left: -2.5px;
  right: -2.5px;
}
/* Das Zurücksetzen trägt in ::before seine rote Scheibe; die Trefferfläche
   oben verschob sie in V3 um ihren Rand nach links oben. Die Scheibe ist
   ohnehin größer als die Fläche — sie bekommt ihre Mitte zurück. */
body.hist-voll .cv-tag-aktionen .hist-zurueck::before {
  inset: auto;
  top: 50%;
  left: 50%;
}

/* ── DER BOGEN ALS FLÄCHE ─────────────────────────────────────────
   Sein Inhalt hängt an einer Verschiebung; die Bilder lassen sich darauf
   rücken und größer ziehen. Darum rollt er nicht mehr, sondern fährt. Die
   Verschiebung rechnet von der linken Kante aus — die Fläche darf ihn
   nicht noch einmal mitteln. */
#content-body.hist-view {
  max-width: min(960px, calc(100vw - 80px));
}
body.hist-voll #content-view {
  justify-content: flex-start;
  padding-left: 0;
  padding-right: 0;
}
body.hist-voll #content-text {
  transform-origin: 0 0;
  will-change: transform;
}
/* Die Ansicht selbst (V3: style.transform an #content-text). */
body.hist-voll #content-text {
  transform: translate(var(--bg-x, 0px), var(--bg-y, 0px)) scale(var(--bg-z, 1));
}
body.hist-voll #content-view {
  cursor: grab;
}
body.hist-voll.bg-zieht #content-view {
  cursor: grabbing;
}
body.bg-zug #content-view {
  overflow: visible;
  z-index: 33;
}
/* Seit die Tagesfelder frei liegen dürfen, deckte ein verschobener Rahmen
   mit seinem UNSICHTBAREN Kasten die Karten darunter zu. Er fängt den
   Zeiger darum nur dort, wo wirklich etwas steht — die Karten, die
   Kopfzeile und das Rad. */
.cv-tag {
  pointer-events: none;
}
.cv-tag .cv-thumb,
.cv-tag .cv-tag-kopf,
.cv-tag .cv-tag-rad {
  pointer-events: auto;
}
body.hist-voll .cv-grid {
  width: min(1240px, calc(100vw - 72px));
  margin-left: 50%;
  transform: translateX(-50%);
}

/* Und die Seite nimmt das ganze Fenster. Die zweite Zeile ist keine
   Doppelung: die Regel in content-view.css trägt ein :has(), das wäre
   sonst das stärkere Gewicht. */
body.hist-voll #content-view,
body.hist-voll #content-view:has(#content-body.hist-view) {
  position: fixed;
  inset: 0;
  z-index: 30;
  padding: 56px var(--pad) 116px;
}
/* Ziehen gehört der Fläche, nicht dem Browser: auf einem Tablett rollte
   oder zoomte er sonst die Seite statt den Bogen. */
body.hist-voll #content-view {
  overflow: hidden;
  cursor: default;
}
body.hist-voll #content-view {
  touch-action: none;
}
/* Das Verlassen-Zeichen links oben: hellgrau in Ruhe, schwarz beim
   Überfahren. Es ist der Weg hinaus, kein Werkzeug — es soll dasein,
   aber nicht rufen. */
#cv-esc {
  position: fixed;
  left: 14px;
  top: 14px;
  z-index: 31;
  width: 48px;
  height: 48px;
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--zeichen-hinaus);
  transition: color 0.12s;
}
body.hist-voll #cv-esc {
  display: flex;
}
#cv-esc:hover {
  color: var(--black, #000);
}
/* ── DAS ZURÜCKSETZEN IN DER ZEILE ────────────────────────────────
   Dieselbe Geste wie im Fuß: der Doppelklick wendet den Knopf, der rote
   Kreis LÄUFT VOLL (conic, 0 → 360 Grad in 0,44 s, @property --lw-fuell
   in canvas.css), und erst der nächste Klick führt aus. Geladen steht das
   Zeichen schwarz auf Rot wie alle Scheibenknöpfe. */
.hist-zurueck {
  position: relative;
}
.hist-zurueck::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 29px;
  height: 29px;
  margin: -14.5px 0 0 -14.5px;
  border-radius: 50%;
  z-index: 0;
  --lw-fuell: 0deg;
  background: conic-gradient(from 45deg, var(--red) var(--lw-fuell), transparent 0);
  transition: --lw-fuell 0.44s cubic-bezier(0.4, 0, 0.3, 1);
  pointer-events: none;
}
.hist-zurueck svg {
  position: relative;
  z-index: 1;
}
.hist-zurueck.fragt::before {
  --lw-fuell: 360deg;
}
.hist-zurueck.fragt,
.hist-zurueck.fragt:hover {
  color: var(--black);
  transition: color 0.44s cubic-bezier(0.4, 0, 0.3, 1);
}
.hist-zurueck.fragt .sym-linie {
  stroke: none;
}

/* In der Lupe verschwindet der Bogen darunter. */
body.lb-open .cv-grid,
body.lb-open .cv-tag-kopf,
body.lb-open .cv-tag-feld {
  visibility: hidden;
}