:root {
  --bg: #f8f3e8;
  --accent: #45576e;
  --accent-soft: #d6dce3;
  --danger: #c05c3d;
  --text: #3c3c3c;
  --card: #fffdf8;
  --border: #d8cab3;
  --shadow: rgba(0,0,0,0.07);
}
    *, *::before, *::after { box-sizing: border-box; }
    body {
      margin: 0; padding: 1rem;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: var(--bg); color: var(--text);
    }
    .container { max-width: 800px; margin: auto; }
    .nav { margin-bottom: 1rem; }
    h1 { text-align: center; margin: 0 0 1rem; }
.card {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 12px;
  padding: 1rem; margin-bottom: 1rem;
  box-shadow: 0 2px 8px var(--shadow);
}
    .input-row {
      display: flex; align-items: center;
      gap: 0.5rem; margin-bottom: 0.5rem;
    }
    .input-row input {
      flex: 1; padding: 0.5rem;
      border: 1px solid var(--border);
      border-radius: 8px;
      font-size: 1rem;
    }
    .input-row button {
      background: var(--danger);
      color: white; border: none;
      border-radius: 6px;
      padding: 0.4rem 0.8rem; cursor: pointer;
      flex-shrink: 0;
    }
    input.standard-input {
      width: 100%; padding: 0.5rem; font-size: 1rem;
      border: 1px solid var(--border); border-radius: 8px;
      margin-bottom: 0.5rem;
    }
button {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  cursor: pointer;
  margin: 0.5rem 0.5rem;
  box-shadow: 0 2px 4px var(--shadow);
}
button:hover {
  background: #3b4e63;
}
    input[type="range"].slider {
      width: 100%; height: 32px; margin: 0.5rem 0;
      background: var(--accent-soft); border-radius: 8px;
      -webkit-appearance: none; outline: none;
    }
    .bar-container {
      background: var(--accent-soft); border-radius: 6px;
      overflow: hidden; height: 20px; margin-top: 0.5rem;
    }
    .bar { background: var(--accent); height: 100%; }
    .alt-block, .req-block {
      margin-bottom: 1rem;
    }
    .slider-row {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    .slider-row span {
      min-width: 24px;
      text-align: right;
    }
img.wahlbert {
    border-radius: 50%;
    border: 2px solid #ccc;
    max-width: 64px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.wahlbert-wrapper {
    background: #fbf7ed;
    border-radius: 12px;
    padding: 0.75rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.wahlbert-text {
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.4;
    white-space: pre-line;
}