:root {
  /* UaB-Farbwelt, aus Website/Logo abgeleitet */
  --bg: #f4fbf3;
  --panel: #ffffff;
  --ink: #111111;
  --muted: #4f5f58;
  --brand: #008a63;
  --brand-dark: #006b4d;
  --brand-2: #f6c51c;
  --brand-soft: #c9eadb;
  --line: #d9eadf;
  --good: #008a63;
  --warn: #b24a2b;
  --shadow: 0 18px 50px rgba(0, 73, 51, .12);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at 10% 0%, rgba(246,197,28,.18), transparent 32%), var(--bg);
  color: var(--ink);
  line-height: 1.55;
}
.hero {
  padding: 64px 20px 42px;
  background: linear-gradient(135deg, var(--brand-dark), var(--brand) 58%, var(--brand-2));
  color: #ffffff;
}
.hero__content, .container { max-width: 1100px; margin: 0 auto; }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-weight: 700; font-size: .78rem; opacity: .85; }
h1 { font-size: clamp(2rem, 5vw, 4.6rem); line-height: .98; margin: 0 0 18px; max-width: 860px; }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin: 0 0 14px; }
h3 { margin: 0 0 6px; }
.lead { max-width: 760px; font-size: 1.2rem; opacity: .93; }
.hero__meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.hero__meta span { border: 1px solid rgba(255,255,255,.45); border-radius: 999px; padding: 8px 12px; background: rgba(255,255,255,.16); }
.container { padding: 30px 20px 70px; }
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: clamp(20px, 4vw, 34px);
  box-shadow: var(--shadow);
  margin: 22px 0;
}
.intro { display: flex; justify-content: space-between; gap: 18px; align-items: center; }
.button, .miniButton {
  border: 0;
  cursor: pointer;
  background: var(--brand);
  color: white;
  border-radius: 999px;
  padding: 13px 18px;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.button--ghost { background: var(--brand-soft); color: var(--brand-dark); }
.miniButton { padding: 8px 12px; margin-top: 8px; background: var(--brand-2); color: #111111; }
.alert { border-color: #f0b29c; background: #fff4ef; }
.success { border-color: #a8d7b3; background: #f0fff3; }
.muted { color: var(--muted); }
.wizard { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.wizard--questions { grid-template-columns: 1fr; }
.wizard__question { display: grid; grid-template-columns: 1fr 160px; gap: 16px; align-items: center; border: 1px solid var(--line); border-radius: 18px; padding: 14px; background: #fff; }
.wizard__question span { font-weight: 750; }
.wizard__question select { margin: 0; }
.wizard__item { display: block; border: 1px solid var(--line); border-radius: 18px; padding: 14px; cursor: pointer; }
.wizard__item input { margin-right: 7px; }
.wizard__item span { display: inline; font-weight: 800; }
.wizard__item small { display: block; margin-top: 6px; color: var(--muted); }
.wizard-result { margin-top: 16px; padding: 16px; background: #f3fbf6; border-radius: 16px; }
@media (max-width: 720px) { .wizard__question { grid-template-columns: 1fr; } }
fieldset { border: 0; padding: 0; margin: 0 0 30px; }
legend { font-weight: 900; font-size: 1.1rem; margin-bottom: 14px; }
label { display: block; font-weight: 750; margin: 12px 0; }
input, textarea, select {
  width: 100%;
  border: 1px solid #cfe4d6;
  border-radius: 14px;
  padding: 12px 13px;
  font: inherit;
  color: var(--ink);
  background: #ffffff;
  margin-top: 6px;
}
textarea { resize: vertical; }
.grid.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.chip { width: auto; margin: 0; border: 1px solid var(--line); border-radius: 999px; padding: 9px 12px; background: #f7fff8; }
.chip input { width: auto; margin: 0 6px 0 0; }
.categoryCards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin: 16px 0; }
.categoryCard { border: 1px solid var(--line); border-radius: 18px; padding: 16px; background: #ffffff; display: none; }
.categoryCard.is-active { display: block; border-color: var(--brand-2); box-shadow: 0 0 0 4px rgba(246,197,28,.22); }
dl { margin: 12px 0 0; }
dt { font-weight: 900; margin-top: 10px; }
dd { margin: 2px 0 0; color: var(--muted); }
.counter { float: right; font-size: .9rem; color: var(--muted); }
.counter.is-warning { color: var(--warn); font-weight: 900; }
.checklist { padding: 18px; background: #f3fbf6; border-radius: 18px; }
.checklist li { margin: 6px 0; color: var(--warn); }
.checklist li.is-ok { color: var(--good); font-weight: 800; }
.checklist li.is-ok::before { content: "✓ "; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }
.footer { text-align: center; padding: 30px; color: var(--muted); }
code { background: rgba(0,0,0,.07); padding: 2px 6px; border-radius: 6px; }
@media (max-width: 760px) {
  .intro { display: block; }
  .grid.two { grid-template-columns: 1fr; }
  .button { width: 100%; margin-top: 12px; }
}

input:focus, textarea:focus, select:focus {
  outline: 3px solid rgba(246, 197, 28, .45);
  border-color: var(--brand);
}
.button:hover, .miniButton:hover { filter: brightness(.96); }

@media print {
  .hero, .intro, .wizard, .wizard-result, .button, .footer { display: none !important; }
  body { background: white; }
  .panel { box-shadow: none; border: 0; padding: 0; }
  input, textarea, select { border: 0; border-bottom: 1px solid #aaa; border-radius: 0; }
}

.build-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .7rem;
  margin-bottom: 1rem;
  border-radius: 999px;
  background: rgba(246,197,28,.22);
  color: #111111;
  border: 1px solid rgba(246,197,28,.55);
  font-size: .9rem;
  font-weight: 700;
}

.ai-assistant {
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 18px;
  background: #ffffff;
  margin-bottom: 24px;
}
.assistant-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.small { font-size: .92rem; }
.assistant-result {
  margin-top: 16px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: #f3fbf6;
}
.assistant-result.is-loading { opacity: .8; }
.assistant-result.is-ok { border-color: #a8d7b3; background: #f0fff3; }
.assistant-result.is-error { border-color: #f0b29c; background: #fff4ef; color: var(--warn); font-weight: 800; }
.assistant-missing { margin-top: 12px; }
.assistant-result details { margin-top: 12px; }
.miniButton--ghost { background: var(--brand-soft); color: var(--brand-dark); margin-left: 8px; }
@media (max-width: 760px) {
  .assistant-actions .button { width: 100%; }
  .miniButton--ghost { margin-left: 0; }
}