/* Light theme overrides (clean, syntactically valid) */
:root { --site-max-width: 980px; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: Inter, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
  color: #243b53;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 18px;
}
.site-wrap { max-width: var(--site-max-width); margin: 0 auto; }
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #ffffff;
  border-radius: 10px;
  margin-bottom: 18px;
  border: 1px solid #eef4ff;
}
.brand { display: flex; gap: 12px; align-items: center; }
.brand .logo { width: 44px; height: 44px; border-radius: 8px; background: linear-gradient(90deg, #60a5fa, #7dd3fc); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700 }
.brand h1 { font-size: 18px; margin: 0; }
.muted { color: #6b7280; font-size: 13px }
.actions { display:flex; gap:8px; align-items:center }
.actions a { color: #2563eb; text-decoration: none; padding: 6px 10px; border-radius: 8px }
.card { background: #fff; padding: 18px; border-radius: 10px; border: 1px solid #eef4ff }
.controls { display:flex; gap:8px; align-items:center; margin-bottom: 14px }
select, input[type="date"], input[type="password"], input[type="text"] { background: #f8fafc; border: 1px solid #e6eef8; color: #243b53; padding:8px; border-radius:8px }
label { color: #475569; font-size: 14px }
.plot-img { width:100%; height:auto; border-radius:8px }
.form-row { display:flex; flex-direction:column; gap:8px; margin-bottom:12px }
.footer { margin-top:18px; color:#6b7280; font-size:13px; text-align:center }

@media (max-width:720px) {
  .header { flex-direction: column; align-items: flex-start; gap: 10px }
  .actions { width: 100%; justify-content: space-between }
}

/* utility */
.btn-back { margin-right: auto }
.text-muted { color: #6b7280 }

/* ---- Plot Skeleton Loader ---- */
.position-relative { position: relative; }
.skeleton{
  display:none;
  position:absolute;
  inset:0;
  border-radius:8px;
  background: linear-gradient(90deg, #f2f6ff 25%, #e9f1ff 37%, #f2f6ff 63%);
  background-size: 400% 100%;
  animation: skel 1.25s infinite;
}
@keyframes skel { 0%{background-position: 100% 0} 100%{background-position: 0 0} }

/* iOS Safari Zoom vermeiden auf Inputs */
input, select, button { font-size: 16px; }

/* Kleinigkeit für Buttons/Links im Header */
.header .button, .header a.button {
  background: #eef4ff;
  border: 1px solid #e3ecff;
  padding: 6px 10px;
  border-radius: 8px;
}

/* =========================================
   Desktop-Only Enhancements (>= 1200px)
   - Mobil bleibt unverändert
   ========================================= */
@media (min-width: 1200px) {
  /* Seite breit und seitenfüllend, mit komfortablen Rändern */
  .site-wrap {
    max-width: none;                 /* volle Breite */
    padding-left: clamp(24px, 5vw, 72px);
    padding-right: clamp(24px, 5vw, 72px);
  }

  /* Karten optisch kräftiger */
  main.card {
    padding: clamp(24px, 3vw, 48px);
    border-radius: 24px;
  }
  .header { border-radius: 20px; }

  /* Mehr Abstand zwischen Kacheln */
  .row.g-3 {
    --bs-gutter-x: clamp(1rem, 2.5vw, 2.5rem);
    --bs-gutter-y: clamp(1rem, 2vw, 2rem);
  }

  /* Kacheln größer & „kartenhaft“ */
  .card.h-100 {
    min-height: 180px;
    box-shadow: 0 16px 48px rgba(15, 23, 42, .08);
    border: 1px solid rgba(15,23,42,.06);
    border-radius: 20px;
  }

  /* Ikonen & Zahlen skalieren angenehm mit der Breite */
  .card-body svg {
    width: clamp(36px, 2.5vw, 56px);
    height: clamp(36px, 2.5vw, 56px);
  }
  .card-body .fs-3 {
    font-size: clamp(1.75rem, 2.6vw, 3rem) !important;
    line-height: 1.1;
  }

  /* Kopfzeile etwas dichter */
  .header .brand h1 { font-size: clamp(1.25rem, 1.8vw, 1.75rem); }
}

/* Optional: Ultra-Wide Monitore etwas begrenzen (sauberer Look) */
@media (min-width: 1600px) {
  .site-wrap {
    max-width: 1700px;               /* statt 100% bis ~1700px begrenzen */
    margin-inline: auto;
  }
}