/* Montaris — Weboberfläche. Farben kommen als --farbe/--akzent aus
   config/marke.json (dieselbe Quelle wie das Antrags-PDF), damit Website
   und Dokument nicht auseinanderlaufen. */

:root {
  --farbe: #1F3A5F;
  --akzent: #B8873B;
  --grund: #FBFBFC;
  --flaeche: #FFFFFF;
  --linie: #E3E5E9;
  --text: #23262B;
  --gedaempft: #6B7079;
  --leise: #8A8F98;
  --offen: #B3453F;
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 15px/1.55 Inter, "Helvetica Neue", -apple-system, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- Kopf */

.kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 24px;
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
  border-top: 4px solid var(--farbe);
  position: sticky; top: 0; z-index: 5;
}
.marke { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.wortmarke {
  font-size: 17px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--farbe);
}
.claim {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--akzent);
}
.kopf-rechts { display: flex; align-items: center; gap: 10px; }
.konto {
  font-size: 13px; color: var(--gedaempft);
  padding-right: 4px;
}

main { max-width: 820px; margin: 0 auto; padding: 24px 20px 80px; }

.fuss {
  max-width: 820px; margin: 0 auto; padding: 0 20px 28px;
  font-size: 11px; color: var(--leise);
}

/* ---------------------------------------------------------------- Knöpfe */

button, .knopf {
  display: inline-block; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 500;
  padding: 9px 16px; border-radius: var(--radius);
  border: 1px solid transparent; background: var(--farbe); color: #fff;
  text-decoration: none; transition: filter .12s ease;
}
button:hover, .knopf:hover { filter: brightness(1.12); }
.knopf.leise {
  background: transparent; color: var(--gedaempft);
  border-color: var(--linie); padding: 7px 12px; font-size: 13px;
}
.knopf.leise:hover { border-color: var(--akzent); color: var(--farbe);
  filter: none; }

/* ---------------------------------------------------------------- Anmelden */

.anmelden {
  max-width: 380px; margin: 60px auto; background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: 14px; padding: 28px;
}
.anmelden h1 { margin: 0 0 4px; font-size: 21px; color: var(--farbe); }
.unter { margin: 0 0 20px; color: var(--gedaempft); font-size: 14px; }
.anmelden label {
  display: block; margin-bottom: 14px;
  font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--gedaempft);
}
.anmelden input {
  display: block; width: 100%; margin-top: 6px;
  font: inherit; padding: 10px 12px;
  border: 1px solid var(--linie); border-radius: var(--radius);
  background: #fff; color: var(--text);
}
.anmelden input:focus {
  outline: none; border-color: var(--akzent);
  box-shadow: 0 0 0 3px rgba(184, 135, 59, .15);
}
.anmelden button { width: 100%; margin-top: 6px; }
.fehler {
  background: #FDF3F3; border-left: 3px solid var(--offen);
  color: #8A5450; padding: 10px 12px; border-radius: 6px;
  font-size: 13px; margin-bottom: 16px;
}

/* ---------------------------------------------------------------- Gespräch */

.stand {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 18px; padding-bottom: 14px;
  border-bottom: 1px solid var(--linie);
}
.ziel {
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gedaempft);
  background: #EEF1F5; border-radius: 999px; padding: 5px 12px;
}
.wahlhinweis { font-size: 13px; color: var(--akzent); }
.stand .knopf { margin-left: auto; }

.verlauf { display: flex; flex-direction: column; gap: 18px; }
.turn { display: flex; flex-direction: column; gap: 8px; max-width: 100%; }
.turn.nutzer { align-items: flex-end; }

.blase {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: 14px; padding: 12px 16px; max-width: 88%;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.turn.nutzer .blase {
  background: var(--farbe); color: #fff; border-color: var(--farbe);
  border-bottom-right-radius: 4px;
}
.turn.bot .blase { border-bottom-left-radius: 4px; }

.ereignisse {
  margin: 0; padding: 0 0 0 14px; list-style: none;
  font-size: 12.5px; color: var(--gedaempft);
}
.ereignisse li { position: relative; padding-left: 14px; }
.ereignisse li::before {
  content: "✓"; position: absolute; left: 0; color: var(--akzent);
  font-size: 11px;
}

/* ------------------------------------------------------- Empfehlungen */

.empfehlung {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-left: 3px solid var(--linie);
  border-radius: 12px; padding: 12px 16px;
}
.empfehlung.p-hoch { border-left-color: var(--akzent); }
.empfehlung.p-mittel { border-left-color: #A9B0BA; }
.empfehlung.p-niedrig { border-left-color: var(--linie); }
.emp-kopf { display: flex; align-items: baseline; gap: 10px; }
.nr {
  font-weight: 700; color: var(--akzent); font-size: 13px;
  min-width: 16px;
}
.emp-titel { font-weight: 600; color: var(--farbe); flex: 1; }
.passung {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gedaempft);
}
.emp-grund { font-size: 13.5px; color: var(--text); margin-top: 4px; }
.emp-zitat {
  font-size: 12.5px; color: var(--gedaempft); font-style: italic;
  margin-top: 6px; padding-left: 10px;
  border-left: 2px solid var(--linie);
}
.emp-id {
  font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--leise); margin-top: 6px;
}

/* ---------------------------------------------------------------- Eingabe */

.eingabe {
  display: flex; gap: 10px; margin-top: 22px;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: 14px; padding: 10px;
  position: sticky; bottom: 14px;
  box-shadow: 0 6px 20px rgba(20, 30, 50, .06);
}
.eingabe input {
  flex: 1; font: inherit; border: none; outline: none;
  padding: 8px 10px; background: transparent; color: var(--text);
  min-width: 0;
}
.hinweis-klein {
  font-size: 11.5px; color: var(--leise); margin: 8px 2px 0;
}
.leer {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: 12px; padding: 24px; color: var(--gedaempft);
  text-align: center;
}

@media (max-width: 560px) {
  .kopf { padding: 12px 14px; }
  .claim { display: none; }
  main { padding: 16px 12px 60px; }
  .blase { max-width: 100%; }
}