/* ── SONNENSTAND (Prototyp V3, Stilblock 2193–2304 und 2465–2476) ──
   Der Knopf steht bei den Werkzeugen der Leiste. Das Diagramm schwebt
   frei über dem Bild: es lässt sich verschieben, in der Grösse ändern und
   in der Neigung kippen, damit sein Horizont zur Bodenebene der Szene
   passt. Es wirkt erst, wenn die Sonne einmal gesetzt wurde — dann bleibt
   der Knopf gezeichnet (js/sun/control.js). */
#sonne-btn {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--leiste-grau);
  transition: color 0.15s;
}
#sonne-btn:hover {
  color: var(--black);
}
body.sonne #sonne-btn {
  color: var(--black);
}
body.sonne-aktiv #sonne-btn {
  color: var(--black);
}
/* Der Kern bleibt schwarz, solange der Modus an ist — auch wenn die Sonne
   gerade nicht durchgreift. Das sagen die Zeichnung (Kern ohne Füllung)
   und die Statuszeile. */
body.sonne-aktiv #sonne-btn .so-btn-kern {
  fill: var(--black);
  stroke: var(--black);
}
/* Was der Plan nicht enthält, steht nicht da (wie css/features/). */
body.feature-off-sun #sonne-btn {
  display: none !important;
}

/* Die Fläche des Diagramms liegt über dem Bild (z 6) und unter dem
   Anzeichnen (z 8). Der Kasten selbst nimmt keine Zeiger an — das tun
   allein die gezeichneten Flächen. So bleibt das Bild rings um das
   Diagramm frei. Lage und Grösse setzt sun/diagram.js. */
#sonnendia {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: 7;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.22s ease,
    visibility 0s linear 0.22s;
  user-select: none;
  -webkit-user-select: none;
}
/* Aufgeklappt ist es noch nicht sichtbar: es kommt, sobald der Zeiger über
   dem Bild liegt, und geht wieder, wenn er es verlässt. */
body.sonne #sonnendia {
  visibility: visible;
  transition:
    opacity 0.22s ease,
    visibility 0s;
}
body.sonne.sonne-zeigt #sonnendia {
  opacity: 1;
}
#sonne-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  pointer-events: none;
}
/* Fassbar ist die Zeichnung, nicht der Kasten. */
body.sonne.sonne-zeigt #sonne-svg .so-flaeche,
body.sonne.sonne-zeigt #sonne-svg .so-rand,
body.sonne.sonne-zeigt #sonne-svg .so-sonne {
  pointer-events: auto;
  touch-action: none;
  cursor: pointer;
}
#sonne-svg.griff-lage .so-flaeche,
#sonne-svg.griff-lage .so-rand,
#sonne-svg.griff-lage .so-sonne {
  cursor: grab;
}
#sonnendia.zieht #sonne-svg.griff-lage .so-flaeche,
#sonnendia.zieht #sonne-svg.griff-lage .so-rand {
  cursor: grabbing;
}
#sonne-svg.griff-neig .so-flaeche,
#sonne-svg.griff-neig .so-rand,
#sonne-svg.griff-neig .so-sonne {
  cursor: ns-resize;
}
/* Boden und Kuppel sind Flächen; welche gerade die Hand führt — die
   Scheibe die Richtung, die Kuppel die Höhe — flimmert leise. */
@keyframes so-flimmern {
  0%,
  100% {
    opacity: 0.34;
  }
  18% {
    opacity: 0.62;
  }
  31% {
    opacity: 0.4;
  }
  47% {
    opacity: 0.72;
  }
  62% {
    opacity: 0.44;
  }
  79% {
    opacity: 0.58;
  }
}
@keyframes so-pumpen {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.42);
  }
}
/* Der Ton der ganzen Zeichnung hängt am Bahnwinkel: Goldgelb am Morgen,
   das Rot des Hauses zur Tagesmitte, Cyanblau zur Nacht. Gesetzt werden
   beim Zeichnen zwei Töne — --so-ton für die Flächen und --so-linie für
   die Striche, um drei Zehntel dunkler. Fallen sie aus, bleibt es beim
   Rot. */
#sonne-svg .so-flaeche {
  fill: var(--so-ton, var(--red));
  stroke: none;
  opacity: 0.34;
}
#sonne-svg .so-boden {
  opacity: 0.4;
}
#sonne-svg .so-rand {
  fill: none;
  stroke: var(--so-linie, var(--red));
  stroke-width: 3;
  opacity: 1;
}
/* Die Bahn eines ganzen Tages: über dem Horizont durchgezogen, darunter
   gestrichelt und hinter der Bodenscheibe. */
#sonne-svg .so-bahn {
  fill: none;
  stroke: var(--so-linie, var(--red));
  stroke-width: 1.7;
  opacity: 0.5;
}
#sonne-svg .so-bahn-u {
  stroke-dasharray: 5 6;
  opacity: 0.38;
}
/* Steht die Sonne unter dem Horizont, ist gestrichelt, was zu ihr führt. */
#sonne-svg.so-unter .so-bogen {
  stroke-dasharray: 5 6;
}
#sonne-svg.so-unter .so-strahl {
  stroke-dasharray: 4 5;
  opacity: 0.65;
}
/* Der Schlagschatten der Kuppel: höchstens 80 % deckend (die Streuung des
   Himmels nimmt davon herunter, gesetzt wird die Zahl beim Zeichnen), nur
   außerhalb des Kreisrandes sichtbar, am Ansatz scharf und nach hinten
   zunehmend weich. Gezeichnet wird er dreifach, und die drei Fassungen
   werden ADDIERT (plus-lighter in einer isolierten Gruppe); kann der
   Browser das auf SVG nicht, addiert ein Filter (Klasse so-summe-filter). */
#sonne-svg .so-schatten {
  opacity: 0.8;
  isolation: isolate;
}
#sonne-svg .so-schatten path {
  fill: var(--so-ton, var(--red));
  stroke: none;
}
#sonne-svg .so-sch2,
#sonne-svg .so-sch3 {
  mix-blend-mode: plus-lighter;
}
#sonne-svg.so-summe-filter .so-sch2,
#sonne-svg.so-summe-filter .so-sch3 {
  mix-blend-mode: normal;
}
#sonne-svg.griff-az .so-boden {
  animation: so-flimmern 2.87s ease-in-out infinite;
}
#sonne-svg.griff-hoehe .so-kuppel {
  animation: so-flimmern 2.87s ease-in-out infinite;
}
#sonne-svg .so-hilf {
  fill: none;
  stroke: var(--so-linie, var(--red));
  stroke-width: 2;
}
#sonne-svg .so-strahl {
  stroke: var(--so-linie, var(--red));
  stroke-width: 2.4;
}
#sonne-svg .so-sonne {
  stroke: var(--so-linie, var(--red));
  stroke-width: 2.4;
  fill: none;
  stroke-linecap: round;
}
#sonne-svg .so-kern {
  fill: var(--so-linie, var(--red));
  stroke: none;
}
#sonne-svg .so-strahlen {
  transform-box: fill-box;
  transform-origin: center;
  animation: so-pumpen 3.92s cubic-bezier(0.33, 1, 0.5, 1) infinite;
}
/* ── Ruht der Stand, verspricht die Zeichnung nichts mehr ─────────
   Der Schlagschatten geht weg, das Zeichen wird hohl, der Strahl
   gestrichelt. Die Bahn bleibt, damit man weiter setzen kann, was gelten
   soll, sobald das Tor wieder offen ist. */
body.sonne-ruht #sonne-svg .so-schatten {
  opacity: 0 !important;
}
body.sonne-ruht #sonne-svg .so-kern {
  fill: none;
  stroke: var(--so-linie, var(--red));
  stroke-width: 1.8;
}
body.sonne-ruht #sonne-svg .so-strahl {
  stroke-dasharray: 4 5;
  opacity: 0.55;
}
body.sonne-ruht #sonne-svg .so-bogen {
  opacity: 0.5;
}