/* KIMU – Startseite mit Partikeln (assets/start-3d/start-3d.js). Nur Gestaltung, keine Texte. */
body.s3d { background: var(--ink); }
/* Startseite: Text nicht markierbar (Klicken/Ziehen/Halten fürs Partikelfeld markiert sonst Text). */
body.s3d { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
body.s3d input, body.s3d textarea, body.s3d select, body.s3d [contenteditable] { -webkit-user-select: text; user-select: text; }
/* Maus über der Kugel: Hand im KIMU-Stil (türkise Linie, Form nach Lucide „pointer“, ISC) –
   Klasse setzt start-3d.js; ohne Bildzeiger-Unterstützung normale Hand */
body.s3d-klick .hero { cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='-1 -1 26 26' fill='none' stroke-linecap='round' stroke-linejoin='round'><path d='M8 2a2 2 0 0 0-2 2v10l-.77-.77a2 2 0 0 0-2.83 2.82l3.6 3.6C7.5 21.14 9.2 22 12 22h2a8 8 0 0 0 8-8v-3a2 2 0 0 0-4 0v-1a2 2 0 0 0-4 0V9a2 2 0 0 0-4 0V4a2 2 0 0 0-2-2z' fill='%230A0A0F' fill-opacity='.85'/><g stroke='%230A0A0F' stroke-opacity='.6' stroke-width='3.5'><path d='M22 14a8 8 0 0 1-8 8'/><path d='M18 11v-1a2 2 0 0 0-2-2a2 2 0 0 0-2 2'/><path d='M14 10V9a2 2 0 0 0-2-2a2 2 0 0 0-2 2v1'/><path d='M10 9.5V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v10'/><path d='M18 11a2 2 0 1 1 4 0v3a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15'/></g><g stroke='%230ABAB5' stroke-width='1.6'><path d='M22 14a8 8 0 0 1-8 8'/><path d='M18 11v-1a2 2 0 0 0-2-2a2 2 0 0 0-2 2'/><path d='M14 10V9a2 2 0 0 0-2-2a2 2 0 0 0-2 2v1'/><path d='M10 9.5V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v10'/><path d='M18 11a2 2 0 1 1 4 0v3a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15'/></g></svg>") 11 4, pointer; }
#kimu-3d { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; pointer-events: none; }
.s3d main, .s3d .footer { position: relative; z-index: 1; }

/* Hero und Schlussband werden durchsichtig – nur dort scheint das Partikelfeld durch.
   Alle anderen Abschnitte bleiben deckend wie auf der normalen Startseite. */
.s3d .hero, .s3d .band { background: transparent; }
.s3d .band::before { opacity: .6; }
/* Schlussband wie der Hero: Text links, KIMU-Zeichen rechts (Handy: Zeichen oben). */
.s3d .band { min-height: 80vh; display: flex; align-items: center; }
.s3d .band > .container { width: 100%; }
@media (min-width: 1000px) {
  .s3d .band > .container { text-align: left; }
  .s3d .band > .container > * { max-width: min(600px, 50%); margin-left: 0; margin-right: 0; }
  .s3d .band h2 { margin: 0; }
  .s3d .band-actions { justify-content: flex-start; }
  .s3d .band::before { inset: auto 0 -60% 40%; }
}
@media (max-width: 999px) {
  .s3d .band { align-items: flex-end; padding-top: 42vh; padding-top: 42svh; }
  .s3d .band > .container { background: linear-gradient(to top, rgba(10,10,15,.94) 70%, rgba(10,10,15,0)); padding-top: 40px; }
}

/* Hero: volle Höhe, Text links, Partikel rechts (Desktop). */
.s3d .hero { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; }
.s3d .hero > .container { width: 100%; transition: opacity 1.1s ease, transform 1.1s ease; }
.s3d.s3d-intro .hero > .container { opacity: 0; transform: translateY(14px); animation: s3d-zeigen 0s 5s forwards; }
/* Sicherung: Text erscheint spätestens nach 5 s, auch wenn das Skript hängt */
@keyframes s3d-zeigen { to { opacity: 1; transform: none; } }
.s3d .hero::before { left: 72%; }
@media (min-width: 1000px) {
  .s3d .hero { text-align: left; }
  .s3d .hero > .container > * { max-width: min(600px, 50%); margin-left: 0; margin-right: 0; }
  .s3d .hero .head-actions { justify-content: flex-start; }
  .s3d .hero::after { -webkit-mask-image: radial-gradient(ellipse 50% 60% at 72% 50%, #000 15%, transparent 70%);
                      mask-image: radial-gradient(ellipse 50% 60% at 72% 50%, #000 15%, transparent 70%); }
}
/* Handy: Kugel hinter dem Text, der Text beginnt in der Kugelmitte. */
@media (max-width: 999px) {
  .s3d .hero { align-items: flex-start; padding-top: 34vh; padding-top: 34svh; }
  .s3d .hero > .container { text-shadow: 0 1px 14px rgba(10,10,15,.95), 0 0 2px rgba(10,10,15,.9); }
}

@media (prefers-reduced-motion: reduce) {
  .s3d .hero > .container { transition: none; }
}