/* Website-Einbettung (embed/motor.html): Schriften + Grund wie der-saegendoktor.de.
   Wird NACH index.css geladen und überschreibt dessen Schriften. Die
   Google-Fonts kommen per <link> aus embed/motor.html (ein @import mitten im
   gebündelten CSS würde der Browser ignorieren). */

html,
body {
  background: #ffffff;
  font-family: 'Inter Tight', system-ui, -apple-system, sans-serif;
  color: #2a2a2e;
}

.font-display {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  letter-spacing: 0;
}

.font-mono {
  font-family: 'JetBrains Mono', monospace;
}

/* Fußleiste des Wizards sitzt in der App über der Navigationsleiste (64 px).
   Eingebettet gibt es die nicht → ganz unten. */

html:root {
  --motor-wizard-footer-bottom: 0px !important;
  --configurator-footer-bottom: 0px !important;
}

/* ---- hoehe=auto (autoHeight.js): Kasten so hoch wie der Inhalt ----
   Kein eigenes Scrollen; „ganzer Bildschirm“ (min-h-screen) wäre die volle
   Kastenhöhe und ließe ihn nie wieder schrumpfen. Feste Elemente beziehen sich
   auf den sichtbaren Ausschnitt, den die Website meldet (--sd-vp-top/-h). */

html.sd-embed-auto,
html.sd-embed-auto body {
  overflow: hidden;
}

html.sd-embed-auto .min-h-screen {
  min-height: 0 !important;
}

html.sd-embed-auto #root {
  min-height: 320px;
}

/* Fenster wie die Lupe: im sichtbaren Teil statt mitten im langen Kasten */

html.sd-embed-auto .fixed.inset-0 {
  top: var(--sd-vp-top, 0px) !important;
  bottom: auto !important;
  height: var(--sd-vp-h, 100%) !important;
}

/* Mittig, solange der Inhalt passt — sonst oben beginnend und scrollbar
   (reines Zentrieren würde den oberen Teil unerreichbar abschneiden). */

html.sd-embed-auto .fixed.inset-0.items-center {
  align-items: flex-start !important;
}

html.sd-embed-auto .fixed.inset-0.items-center > * {
  margin-top: auto;
  margin-bottom: auto;
}

/* „Weiter“-Leiste: unten am sichtbaren Teil */

html.sd-embed-auto footer.fixed {
  top: calc(var(--sd-vp-top, 0px) + var(--sd-vp-h, 100%)) !important;
  bottom: auto !important;
  transform: translateY(-100%);
}