/* ==========================================================================
   SLS Rakete — Minimalistische 3D-Seite
   Design: Dieter Rams / Architekturbüro-Ästhetik
   ========================================================================== */

/* --- CSS-Variablen ------------------------------------------------------- */
:root {
  /* Farben */
  --bg: #0e0e0e;
  --fg: #e8e8e8;
  --muted: #8a8a8a;
  --line: #2a2a2a;
  --link: #a8c8e8;

  /* Typografie */
  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --size-title: clamp(2.5rem, 5vw, 4rem);
  --size-body: clamp(1rem, 1.5vw, 1.125rem);
  --size-small: clamp(0.75rem, 1vw, 0.875rem);
  --line-height: 1.7;
  --max-width: 38ch; /* ~60 Zeichen */

  /* Abstände */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 32px;
  --space-lg: 64px;
  --space-xl: 96px;
  --space-2xl: 128px;

  /* Viewer */
  --viewer-height: 80vh;
}

/* --- Reset & Basis ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--size-body);
  line-height: var(--line-height);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 {
  margin: 0 0 var(--space-md);
  font-size: var(--size-title);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

p { margin: 0 0 var(--space-md); }

/* --- Layout -------------------------------------------------------------- */
main { display: flex; flex-direction: column; }

section { width: 100%; }

/* --- Viewer Section ------------------------------------------------------ */
#viewer {
  position: relative;
  width: 100%;
  height: var(--viewer-height);
  min-height: 500px;
  background: var(--bg);
  overflow: hidden;
}

#canvas-container {
  width: 100%;
  height: 100%;
}

#viewer canvas { display: block; }

.hint {
  position: absolute;
  bottom: var(--space-md);
  left: var(--space-md);
  margin: 0;
  font-size: var(--size-small);
  color: var(--muted);
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.hint.hidden { opacity: 0; pointer-events: none; }

.loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-size: var(--size-body);
  color: var(--muted);
  background: var(--bg);
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.loading.hidden { opacity: 0; visibility: hidden; }

/* --- Info Section -------------------------------------------------------- */
#info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  padding: var(--space-2xl) var(--space-xl);
  max-width: 1400px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  #info {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    padding: var(--space-xl) var(--space-lg);
  }
}

/* Render-Bild */
.render-figure { margin: 0; }

.render-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

.render-figure figcaption {
  margin-top: var(--space-sm);
  font-size: var(--size-small);
  color: var(--muted);
  text-align: left;
}

/* Text-Inhalt */
.text-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: var(--max-width);
}

.text-content p:last-of-type { margin-bottom: var(--space-xl); }

/* Spezifikationen-Tabelle */
.specs {
  width: 100%;
  max-width: var(--max-width);
  border-collapse: collapse;
  font-size: var(--size-small);
  color: var(--muted);
}

.specs th,
.specs td {
  padding: var(--space-xs) 0;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.specs th {
  width: 120px;
  font-weight: 400;
  color: var(--fg);
  white-space: nowrap;
}

.specs tr:last-child th,
.specs tr:last-child td { border-bottom: none; }

/* --- Footer -------------------------------------------------------------- */
footer {
  padding: var(--space-lg) var(--space-xl);
  text-align: left;
  border-top: 1px solid var(--line);
}

footer p {
  margin: 0;
  font-size: var(--size-small);
  color: var(--muted);
}

/* --- Responsive Anpassungen --------------------------------------------- */
@media (max-width: 600px) {
  :root {
    --viewer-height: 70vh;
  }

  #info { padding: var(--space-lg) var(--space-md); }

  footer { padding: var(--space-md) var(--space-md); }
}

/* --- Reduzierte Animation ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .hint,
  .loading { transition: none; }
}