/* ---------- Theme: neutral, bright ---------- */
:root{
  --bg0:#FAFAF7;        /* creme-weiß */
  --bg1:#F4F3EF;        /* leichtes Graubeige */
  --ink:#1f2937;        /* slate-800 */
  --muted:#4b5563;      /* slate-600 */
  --line:#E6E5E1;       /* zarter Rand */
  --accent:#9CA3AF;     /* slate-400, dezent */
  --accent-strong:#6B7280; /* slate-500 */
  --em:#111827;         /* fast schwarz für Kernaussagen */
  --pill:#F1F5F9;       /* slate-100 */
  --box-amber:#FFF7ED;  /* amber-50 */
  --box-emerald:#ECFDF5;/* emerald-50 */
  --box-rose:#FEF2F2;   /* rose-50 */
  --header-h: 64px;     /* wird per JS dynamisch feinjustiert */
}

html, body{
  height:auto;
  background: linear-gradient(180deg,var(--bg0),var(--bg1));
  color: var(--ink);
}

/* Fixed full-width header (no transparency) */
.app-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  width: 100%;
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  z-index: 1000;
}
.nav-frame{
  width: 100%;
}
.nav-inner{
  max-width: 80rem; /* ~max-w-7xl */
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto; /* Titel links, Drucken rechts */
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
}

/* Content top offset equals header height */
.main{
  padding-top: calc(var(--header-h) + 12px) !important;
}

/* Cards & pills */
.card{
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 10px 34px rgba(0,0,0,.05);
}
.pill{
  border:1px solid var(--line);
  background:var(--pill);
  border-radius:999px;
  padding:.25rem .6rem;
  font-size:.75rem;
}

/* Colored info boxes */
.box-amber{ background:var(--box-amber); border:1px solid #FED7AA; }
.box-emerald{ background:var(--box-emerald); border:1px solid #A7F3D0; }
.box-rose{ background:var(--box-rose); border:1px solid #FECACA; }

/* Gentle fade-in on scroll */
.fade{ opacity:.0; transform:translateY(8px); transition:opacity .6s ease, transform .6s ease; }
.fade.show{ opacity:1; transform:translateY(0); }

/* Print (DIN A4) */
@media print{
  @page { size: A4; margin: 12mm; }
  .no-print{ display:none !important; }
  .card{ box-shadow:none !important; background:#fff !important; border-color:#ddd; }
  section{ break-after: page; page-break-after: always; }
  a{ text-decoration:none; color:#000; }
  .main{ padding-top: 0 !important; }
}

/* --- Scrollbare Modals (gilt für alle) --- */
.modal {
  position: fixed;
  inset: 0;                 /* top/right/bottom/left:0 */
  /* dein vorhandener Hintergrund bleibt wie er ist */
  overflow: auto;           /* <- WICHTIG: Overlay selbst darf scrollen */
}

/* Inhalt des Modals als Flex-Column, damit Kopf/Fuß fix bleiben
   und der Mittelteil scrollt */
.modal .modal-content,
.modal .modal-box,
.modal .dialog {
  display: flex;
  flex-direction: column;
  max-height: 92vh;         /* nicht größer als Viewport */
}

/* Der scrollbare Bereich im Modal */
.modal .modal-body {
  overflow-y: auto;         /* <- WICHTIG: hier scrollt der Inhalt */
  min-height: 0;            /* nötig bei flex-children */
  flex: 1 1 auto;
}