/* Wirtschaftsuhr auf der Makro-Seite (Ä-48, macro/_clock.html): 6×6-Raster nach der Skizze des
   Auftraggebers, Ränder mit Achsen und GICS-Sektoren, Panel daneben (≤ 1100 px darunter).
   Die Quadrantenfarben sind eine Ausnahme von DESIGN 2.3 (Ä-48) – getönte Flächen für das dunkle
   Thema; jeder Quadrant trägt zusätzlich Namen und Anlageklasse (nie nur Farbe). */

.clock-tone--recovery { --tone: #6cc77a; --tone-rgb: 108, 199, 122; }
.clock-tone--overheat { --tone: #f2d35b; --tone-rgb: 242, 211, 91; }
.clock-tone--reflation { --tone: #8f9cff; --tone-rgb: 143, 156, 255; }
.clock-tone--stagflation { --tone: #ef7d86; --tone-rgb: 239, 125, 134; }

.clock-card {
  margin-bottom: var(--grid-gap);
}

.clock-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.clock-card__title {
  margin: 0;
  font: var(--text-h2);
}

.clock-card__stand {
  margin-left: auto;
  color: var(--text-2);
  font: var(--text-label);
}

.clock-card__banner {
  margin-bottom: var(--space-4);
}

.clock-card__body {
  display: grid;
  grid-template-columns: minmax(0, 600px) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "map panel"
    "legend panel";
  align-items: start;
  gap: var(--space-3) var(--space-7);
}

/* --- Raster mit Rändern ------------------------------------------------------------------- */

.clock-map {
  grid-area: map;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "left top right"
    "left grid right"
    "left bottom right";
  gap: var(--space-2);
}

.clock-grid {
  grid-area: grid;
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(6, minmax(0, 1fr));
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid var(--border);
  border-radius: var(--r-tile);
  background-color: var(--surface-input);
  background-image:
    linear-gradient(to right, var(--border-subtle) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border-subtle) 1px, transparent 1px);
  background-size: calc(100% / 6) calc(100% / 6);
  overflow: hidden;
}

/* Achsenkreuz wie in der Skizze */
.clock-grid::before,
.clock-grid::after {
  content: "";
  position: absolute;
  z-index: 1;
  background: var(--border-strong);
  pointer-events: none;
}

.clock-grid::before { inset: 0 auto 0 calc(50% - 1px); width: 2px; }
.clock-grid::after { inset: calc(50% - 1px) 0 auto 0; height: 2px; }

.clock-quadrant {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 4px;
  padding: var(--space-2);
  border: 1px solid rgba(var(--tone-rgb), 0.22);
  border-radius: 10px;
  background: rgba(var(--tone-rgb), 0.07);
  color: var(--text-2);
}

.clock-quadrant--1 { grid-area: 1 / 1 / 4 / 4; align-items: flex-start; justify-content: flex-start; }
.clock-quadrant--2 { grid-area: 1 / 4 / 4 / 7; align-items: flex-end; justify-content: flex-start; }
.clock-quadrant--3 { grid-area: 4 / 1 / 7 / 4; align-items: flex-start; justify-content: flex-end; }
.clock-quadrant--4 { grid-area: 4 / 4 / 7 / 7; align-items: flex-end; justify-content: flex-end; }

.clock-quadrant.is-active {
  border: 2px solid var(--tone);
  background: rgba(var(--tone-rgb), 0.24);
  box-shadow: 0 0 24px -6px rgba(var(--tone-rgb), 0.55);
  color: var(--text-1);
}

.clock-quadrant__name {
  font: var(--text-chip);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.clock-quadrant.is-active .clock-quadrant__name {
  color: var(--tone);
}

.clock-quadrant__asset {
  font: var(--text-chip);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Lage eines Zeichens im 6×6-Raster (macro.clock_view.grid_position) – Klassen, weil die CSP
   keine style-Attribute erlaubt. */
.clock-at--r1 { grid-row: 1; }
.clock-at--r2 { grid-row: 2; }
.clock-at--r3 { grid-row: 3; }
.clock-at--r4 { grid-row: 4; }
.clock-at--r5 { grid-row: 5; }
.clock-at--r6 { grid-row: 6; }
.clock-at--c1 { grid-column: 1; }
.clock-at--c2 { grid-column: 2; }
.clock-at--c3 { grid-column: 3; }
.clock-at--c4 { grid-column: 4; }
.clock-at--c5 { grid-column: 5; }
.clock-at--c6 { grid-column: 6; }

.clock-mark {
  z-index: 3;
  box-sizing: border-box;
  place-self: center;
  aspect-ratio: 1;
  border-radius: 50%;
}

/* ● Stand (Nachtrag 08.10.2026, feiner wie die Spur): kleiner Punkt im Ton des aktiven Quadranten
   (Klasse clock-tone--…), dünner heller Ring, dunkle Haarlinie für den Kontrast auf jeder Tönung
   und ein leiser Schein. */
.clock-mark--now {
  width: 9px;
  background: var(--tone, var(--text-1));
  box-shadow:
    0 0 0 1.5px var(--text-1),
    0 0 0 2.5px rgba(15, 15, 18, 0.75),
    0 0 10px 2px rgba(var(--tone-rgb, 255, 255, 255), 0.45);
}

/* ○ Ziel: kleiner, dünner Ring */
.clock-mark--target {
  width: 8px;
  border: 1.5px solid var(--text-1);
  box-shadow: 0 0 0 1px rgba(15, 15, 18, 0.7), inset 0 0 0 1px rgba(15, 15, 18, 0.55);
}

.clock-trail {
  grid-area: 1 / 1 / 7 / 7;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* Weg (Nachtrag „Spur“): dünne, leicht gebogene Kurve; Verlauf je Schritt vom Ton und der
   Deckkraft des älteren zum jüngeren Monat (linearGradient, Stopps mit clock-tone--…). */
.clock-trail stop {
  stop-color: var(--tone, var(--text-1));
}

.clock-trail__segment {
  fill: none;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 1.5px rgba(15, 15, 18, 0.7));
}

.clock-trail__dot {
  fill: var(--text-1);
  stroke: rgba(15, 15, 18, 0.85);
  stroke-width: 1.5;
  pointer-events: auto;
}

/* Monate der Spur (Rückmeldung 08.10.2026): Das Kürzel steht nicht mehr dauernd am Punkt, sondern
   in einer kleinen Blase im Stil des Info-Symbols (`.tooltip-card`, Ä-33) – beim Überfahren, beim
   Tastaturfokus und nach einem Tipp (der Tipp fokussiert den Punkt). Reines CSS, kein Skript.
   Tippfläche: unsichtbarer Kreis von 24 px um den Punkt. Die Reihenfolge zeigen Winkel und Verlauf
   auch ohne Blase. In der obersten Reihe klappt die Blase nach unten; solange eine offen ist,
   liegt die Ebene über ● und ○. */
.clock-trail--points:is(:hover, :focus-within) {
  z-index: 5;
}

.clock-trail__point {
  outline: none;
}

.clock-trail__hit {
  fill: none;
  stroke: none;
  pointer-events: all;
}

.clock-trail__point:focus-visible .clock-trail__hit {
  r: 8px;
  stroke: var(--accent);
  stroke-width: 1.5;
}

.clock-trail__tip {
  display: none;
  pointer-events: none;
}

.clock-trail__point:is(:hover, :focus) .clock-trail__tip {
  display: inline;
}

/* Fährt der Zeiger auf einen anderen Punkt, weicht die Blase des angeklickten. */
.clock-trail--points:has(.clock-trail__point:hover) .clock-trail__point:not(:hover) .clock-trail__tip {
  display: none;
}

.clock-trail__point--below .clock-trail__tip {
  transform: translateY(46px);
}

.clock-trail__tip rect {
  fill: var(--surface-2);
  stroke: var(--border);
  stroke-width: 1;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55));
}

.clock-trail__month {
  fill: var(--text-1);
  font: 400 0.75rem/1 var(--font-sans);
  dominant-baseline: central;
}

/* Richtungswinkel der Spur und Spitze des Kurspfeils in derselben Form */
.clock-trail__chevron,
.clock-trail__head {
  fill: var(--text-1);
  stroke: rgba(15, 15, 18, 0.85);
  stroke-width: 1;
  stroke-linejoin: round;
  paint-order: stroke;
}

/* Kurspfeil vom ● zum ○: feine gestrichelte Linie */
.clock-trail__heading {
  stroke: var(--text-1);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
  opacity: 0.9;
  filter: drop-shadow(0 0 1.5px rgba(15, 15, 18, 0.7));
}

/* Ränder: Achse innen, Sektoren außen; links und rechts senkrecht wie in der Skizze */
.clock-edge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-width: 0;
  font: var(--text-label);
}

.clock-edge--top { grid-area: top; flex-direction: column; }
.clock-edge--bottom { grid-area: bottom; flex-direction: column; }
.clock-edge--left { grid-area: left; flex-direction: row; }
.clock-edge--right { grid-area: right; flex-direction: row; }

.clock-edge--top .clock-edge__sectors,
.clock-edge--left .clock-edge__sectors {
  order: -1;
}

/* Senkrecht laufen nur die Achse und die Namen; Liste und Pfeil bleiben waagerecht, damit ▲/▼
   aufrecht stehen und das Blasenfenster lesbar bleibt. Links von unten nach oben (Skizze). */
.clock-edge--left .clock-edge__axis,
.clock-edge--left .clock-sector__name,
.clock-edge--right .clock-edge__axis,
.clock-edge--right .clock-sector__name {
  writing-mode: vertical-rl;
}

@supports (writing-mode: sideways-lr) {
  .clock-edge--left .clock-edge__axis,
  .clock-edge--left .clock-sector__name {
    writing-mode: sideways-lr;
  }
}

.clock-edge--left .clock-edge__sectors,
.clock-edge--right .clock-edge__sectors {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: var(--space-3);
}

.clock-edge--left .clock-edge__sectors { flex-direction: column-reverse; }
.clock-edge--left .clock-sector,
.clock-edge--right .clock-sector { flex-direction: column; }
.clock-edge--left .clock-sector { flex-direction: column-reverse; }

.clock-edge__axis {
  margin: 0;
  color: var(--text-2);
  text-align: center;
  white-space: nowrap;
}

.clock-edge__sectors {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.clock-sector {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--text-1);
  white-space: nowrap;
}

.clock-legend {
  grid-area: legend;
  margin: 0;
  color: var(--text-2);
  font: var(--text-label);
  text-align: center;
}

/* --- Panel -------------------------------------------------------------------------------- */

.clock-panel {
  grid-area: panel;
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

.clock-panel__quadrant {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--tone);
  border-radius: var(--r-input);
  background: rgba(var(--tone-rgb), 0.12);
  color: var(--text-1);
  font: var(--text-h3);
}

.clock-panel__name {
  color: var(--tone);
  font-weight: 600;
}

.clock-panel__since {
  margin-left: auto;
  color: var(--text-2);
  font: var(--text-label);
}

.clock-panel__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  font: var(--text-h3);
}

.clock-panel__muted {
  color: var(--text-2);
  font-weight: 400;
}

.clock-panel__sub {
  margin: var(--space-2) 0 var(--space-1);
  font: var(--text-label);
}

.clock-rows {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.clock-row {
  display: grid;
  grid-template-columns: minmax(7.5em, 1fr) minmax(0, 1.4fr) 3em;
  align-items: baseline;
  gap: var(--space-3);
  padding: 3px 0;
  border-bottom: 1px solid var(--border-subtle);
  font: var(--text-table);
}

.clock-row__label { color: var(--text-2); }

.clock-row__value,
.clock-row__mark {
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.clock-row--off .clock-row__value,
.clock-row--off .clock-row__mark {
  color: var(--text-2);
}

.clock-facts {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  font: var(--text-table);
}

.clock-facts__row {
  display: grid;
  grid-template-columns: 6.5em minmax(0, 1fr);
  gap: var(--space-3);
}

.clock-facts dt { color: var(--text-2); }
.clock-facts dd { margin: 0; color: var(--text-1); }
.clock-facts__row--border dd { color: var(--accent); }

.clock-panel__hint {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  color: var(--accent);
  font: var(--text-table);
}

.clock-panel__hint .icon { flex: none; margin-top: 1px; }

.clock-panel__foot {
  margin: 0;
  color: var(--text-2);
  font: var(--text-label);
}

@media (max-width: 1100px) {
  .clock-card__body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "map"
      "legend"
      "panel";
  }

  .clock-map,
  .clock-legend {
    width: 100%;
    max-width: 600px;
    justify-self: center;
  }
}

@media (max-width: 600px) {
  .clock-card { padding: var(--space-4); }
  .clock-map { gap: var(--space-1); }
  .clock-edge { font-size: 0.6875rem; line-height: 0.875rem; }
  .clock-edge__sectors { gap: 0 var(--space-2); }
  .clock-edge--left .clock-edge__sectors,
  .clock-edge--right .clock-edge__sectors { gap: var(--space-2); }
  .clock-quadrant { margin: 2px; padding: var(--space-1); }
  .clock-quadrant__name { font-size: 0.625rem; }
  .clock-quadrant__asset { font-size: 0.5625rem; }
  .clock-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 2.6em; gap: var(--space-2); }
}

/* Kompakt im Dashboard (macro/_clock_compact.html): dasselbe Raster, quadratisch und mittig, nur
   Quadrantennamen; der Link ist über die ganze Karte gestreckt. */
.clock-mini:hover {
  border-color: var(--border-strong);
}

.clock-mini__tag {
  margin-left: auto;
}

.clock-mini__link {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  color: inherit;
  text-decoration: none;
}

.clock-mini__link::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
}

.clock-mini .clock-grid {
  width: min(100%, 15rem);
}

.clock-mini .clock-trail__segment {
  stroke-width: 1.75;
}

.clock-mini .clock-trail__dot {
  r: 2.5px;
  stroke-width: 1;
}

.clock-mini .clock-mark--now {
  width: 7px;
  box-shadow:
    0 0 0 1px var(--text-1),
    0 0 0 2px rgba(15, 15, 18, 0.75),
    0 0 7px 1px rgba(var(--tone-rgb, 255, 255, 255), 0.45);
}

.clock-mini .clock-quadrant {
  margin: 2px;
  padding: var(--space-1) var(--space-2);
}

.clock-mini .clock-quadrant__name {
  font-size: 0.625rem;
  letter-spacing: 0.03em;
}

.clock-mini__empty {
  margin: 0;
  color: var(--text-2);
}