:root {
  --link-color: #5D5D9E;
  --link-color-active: #5C615E;
  --link-color-hover: #B2B3B4;
  --bg-color: #FFFFFF;
  --font-family-base: Arial, Helvetica, sans-serif;
  --border-radius: 5px;
  --border-primary: #2e75B6;
  --border-secondary: #70ad47;
  --box-bg-alt: #BDD7EE;
  --box-bg-new: #C6E0B4;
  --text-color: #000000;
  --muted-gray: #808080;
  --hover-blue: #0056b3;
  --tooltip-bg: #FFFACD;
  --muted-text: #333;
  --button-bg: #E8E8E8;
  --faq-hover-bg: #f2f2f2;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #121212;
    --text-color: #f0f0f0;
    --muted-text: #aaa;
    --button-bg: #2a2a2a;
    --box-bg-alt: #2c3e50;
    --box-bg-new: #1e3d24;
    --border-primary: #4a90e2;
    --border-secondary: #81c784;
    --link-color: #9fa8da;
    --link-color-active: #7986cb;
    --link-color-hover: #c5cae9;
    --tooltip-bg: #444;
	--faq-hover-bg: #2a2a2a;
  }
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--bg-color);
  font-family: var(--font-family-base);
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
  hyphens: auto;
}

h1 {
  margin: 0;
  padding: 0;
  font-weight: normal;
  font-style: normal;
}

a, a:visited { color: var(--link-color); text-decoration: none; }
a:active { color: var(--link-color-active); }
a:hover { color: var(--link-color-hover); }

.textstyle1 { text-align: center; }
.textstyle2 { font-size: 10pt; color: var(--text-color); }

label {
  font-family: var(--font-family-base);
  color: var(--text-color);
  font-size: 14pt;
}
details label { font-size: 12pt; }

#form {
  display: inline-block;
  position: relative;
  vertical-align: top;
  width: 100%;
  max-width: 500px;
  background-color: var(--bg-color);
  box-sizing: border-box;
}
#form_padding { margin: 10px; display: block; }

#heading {
  display: inline-block;
  position: relative;
  vertical-align: bottom;
  font-size: 24pt;
  color: var(--text-color);
  background: none;
  text-align: left;
}

.wrapper { display: flex; flex-direction: column; gap: 0; }

.container1 {
  width: 100%;
  max-width: 500px;
  padding-bottom: 20px;
  box-sizing: border-box;
}
.container2 {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-bottom: 15px;
  padding-bottom: 20px;
}
.container2::-webkit-scrollbar { display: none; }

@media screen and (min-width: 1220px) {
  .wrapper {
    flex-direction: row;
    align-items: flex-start;
  }
  .container1 {
    flex: 0 0 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    max-height: calc(100vh - 20px);
  }
  .container1::-webkit-scrollbar { width: 0; height: 0; }
  .container2 {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: auto;
    max-height: calc(100vh - 20px);
  }
  .container2::-webkit-scrollbar { display: initial; }
}

.vg-box,
.eg-box {
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  vertical-align: bottom;
  float: right;
  width: 120px;
  height: 25px;
  font-size: 14pt;
  color: var(--text-color);
}
.vg-box { background-color: var(--box-bg-alt); border: 1px solid var(--border-primary); }
.eg-box { background-color: var(--box-bg-new); border: 1px solid var(--border-secondary); }
details .vg-box { width:115px; height:20px; font-size:12pt; }

#button {
  display: inline-block;
  position: relative;
  vertical-align: bottom;
  width: calc(100% - 20px);
  font-size: 14pt;
  color: var(--text-color);
  background-color: var(--button-bg);
  border: 5px solid var(--muted-gray);
  padding: 10px;
  margin: 0 10px;
  border-radius: var(--border-radius);
  box-sizing: border-box;
}

.tooltip {
  position: relative;
  display: inline-block;
  pointer-events: none;
}
.info-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: var(--muted-gray);
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 20px;
  font-weight: bold;
  cursor: help;
  pointer-events: auto;
}
details .info-icon { width: 17px; height: 17px; line-height: 17px; }
@media (pointer: coarse) {
  .info-icon { position: relative; pointer-events: none; z-index: 0; }
  .info-icon::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 44px; height: 44px;
    background: transparent;
    pointer-events: auto;
    z-index: 1;
  }
}

.tooltip-text {
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%) translateY(5px);
  width: auto;
  max-width: min(180px, calc(100vw - 20px));
  max-height: 80vh;
  overflow-y: auto;
  white-space: normal;
  line-height: 1.3;
  background-color: var(--tooltip-bg);
  color: var(--text-color);
  text-align: left;
  border-radius: 6px;
  padding: 6px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  z-index: 1000;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.tooltip:hover ~ .tooltip .tooltip-text { visibility: hidden; opacity: 0; }
.tooltip-text::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: var(--muted-gray) transparent transparent transparent;
}
@media (max-height: 200px) {
  .tooltip-text { bottom: auto; top: 125%; }
  .tooltip-text::after {
    top: auto; bottom: 100%;
    border-color: transparent transparent var(--muted-gray) transparent;
  }
}
@media (max-width: 220px) {
  .tooltip-text {
    left: -10px; right: -10px;
    transform: none;
    width: auto;
  }
}

.hang {
  display: block;
  margin-left: 1.4em;
  text-indent: -1.2em;
}

#tooltip-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99999;
}
.tooltip-float {
  position: fixed;
  width: auto;
  max-width: 180px;
  max-height: 80vh;
  overflow-y: auto;
  white-space: normal;
  line-height: 1.25;
  background: var(--tooltip-bg);
  color: var(--text-color);
  border-radius: 6px;
  padding: 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,.2);
  opacity: 1;
  transition: opacity .3s ease, transform .3s ease;
}
.tooltip.tooltip--ported .tooltip-text {
  visibility: hidden !important;
  opacity: 0 !important;
}

.no-js-message {
  text-align: center;
  padding: 20px;
  font-size: 18px;
  color: var(--muted-text);
}

.hidden-field,
.visible-field {
  overflow-y: hidden;
  overflow-x: visible;
}

.hidden-field {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}

.visible-field {
  max-height: 1000px;
  opacity: 1;
  transition: max-height 0.4s ease, opacity 0.4s ease;
}

.hidden-field:focus-within,
.visible-field:focus-within {
  padding: 5px;
  margin: -5px;
  box-sizing: border-box;
}

#alt, #neu {
  border: 5px solid;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: var(--border-radius);
}
#alt { border-color: var(--border-primary); }
#neu { border-color: var(--border-secondary); }

details {
  font-size: 14px;
  border: 1px solid var(--border-primary);
  padding: 5px;
  transition: all 0.3s ease;
  line-height: 1.25;
}

details[open] {
  border-color: var(--hover-blue);
}

summary {
  cursor: pointer;
  color: var(--border-primary);
  font-size: 14px;
  text-decoration: none;
  list-style: none;
  transition: color 0.3s ease;
  position: relative;
  padding-right: 22px;
}

summary:hover {
  color: var(--hover-blue);
}

details summary::-webkit-details-marker {
  display: none;
}

summary::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 2px;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

details[open] summary::after {
  transform: rotate(-135deg);
  top: 6px;
}

details p {
  margin: 5px 0;
  padding: 2px 0;
}

details.green {
  border-color: var(--border-secondary);
}

details.green summary {
  color: var(--border-secondary);
}

details.green[open] {
  border-color: var(--border-secondary);
}

details.green summary:hover {
  color: var(--border-secondary);
}

details.green summary::after {
  border-right-color: var(--border-secondary);
  border-bottom-color: var(--border-secondary);
}

/* Grundlayout für das neutrale FAQ-Akkordeon */
.faq-accordion {
  margin: 4px 0;
}

/* Einzelner Eintrag */
.faq-item {
  border: 1px solid var(--muted-gray);
  margin: 4px 0;
}

/* Kopf (Titel-Zeile, klickbar) */
.faq-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;

  font: inherit;
  color: var(--muted-text);
  text-align: left;
}

/* Hover nur dezent grau, kein Grün/Blau */
.faq-header:hover {
  background: var(--faq-hover-bg);
  color: var(--text-color);
}

/* Pfeil rechts */
.faq-arrow {
  display: inline-block;
  font-size: 0.9em;
  line-height: 1;
  /* kein transition, also keine Animation */
  transform: rotate(0deg); /* geschlossen: Pfeil nach rechts (›) */
}

/* Wenn geöffnet: Pfeil nach unten (⌄) via Rotation */
.faq-item.open > .faq-header .faq-arrow {
  transform: rotate(90deg);
}

/* Inhaltspanel */
.faq-panel {
  display: none;              /* zu = komplett eingeklappt */
  padding: 6px 8px 8px;
  border-top: 1px solid var(--muted-gray);
}

/* offen = Panel sichtbar */
.faq-item.open > .faq-panel {
  display: block;
}

.primary-text { color: var(--border-primary); }

input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  position: absolute;
  width: 100%; height: 100%;
  left: 0; top: 0;
  cursor: pointer;
}

.content-state { display: none; }
.content-state.active { display: block; }

ul { margin: 0; }

#curve_chart.fade {
  opacity: 0.2;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  transition: opacity 0.4s, filter 0.4s;
  pointer-events: none;
}

#toast-container {
  position: fixed;
  top: 1rem; right: 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  z-index: 9999;
  pointer-events: none;
  max-width: 320px;
}
.toast {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1rem;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  font-size: .9rem;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: auto;
  color: #fff;
  position: relative;
}
.toast.visible { opacity: 1; transform: translateY(0); }
.toast-success { background: #2e7d32; }
.toast-info { background: #1565c0; }
.toast-warning { background: #f9a825; color: #000; }
.toast-error { background: #c62828; }
.toast .close-btn {
  background: transparent;
  border: none;
  color: inherit;
  font-size: 1rem;
  cursor: pointer;
  margin-left: auto;
}

.vg-box:focus-visible,
.vg-box input:focus-visible,
.vg-box select:focus-visible {
  outline: 3px solid var(--border-primary);
  outline-offset: 2px;
  border-radius: 4px;
}
.eg-box:focus-visible,
.eg-box input:focus-visible,
.eg-box select:focus-visible {
  outline: 3px solid var(--border-secondary);
  outline-offset: 2px;
  border-radius: 4px;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid var(--hover-blue);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .tooltip-text,
  #curve_chart.fade,
  .toast { transition: none; }
}

.clearfix { clear: both; }

#curve_chart {
  width: 900px !important;
  height: 500px !important;
}

#page-content { display: none; }

table.vg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  color: var(--text-color);
  margin: 6px 0;
  table-layout: fixed;
}

table.vg-table colgroup col {
  width: 50% !important;
}

table.vg-table th,
table.vg-table td {
  border: 1px solid var(--muted-gray);
  padding: 5px;
  vertical-align: top;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}