:root {
    --bg: #f7f7fb;
    --card: #ffffff;
    --txt: #1e1e2d;
    --muted: #6b7280;
    --accent: #2563eb;
    --good: #059669;
    --warn: #b45309;
    --error: #b91c1c;
    --radius: 16px;
    --shadow: 0 8px 24px rgba(0,0,0,0.06);
  }
  * { box-sizing: border-box; }
  html, body { height: 100%; }
  body {
    margin: 0;
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
    color: var(--txt);
    background: linear-gradient(180deg, #f9fafb 0%, #eef2ff 100%);
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 16px;
    padding: 16px;
  }
  
  /* Sidebar */
  aside {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: 14px;
    min-height: 0;
  }
header {
  text-align: center;   /* Alles im Header mittig ausrichten */
}

header h1 {
  font-size: 20px;
  margin: 0;
  line-height: 1.2;
}

header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}
  
  /* User badge */
  .userbar {
    display: flex; align-items: center; justify-content: space-between;
    background: #f1f5f9; border-radius: 10px; padding: 10px 12px;
  }
  .userbar .user {
    display: grid; gap: 2px;
  }
  .userbar .user b { font-size: 13px; }
  .userbar .user span { font-size: 12px; color: var(--muted); }
  .btn {
  appearance: none;
  border: none;
  cursor: pointer;
  background: var(--accent);
  color: white;
  height: 44px;              /* feste Höhe */
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
  padding: 0 18px;           
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .04s ease;
}
  .btn:active { transform: scale(0.98); }
  .btn.secondary { background: #e5e7eb; color: #111827; }
  
  /* Form */
  form { display: grid; gap: 6px; }
.field {
  display: flex;
  flex-direction: column;
}
.field label {
  margin-bottom: 2px; /* enger Abstand */
  font-size: 13px;
  color: var(--muted);
}

/* Eingabefelder */
input, select {
  width: 100%;
  font-size: 15px;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
}
  
  .hint { font-size: 12px; color: var(--muted); }
  .inline { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  
  .result {
    background: #ecfdf5; border: 1px solid #bbf7d0; color: #064e3b;
    border-radius: 12px; padding: 12px;
    font-weight: 600; font-size: 15px;
  }
  .error {
    background: #fef2f2; border: 1px solid #fecaca; color: var(--error);
    border-radius: 12px; padding: 10px; font-size: 13px; display:none;
  }

  #resultBox,
#errBox {
  min-height: 60px;       /* feste Höhe */
  border: 1px solid #ddd; /* neutraler Rahmen */
  border-radius: 12px;
  padding: 10px;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: none;       /* kein Hintergrund */
  margin-top: 10px;
}

#errBox {
  border-color: #fecaca;
  color: var(--error);
}
  /* Map panel */
  #mapPanel {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 0;
  }
  #mapHeader {
    display:flex; align-items:center; justify-content: space-between;
    padding: 12px 14px; border-bottom: 1px solid #e5e7eb;
  }
  #mapHeader h2 { margin: 0; font-size: 16px; }
  #viewDiv { width: 100%; height: 100%; min-height: 300px; }
  #footnote {
    font-size: 12px; color: var(--muted); margin-top: 2px;
  }
  
  @media (max-width: 1024px) {
    body { grid-template-columns: 1fr; }
    #mapPanel { height: 60vh; }
    aside { min-height: unset; }
    body { height: unset; }
  }
  
  /* Einzelne Optionen unterschiedlich einfärben */
#lage option.lage1 {
  background-color: #F3DACF; /* rot */
}
#lage option.kerngebiet {
  background-color: #F3F3E1; /* blau/türkis */
}
#lage option.lage2 {
  background-color: #ABF3E3 ; /* grün */
}

header .logo {
  display: flex;
  justify-content: center;
  margin-top: 8px;     /* kleiner Abstand zur Überschrift */
}

header .logo img {
  max-width: 80px;
  height: auto;
}


/* Info-Link schlank */
.info-link {
  font-size: 12px;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}
.info-link:hover {
  color: var(--good);
}

.small-text {
  font-size: 4px !important;   /* kleinere Schriftgröße */
  color: #6b7280;    /* optional: gedämpfte Farbe */
  line-height: 1.4;  /* etwas kompakter */
}

/*@media (max-width: 1024px) {
  	#berechnung {
		margin-top: calc(60vh + 90px);
	}
}*/