/* Platzhalter, bis die App geladen ist */
.datenexplorer { position: relative; margin: 1.5rem 0; }
/* Erstes sichtbares Element: auch nach einer nur fuer Screenreader gedachten Ueberschrift */
.datenexplorer:first-child, .sr-nur:first-child + .datenexplorer, .sr-only:first-child + .datenexplorer { margin-top: 0; }
/* Abstand nach oben (Konfiguration abstand_oben), z.B. negativ, um ein grosses
   Innenpolster des Themes auszugleichen - erst ab Tabletbreite */
@media (min-width: 768px) {
  .datenexplorer:first-child, .sr-nur:first-child + .datenexplorer, .sr-only:first-child + .datenexplorer { margin-top: var(--datenexplorer-abstand-oben, 0); }
}
/* Die App hat Elemente mit position: sticky (Zeitleiste). Themes setzen oft
   overflow-x: hidden auf body - das macht body zum Scroll-Container, der nie
   scrollt, und sticky greift nicht. clip schneidet gleich ab, ohne das. */
body { overflow-x: clip !important; }
.datenexplorer-vorschau { display: block; width: 100%; height: auto; border-radius: 8px; opacity: 0.55; }
.datenexplorer--offline .datenexplorer-vorschau { opacity: 1; max-height: 75vh; object-fit: contain; }
.datenexplorer--offline .datenexplorer-status { display: block; margin: 0 0 10px; padding: 10px 14px; border-radius: 10px; background: #fde8ef; color: #8a1240; font-weight: 600; }
.datenexplorer--offline .datenexplorer-status a { color: inherit; text-decoration: underline; }
.datenexplorer-status { display: flex; align-items: center; gap: 0.6rem; margin: 0.75rem 0 0; font-size: 0.9rem; color: #555; }
.datenexplorer-lader { width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: datenexplorer-dreh 0.8s linear infinite; }
@keyframes datenexplorer-dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .datenexplorer-lader { animation: none; } }

/* Die App bringt ihr eigenes Layout mit: Basis-Stile des Themes (Tailwind
   Preflight, Typography) zuruecknehmen, wo sie Plotly/Formulare stoeren */
.datenexplorer-app { color: #222; line-height: normal; }
.datenexplorer-app svg, .datenexplorer-app img, .datenexplorer-app canvas { max-width: none; vertical-align: baseline; }
.datenexplorer-app .js-plotly-plot svg { display: inline; }
.datenexplorer-app .js-plotly-plot .main-svg { position: absolute; }
.datenexplorer-app input[type="radio"], .datenexplorer-app input[type="checkbox"] { appearance: auto; }
.datenexplorer-app input[type="text"], .datenexplorer-app input[type="search"] { border: 1px solid #bbb; border-radius: 6px; padding: 6px 8px; background: white; }
.datenexplorer-app button { line-height: 1.2; }

/* Zurueck vom vollen Datenexplorer zur Startansicht */
.datenexplorer-zurueck { margin: 0 0 6px; font-size: 0.875rem; text-align: right; }
.datenexplorer-zurueck a { color: #2f6b62; }
.datenexplorer-zurueck a::before { content: "← "; }

@media (max-width: 700px) {
  /* Auf dem Handy randlos bis an den Bildschirmrand (die Startansicht behaelt den Rand) */
  .datenexplorer { margin-left: -1rem; margin-right: -1rem; }
  .datenexplorer-kurz, .datenexplorer-zurueck { padding-left: 1rem; padding-right: 1rem; }
}