/* Philosophie-Modul: klickbare Statuen-Hallen + Info-Modal.
   Gemeinsam genutzt von index.html (Startseiten-Ausschnitt) und philosophie.html
   (volle Seite mit beiden Hallen). Vorher war das in jeder Seite einzeln inline
   kopiert -> philosophie.html fehlte dabei sogar komplett (Buttons taten nichts).
   --cols steuert die Spaltenzahl pro Halle (7 bei der klassischen Halle, 3 bei
   der Halle der Legenden), damit dieselbe Regel fuer beide Rastergroessen passt. */

.hall{position:relative;border:1px solid var(--gold-deep);overflow:hidden;background:var(--paper-2)}
.hall img{width:100%;display:block}
.hall .zones{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--cols,6),1fr)}
/* Hover/Fokus zeigte frueher zusaetzlich den Namen als Text-Overlay ueber der Statue --
   das kollidierte optisch mit der bereits ins Bild eingemeisselten Namensplakette UND
   mit der Namenszeile direkt unter der Halle (dreifach redundant, sah unruhig aus,
   siehe Nutzer-Feedback 25.08.2026). Jetzt nur noch ein dezentes goldenes Aufleuchten
   von unten als Klick-Hinweis, der Name selbst kommt weiterhin aus Bild + Namenszeile. */
.hall .zones button{background:transparent;border:0;cursor:pointer;position:relative;transition:background .35s}
.hall .zones button:hover,.hall .zones button:focus-visible{background:linear-gradient(to top,rgba(224,184,72,.22),rgba(224,184,72,0) 55%)}
.hall .zones button span{display:none}
.hall-names{display:grid;grid-template-columns:repeat(var(--cols,6),1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-top:0}
.hall-names button{background:var(--paper);border:0;padding:.7rem .3rem;cursor:pointer;font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);transition:color .25s,background .25s}
.hall-names button:hover,.hall-names button:focus-visible{color:var(--ink);background:#efeadb}
.hall-names button b{display:block;color:var(--gold-deep);font-weight:500;font-size:.55rem;margin-top:.2rem}
@media(max-width:640px){.hall-names{grid-template-columns:repeat(3,1fr)}}

/* Philosophen/Legenden-Modal */
.modal-back{position:fixed;inset:0;z-index:70;background:rgba(10,10,10,.55);display:none;align-items:center;justify-content:center;padding:1.2rem}
.modal-back.open{display:flex}
.modal{max-width:520px;width:100%;background:linear-gradient(160deg,#fbf9f3,#f0ecdf);border:1px solid var(--gold-deep);box-shadow:0 40px 80px -30px rgba(10,10,10,.5),inset 0 0 0 5px var(--paper),inset 0 0 0 6px rgba(138,110,27,.5);padding:2.2rem;position:relative;text-align:left}
.modal .kicker{display:block;margin-bottom:.5rem}
.modal h3{font-family:'Unbounded',sans-serif;font-weight:700;font-size:1.35rem;letter-spacing:.05em}
.modal .years{font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.2em;color:var(--dim);margin-top:.3rem;text-transform:uppercase}
.modal p{margin-top:1rem;font-size:.97rem;line-height:1.65}
.modal q{display:block;margin-top:1rem;font-family:'Instrument Serif',serif;font-style:italic;color:var(--ink-2);quotes:"„" "“"}
.modal .close{position:absolute;top:.8rem;right:.9rem;background:transparent;border:0;font-size:1.3rem;line-height:1;cursor:pointer;color:var(--dim)}
.modal .close:hover{color:var(--ink)}

/* Modal-Eintritt (23.09.2026, Nutzerauftrag "Effekte/Design soll ineinander greifen"):
   vorher blendete das Modal hart per display:none/flex ein -- kein Uebergang. Reines CSS-
   @keyframes statt GSAP (kein Scroll-Bezug, nur ein Klick-Zustandswechsel, siehe
   emilkowalski-motion-Skill: kleinste sinnvolle Bewegungsmenge) -- laeuft automatisch an,
   sobald .open per JS gesetzt wird (assets/js/philosophie.js unveraendert), kein Eingriff
   in die bestehende display:none-Logik/Fokus-Verwaltung noetig. */
@keyframes ph-backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes ph-modal-in{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.modal-back.open{animation:ph-backdrop-in .25s ease both}
.modal-back.open .modal{animation:ph-modal-in .35s cubic-bezier(.22,1,.36,1) both}

/* Gemeinsame Motion-Basis mit index.html (23.09.2026): dort inline im <style>-Block, hier
   zentral fuer philosophie.html -- .reveal trug auf dieser Seite bisher nur die Klasse,
   ohne je eine CSS-Regel dafuer (kein Effekt, Elemente einfach immer sichtbar). .void/.rule
   fehlten HIER KOMPLETT (die Zitat-Sektion unten auf philosophie.html rendert seit ihrer
   Einfuehrung unstyled) -- jetzt identisch zu index.html: Goldstrich zieht sich zuerst auf,
   Zitat blendet danach ruhig ein. Siehe JS-Block am Seitenende von philosophie.html. */
.reveal{opacity:0;transform:translateY(20px)}
.void{min-height:40vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:9vh 1.5rem}
.void blockquote{max-width:640px;font-family:'Instrument Serif',serif;font-style:italic;font-size:clamp(1.2rem,3vw,1.7rem);line-height:1.5;color:var(--ink-2);opacity:0}
.void blockquote footer{margin-top:1.1rem;font-family:'JetBrains Mono',monospace;font-style:normal;font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-deep)}
.void .rule{width:56px;height:1px;background:var(--gold-deep);margin:0 auto 1.4rem;transform:scaleX(0);transform-origin:left center}

@media(prefers-reduced-motion:reduce){
  .modal-back.open,.modal-back.open .modal{animation:none}
  .reveal{opacity:1!important;transform:none!important}
  .void blockquote,.void .rule{opacity:1!important;transform:none!important}
}