/* ==========================================================================
   115° · Sonnenstudien — Unterseite /bau-digital/sonnenstudien/
   Ergänzt prisma.css. Interaktive Referenz (Xixiang) ohne Bibliotheken.
   Ohne JavaScript: Lageplan 12 Uhr + vollständige Auswertung als Text.
   ========================================================================== */
.sonnen-seite {
  --sonne: #f6d70f;
  --sonne-tinte: #8f7a00;
  --knapp: #ff9a1f;
  --mangel: #e3261b;
  --karte: #fffdf9;
}

/* ---------- Einstieg: Sonnenbahn statt Winkel ---------- */
.sonnen-seite .aktion.umriss { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); }
.sonnen-seite .aktion.umriss::after { background: var(--nacht); }
.sonnen-kopf h1 { max-width: 15ch !important; }
.sonnen-motiv { position: absolute; right: 0; top: 50%; width: min(34vw, 460px); transform: translateY(-50%); pointer-events: none; }
.sonnen-motiv svg { width: 100%; height: auto; overflow: visible; }
.sonnen-motiv .sm-bahn { fill: none; stroke: #5b6672; stroke-width: 1.5; stroke-dasharray: 3 7; stroke-linecap: round; }
.sonnen-motiv .sm-basis { stroke: #f9f6f1; stroke-width: 1.5; stroke-linecap: round; }
.sonnen-motiv .sm-haus { fill: var(--nacht); stroke: #f9f6f1; stroke-width: 1.5; }
.sonnen-motiv .sm-schatten { fill: rgba(249, 246, 241, .14); }
.sonnen-motiv .sm-strahl { stroke: var(--grad); stroke-width: 1.5; stroke-dasharray: 5 6; }
.sonnen-motiv .sm-sonne { fill: #ffb21a; }
.sonnen-motiv text { font: 400 13px var(--schrift); fill: #8b96a1; text-anchor: middle; }
.sonnen-motiv .sm-uhr { position: absolute; right: 0; top: -2%; font: 700 clamp(28px, 2.6vw, 44px)/1 var(--marke); letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: #fff; }
.fx .sonnen-motiv { animation: sanft-rein 1.4s var(--weich) .3s both; }
@media (max-width: 1000px) { .sonnen-motiv { display: none; } }

/* ---------- Referenz: Rahmen ---------- */
.sonnen-seite .referenz .kapitel-kopf { max-width: 1040px; }
.studie { margin-top: clamp(36px, 3.8vw, 64px); }
.studie-hinweis { font-size: 15px !important; color: var(--gedaempft); margin-top: 18px !important; }
.studie-js .studie-hinweis { display: block; }

/* Ansichten (nur mit JavaScript) */
.studie-modi { display: none; }
.studie-js .studie-modi { display: flex; flex-wrap: wrap; gap: 0 clamp(18px, 3vw, 48px); border-bottom: 1px solid var(--linie); }
.studie .modus { position: relative; display: inline-flex; align-items: baseline; gap: 10px; background: none; border: 0; padding: 14px 0 16px; font: 700 clamp(17px, 1.4vw, 22px)/1.2 var(--schrift); letter-spacing: -.02em; color: var(--gedaempft); cursor: pointer; transition: color .3s ease; }
.studie .modus .nr { font: 700 13px/1 var(--marke); color: var(--grad); }
.studie .modus:hover, .studie .modus[aria-pressed="true"] { color: var(--tinte); }
.studie .modus::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--tinte); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--weich); }
.studie .modus[aria-pressed="true"]::after { transform: scaleX(1); }

.studie-raster { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: var(--abstand); align-items: start; margin-top: clamp(20px, 2vw, 32px); }

/* ---------- Bühne (Lageplan) ---------- */
.buehne { position: relative; margin: 0; aspect-ratio: 980 / 840; overflow: hidden; background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie-fein); border-radius: 2px; isolation: isolate; }
.buehne-ebene { position: absolute; inset: 0; transform-origin: 0 0; transition: transform 1.4s var(--weich); will-change: transform; }
.buehne-ebene > img, .buehne-ebene > svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.buehne .bild { opacity: 0; transition: opacity .9s ease, filter .9s ease; }
.buehne .bild[data-h="12"] { opacity: 1; }
.studie-js .buehne .bild[data-h="12"] { opacity: 0; }
.studie-js.ist-verlauf:not(.wechselt) .buehne .bild { transition: none; }
.studie-js.ist-auswertung .buehne .bild, .studie-js.ist-defizite .buehne .bild { opacity: 0 !important; }
.studie-js.ist-auswertung .buehne .bild[data-h="12"], .studie-js.ist-defizite .buehne .bild[data-h="12"] { opacity: .34 !important; filter: grayscale(1); }
.buehne .verschattung { opacity: 0; transition: opacity 1s ease; }
.studie-js.ist-auswertung.mit-flaechen .verschattung { opacity: .78; }
.studie-js.ist-defizite.mit-flaechen .verschattung { opacity: .38; }

.buehne-marke { position: absolute; left: 14px; top: 14px; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 9px; background: rgba(255, 253, 249, .92); box-shadow: inset 0 0 0 1px var(--linie-fein); font-size: 13px; color: var(--gedaempft); white-space: nowrap; }
.buehne-marke svg { width: 22px; height: 22px; fill: none; stroke: var(--tinte); stroke-width: 1.3; }
.buehne-zeile { position: absolute; right: 14px; bottom: 14px; z-index: 2; max-width: calc(100% - 28px); padding: 7px 12px; background: rgba(255, 253, 249, .92); font-weight: 700; font-size: clamp(14px, 1.15vw, 18px); letter-spacing: -.01em; transition: opacity .4s ease; }

/* Messpunkte (SVG) */
.messpunkte { overflow: visible; pointer-events: none; }
.messpunkte .mp { opacity: 0; transition: opacity .5s ease; }
.ist-auswertung .messpunkte .mp, .ist-defizite .messpunkte .mp { opacity: 1; }
.messpunkte .mp-punkt { transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), fill .4s ease, opacity .6s ease; transition-delay: var(--d, 0s); stroke-width: 1.6; }
.ist-auswertung .messpunkte .mp-punkt, .ist-defizite .messpunkte .mp-punkt { transform: scale(1); }
.messpunkte .gut .mp-punkt { fill: var(--sonne); stroke: var(--sonne-tinte); }
.messpunkte .knapp .mp-punkt { fill: var(--knapp); stroke: #fff; }
.messpunkte .mangel .mp-punkt { fill: var(--mangel); stroke: #fff; }
.messpunkte .mp-ring { fill: none; stroke: var(--mangel); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.ist-auswertung .messpunkte .mangel .mp-ring { opacity: .45; }
.ist-defizite .messpunkte .mangel .mp-ring { opacity: .3; }
.ist-defizite .messpunkte .mangel.in-zone .mp-ring { opacity: .9; animation: puls 1.6s ease-in-out infinite; }
@keyframes puls { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.35); opacity: .35; } }
.ist-defizite .messpunkte .mp:not(.mangel) .mp-punkt { opacity: .3; }
.messpunkte .mp-label { opacity: 0; transition: opacity .5s ease .3s; }
.ist-defizite .messpunkte .mp-label.in-zone { opacity: 1; }
.messpunkte .mp-label rect { fill: var(--tinte); }
.messpunkte .mp-label text { fill: #fff; font-family: var(--schrift); font-weight: 700; dominant-baseline: central; }

/* ---------- Steuerung ---------- */
.studie-steuerung { display: none; }
.studie-js .studie-steuerung { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; margin-top: 16px; transition: opacity .4s ease; }
.studie-js:not(.ist-verlauf) .studie-steuerung { opacity: .35; }
.abspielen { position: relative; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--nacht); color: #fff; cursor: pointer; display: grid; place-items: center; transition: transform .4s var(--weich), box-shadow .4s var(--weich); }
.abspielen:hover { transform: scale(1.06); box-shadow: 0 10px 26px -10px rgba(8, 14, 21, .55); }
.ab-icon { width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent currentColor; margin-left: 3px; }
.abspielen[aria-pressed="true"] .ab-icon { width: 12px; height: 15px; border: 0; margin: 0; background: linear-gradient(90deg, currentColor 0 4px, transparent 4px 8px, currentColor 8px 12px); }
.zeitleiste { position: relative; }
.zeitleiste input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 32px; margin: 0; background: transparent; cursor: pointer; --anteil: 50%; }
.zeitleiste input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--sonne) 0 var(--anteil), var(--linie-fein) var(--anteil) 100%); }
.zeitleiste input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--linie-fein); }
.zeitleiste input[type="range"]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--sonne); }
.zeitleiste input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%; background: var(--sonne); border: 2px solid var(--tinte); box-shadow: 0 0 0 6px rgba(246, 215, 15, .25); }
.zeitleiste input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--sonne); border: 2px solid var(--tinte); box-shadow: 0 0 0 6px rgba(246, 215, 15, .25); }
.zeitleiste input[type="range"]:focus-visible { outline: 3px solid var(--tinte); outline-offset: 4px; }
.zeit-ticks { display: flex; justify-content: space-between; margin: 0 4px; font-size: 12px; color: var(--gedaempft); font-variant-numeric: tabular-nums; }
.zeit-ticks span { width: 2ch; text-align: center; }
.zeit-wert { font: 700 22px/1 var(--marke); letter-spacing: -.03em; font-variant-numeric: tabular-nums; min-width: 4.2ch; text-align: right; }

/* ---------- Panel ---------- */
.studie-panel { background: var(--karte); box-shadow: inset 0 0 0 1px var(--linie-fein); padding: clamp(20px, 2vw, 32px); min-height: 100%; }
.panel-kopf { padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--linie-fein); }
.panel-ort { font: 700 clamp(26px, 2.2vw, 36px)/1.05 var(--marke) !important; letter-spacing: -.04em; margin-top: 6px !important; }
.tafel + .tafel { margin-top: 34px; padding-top: 28px; border-top: 1px solid var(--linie-fein); }
.studie-js .tafel + .tafel { margin-top: 0; padding-top: 0; border-top: 0; }
.studie-js .tafel[hidden] { display: none; }
.studie-js .tafel.wechselt { animation: tafel-rein .6s var(--weich) both; }
@keyframes tafel-rein { from { opacity: 0; transform: translateY(10px); } }
.tafel-label { font-size: 13px !important; color: var(--gedaempft); letter-spacing: .02em; }
.tafel-titel { font-size: clamp(22px, 1.8vw, 30px); margin-top: 8px; line-height: 1.08; }
.tafel-sub { font-size: 15px !important; color: var(--gedaempft); margin-top: 6px !important; }
.tafel-notiz { font-size: 13px !important; color: var(--gedaempft); margin-top: 16px !important; line-height: 1.45; }
.uhr { font: 700 clamp(64px, 6.4vw, 108px)/.95 var(--marke) !important; letter-spacing: -.05em; font-variant-numeric: tabular-nums; margin-top: 6px !important; }

.sonnenbogen { display: block; width: 100%; max-width: 360px; height: auto; margin: 18px 0 22px; overflow: visible; }
.sonnenbogen .sb-bahn { fill: none; stroke: var(--linie); stroke-width: 1.2; stroke-dasharray: 2 5; }
.sonnenbogen .sb-basis { stroke: var(--tinte); stroke-width: 1.4; }
.sonnenbogen .sb-tick { fill: var(--linie); }
.sonnenbogen text { font: 400 11px var(--schrift); fill: var(--gedaempft); text-anchor: middle; }
.sonnenbogen .sb-glut { fill: rgba(246, 215, 15, .28); }
.sonnenbogen .sb-sonne { fill: var(--sonne); stroke: var(--sonne-tinte); stroke-width: 1.5; }

.balken { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; align-items: end; height: 150px; }
.bk { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; height: 100%; text-align: center; }
.bk-n { font-size: 11px; color: var(--gedaempft); font-variant-numeric: tabular-nums; margin-bottom: 4px; transition: color .3s ease, font-weight .3s; }
.bk-saeule { display: block; height: calc(var(--wert) * 104px); background: var(--sonne); box-shadow: inset 0 0 0 1px var(--sonne-tinte); transform-origin: bottom; transition: transform .45s var(--weich), opacity .3s ease; }
.bk.interpoliert .bk-saeule { background: repeating-linear-gradient(135deg, var(--sonne) 0 3px, #fff7c2 3px 6px); }
.bk-h { font-size: 12px; margin-top: 6px; color: var(--gedaempft); font-variant-numeric: tabular-nums; }
.studie-js .bk.zukunft .bk-saeule { transform: scaleY(.04); opacity: .6; }
.studie-js .bk.zukunft .bk-n { color: transparent; }
.bk.jetzt .bk-n, .bk.jetzt .bk-h { color: var(--tinte); font-weight: 700; }

.schalter-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.schalter-label { font-size: 14px; color: var(--gedaempft); }
.segment { display: inline-flex; box-shadow: inset 0 0 0 1px var(--linie); }
.segment button { background: transparent; border: 0; padding: 8px 14px; min-height: 40px; font: 700 14px/1 var(--schrift); color: var(--gedaempft); cursor: pointer; transition: background-color .3s ease, color .3s ease; }
.segment button[aria-pressed="true"] { background: var(--nacht); color: #fff; }
.segment button:focus-visible { outline: 3px solid var(--tinte); outline-offset: 2px; }
.segment:not(.zonen-wahl) { display: none; }
.studie-js .segment:not(.zonen-wahl) { display: inline-flex; }
.zonen-wahl { display: none; }
.studie-js .zonen-wahl { display: inline-flex; margin-bottom: 20px; }

.klassen { list-style: none; margin: 20px 0 0; padding: 0; }
.klassen li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding-block: 10px; border-bottom: 1px solid var(--linie-fein); }
.kl-punkt { width: 16px; height: 16px; border-radius: 50%; }
.kl-gut .kl-punkt { background: var(--sonne); box-shadow: inset 0 0 0 1.5px var(--sonne-tinte); }
.kl-knapp .kl-punkt { background: var(--knapp); }
.kl-mangel .kl-punkt { background: var(--mangel); }
.kl-name { font-weight: 700; font-size: 17px; }
.kl-name small { display: block; font-weight: 400; font-size: 13px; color: var(--gedaempft); margin-top: 2px; }
.klassen strong { font: 700 clamp(28px, 2.4vw, 40px)/1 var(--marke); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }

.ergebnis { margin-top: 22px; }
.ergebnis p { font-size: clamp(17px, 1.3vw, 20px) !important; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.ergebnis-zahl { color: var(--mangel); font-family: var(--marke); }
.verteilung { display: flex; height: 12px; margin-top: 14px; gap: 2px; }
.verteilung span { flex-basis: 0; transition: flex-grow .8s var(--weich); }
.v-gut { background: var(--sonne); } .v-knapp { background: var(--knapp); } .v-mangel { background: var(--mangel); }
.umschalter { display: none; }
.studie-js .umschalter { display: flex; align-items: center; gap: 10px; margin-top: 22px; font-size: 15px; cursor: pointer; }
.umschalter input { width: 20px; height: 20px; accent-color: var(--nacht); margin: 0; }
.heat-legende { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.heat-legende li { font-size: 12px; color: var(--gedaempft); }
.heat-legende span { display: block; height: 9px; margin-bottom: 5px; }

.zone + .zone { margin-top: 30px; }
.studie-js .zone[hidden] { display: none; }
.zonen-tabelle { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 14px; font-variant-numeric: tabular-nums; }
.zonen-tabelle th, .zonen-tabelle td { padding: 8px 0; border-bottom: 1px solid var(--linie-fein); text-align: left; font-weight: 400; }
.zonen-tabelle thead th { font-size: 11px; color: var(--gedaempft); padding-top: 0; }
.zonen-tabelle tbody th { font-weight: 700; width: 3.4em; }
.zonen-tabelle .dauer, .zonen-tabelle thead th:last-child { text-align: right; width: 4em; }
.zonen-tabelle .dauer { color: var(--mangel); font-weight: 700; }
.stunden, .stunden-kopf { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 3px; padding-inline: 8px !important; }
.stunden-kopf span { text-align: center; }
.stunden i { display: block; height: 14px; background: #ebe6dd; }
.stunden i.an { background: var(--sonne); box-shadow: inset 0 0 0 1px var(--sonne-tinte); }
.zonen-tabelle tbody tr { transition: background-color .3s ease; }
.zonen-tabelle tbody tr:hover { background: rgba(227, 38, 27, .05); }

/* ---------- Abschluss ---------- */
.sonnen-cta h2 { font-size: clamp(36px, 4vw, 68px) !important; max-width: 14ch; }
.cta-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 26px !important; }
.cta-aktionen .textlink { margin-top: 0; font-size: 17px; }

/* ---------- Responsiv ---------- */
@media (max-width: 1000px) {
  .studie-raster { grid-template-columns: 1fr; }
  .studie-panel { min-height: 0; }
}
@media (max-width: 700px) {
  .buehne-marke { font-size: 11px; padding: 5px 8px 5px 6px; gap: 6px; left: 8px; top: 8px; }
  .buehne-marke svg { width: 16px; height: 16px; }
  .buehne-zeile { font-size: 12px; right: 8px; bottom: 8px; padding: 5px 8px; }
  .studie-js .studie-steuerung { gap: 12px; }
  .abspielen { width: 44px; height: 44px; }
  .zeit-ticks span:nth-child(even) { visibility: hidden; }
  .zeit-wert { font-size: 18px; }
  .balken { height: 130px; gap: 4px; }
  .bk-saeule { height: calc(var(--wert) * 86px); }
  .studie .modus { padding: 12px 0 14px; font-size: 16px; }
  .studie-js .studie-modi { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .studie .modus { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .buehne-ebene, .messpunkte .mp-punkt, .bk-saeule, .verteilung span { transition: none !important; }
  .ist-defizite .messpunkte .mangel.in-zone .mp-ring { animation: none; }
}
.messpunkte .mp-label.hervor { opacity: 1; }
.messpunkte .mp-label.hervor rect { fill: var(--mangel); }
.schalter-zeile { display: none; }
.studie-js .schalter-zeile { display: flex; }
.sonnen-seite #ablauf h2 + p { margin-top: 20px; }
@media (max-width: 700px) { .studie-js.ist-defizite .buehne-zeile { opacity: 0; } }