/* Minimal-Layout, Hintergrundbild über body */
:root { color-scheme: light; }
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background-image: url("background.jpeg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
pointer-events: none;}

.card {
  position: relative;
  max-width: 980px;
  margin: 24px auto;
  padding: 18px;
  border-radius: 14px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(2px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

.header h1 { margin: 0 0 6px 0; font-size: 22px; }
.print-header {
  display: none;
}
.subtitle { margin: 0 0 14px 0; opacity: 0.8; }

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.panel {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  padding: 14px;
  background: rgba(255,255,255,0.95);
}

.panel h2 { margin: 0 0 10px 0; font-size: 16px; }

.field { margin: 10px 0; overflow: visible; }
label { display: block; font-size: 13px; margin-bottom: 4px; }
input, select {
  width: 100%;
  padding: 10px 10px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.18);
  font-size: 14px;
}

.actions { display: flex; gap: 10px; margin-top: 12px; }
button {
  border: 0;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
}
button.secondary {
  background: rgba(0,0,0,0.08);
}

.hint { margin-top: 12px; font-size: 12px; opacity: 0.75; }

.kpis { margin-bottom: 12px; }
.kpi {
  padding: 12px;
  border-radius: 12px;
  background: rgba(0,0,0,0.05);
}
.kpi-label { font-size: 13px; opacity: 0.85; }
.kpi-value { font-size: 22px; font-weight: 800; margin-top: 4px; }

.blocks { display: grid; gap: 8px; }
.block {
  display: flex;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.06);
}

.details { margin-top: 12px; }
pre {
  white-space: pre-wrap;
  background: rgba(0,0,0,0.04);
  border-radius: 12px;
  padding: 10px;
  border: 1px solid rgba(0,0,0,0.06);
  font-size: 12px;
}

.disclaimer { margin-top: 12px; font-size: 12px; opacity: 0.75; }

@media (max-width: 900px) {
  .grid { grid-template-columns: 1fr; }
  .card { margin: 14px; }
}

/* =========================
   Info-Icon neben Eingabe
   ========================= */

/* Icon + Input in einer Zeile */
.input-row{
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Das Info-Icon */
.info{
  font-size: 18px;
  color: rgba(0,0,0,0.45);
  cursor: pointer;
  line-height: 1;
  user-select: none;
  position: relative;
  flex-shrink: 0;
}

/* Hover: minimaler Effekt */
.info:hover{
  color: rgba(0,0,0,0.75);
}

/* Tooltip-Box */
.info[data-open="true"]::after{
  content: attr(data-tip);
  position: absolute;
  left: 0;
  top: 20px;
  width: min(320px, 75vw);
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(30,30,30,0.95);
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
  z-index: 9999;
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
}

/* kleines Dreieck */
.info[data-open="true"]::before{
  content: "";
  position: absolute;
  left: 6px;
  top: 14px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid rgba(30,30,30,0.95);
}
.result-text{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.06);

  font-size: 13px;
  line-height: 1.55;

  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
}
/* =========================
   Methodik: Formel-Layout
   ========================= */
.formula-block{
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.06);
}

.formula-title{
  font-weight: 700;
  margin-bottom: 8px;
}

pre.formula{
  margin: 0;
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.35;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(0,0,0,0.08);
}

.formula-note{
  margin: 8px 0 0 0;
  font-size: 12px;
  opacity: 0.8;
}
/* =========================
   Button: Link zur Methodik
   ========================= */

.methodik-link{
  margin-top: 14px;
}

.btn-methodik{
  display: inline-block;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.15);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  color: rgba(0,0,0,0.8);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.btn-methodik:hover{
  background: rgba(0,0,0,0.10);
  border-color: rgba(0,0,0,0.25);
}

/* =========================
   PRINT / PDF STYLES
   ========================= */
@media print {
  /* Grundlayout */
  body {
    background: white;
    color: black;
    font-size: 11pt;
  }

  /* alles erstmal ausblenden */
  section,
  footer,
  .panel {
    display: none !important;
  }

  /* NUR Ergebnisbereich drucken */
  #results { display: block !important; }

  /* Print-Kopf wieder einblenden */
header.print-header{
  display:block !important;
  margin-bottom:20px;
}
  /* -------------------------
     SICHTBAR IM PDF
     ------------------------- */

  /* Titelbereich */
  header.print-header {
    display: block !important;
    margin-bottom: 20px;
  }

  /* Ergebnisbereich */
  #results,
  #resultText,
  .results-summary {
    display: block !important;
  }

  /* Hinweise */
  .disclaimer {
    display: block !important;
    margin-top: 20px;
    font-size: 9pt;
    color: #444;
  }

  /* -------------------------
     AUSBLENDEN
     ------------------------- */
  .actions,
  button,
  input,
  select,
  textarea,
  details,
  #debug {
    display: none !important;
  }

  /* Seitenumbrüche */
  .page-break {
    page-break-before: always;
  }
}