:root {
  --bg: #07080b;
  --flaeche: #0f1116;
  --flaeche2: #151820;
  --linie: #232733;
  --text: #eceef2;
  --text2: #a2a6ae;
  --text3: #6f7480;
  --gold: #d6ae58;
  --gold2: #e9c97c;
  --gold-bg: rgba(214, 174, 88, .12);
  --gruen: #5cc28b;
  --rot: #e46a6a;
  --radius: 14px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: Poppins, system-ui, sans-serif; font-size: 15px; line-height: 1.5; }
body { min-height: 100vh; background: radial-gradient(70% 40% at 50% 0%, rgba(214,174,88,.10), transparent 60%), var(--bg); }
a { color: var(--gold); }
button, input, select, textarea { font: inherit; color: inherit; }
h1 { font-size: 24px; font-weight: 600; margin: 0 0 4px; }
h2 { font-size: 17px; font-weight: 600; margin: 0 0 12px; }
h3 { font-size: 15px; font-weight: 600; margin: 0 0 8px; }
.leise { color: var(--text2); }
.klein { font-size: 13px; }
.laden { padding: 80px 20px; text-align: center; color: var(--text2); }

/* Login */
.login { max-width: 420px; margin: 0 auto; padding: 70px 18px; }
.login .logo { display: block; width: 150px; margin: 0 auto 30px; }
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 22px; }
.login .karte { padding: 28px; }

/* Rahmen */
.kopf { position: sticky; top: 0; z-index: 5; background: rgba(7,8,11,.88); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linie); }
.kopf-innen { max-width: 1120px; margin: 0 auto; padding: 12px 18px; display: flex; align-items: center; gap: 18px; }
.kopf .logo { width: 112px; flex: none; }
.nav { display: flex; gap: 4px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { color: var(--text2); text-decoration: none; padding: 8px 12px; border-radius: 9px; white-space: nowrap; font-size: 14px; }
.nav a:hover { color: var(--text); background: var(--flaeche2); }
.nav a.aktiv { color: var(--gold); background: var(--gold-bg); }
.wer { font-size: 13px; color: var(--text2); text-align: right; white-space: nowrap; }
.wer button { background: none; border: 0; color: var(--text3); cursor: pointer; padding: 0; text-decoration: underline; font-size: 12px; }
.inhalt { max-width: 1120px; margin: 0 auto; padding: 26px 18px 70px; }
.banner { background: var(--gold-bg); border: 1px solid rgba(214,174,88,.35); color: var(--gold2); border-radius: 10px; padding: 10px 14px; margin-bottom: 18px; display: flex; justify-content: space-between; gap: 12px; align-items: center; font-size: 14px; }
.zeile { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.zeile.zwischen { justify-content: space-between; }
.abstand { margin-top: 18px; }
.abstand-gross { margin-top: 30px; }

/* Formulare */
label { display: block; font-size: 13px; color: var(--text2); margin: 0 0 6px; }
input[type=text], input[type=email], input[type=password], input[type=date], select, textarea {
  width: 100%; background: var(--flaeche2); border: 1px solid var(--linie); border-radius: 10px; padding: 11px 12px; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--gold); }
textarea { min-height: 110px; resize: vertical; }
.feld { margin-bottom: 14px; }
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 10px; padding: 11px 18px; font-weight: 600; cursor: pointer; background: var(--gold); color: #07080b; text-decoration: none; font-size: 14px; }
.knopf:hover { background: var(--gold2); }
.knopf:disabled { opacity: .55; cursor: default; }
.knopf.breit { width: 100%; }
.knopf.zweit { background: var(--flaeche2); color: var(--text); border: 1px solid var(--linie); }
.knopf.zweit:hover { border-color: var(--gold); }
.knopf.gefahr { background: transparent; color: var(--rot); border: 1px solid rgba(228,106,106,.5); }
.knopf.klein { padding: 7px 12px; font-size: 13px; }
.hinweis { margin-top: 12px; font-size: 14px; border-radius: 10px; padding: 10px 12px; }
.hinweis.ok { background: rgba(92,194,139,.12); color: var(--gruen); }
.hinweis.fehler { background: rgba(228,106,106,.12); color: var(--rot); }
.hinweis.info { background: var(--flaeche2); color: var(--text2); }
.versteckt { display: none !important; }

/* Kennzahlen */
.kacheln { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kachel { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 16px 18px; }
.kachel .wert { font-size: 28px; font-weight: 600; line-height: 1.2; }
.kachel .name { font-size: 13px; color: var(--text2); }
.kachel.gold .wert { color: var(--gold); }
.raster2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.raster3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.chart svg { width: 100%; height: 190px; display: block; }
.chart .achse { fill: var(--text3); font-size: 10px; }
.chart .balken { fill: rgba(214,174,88,.75); }
.chart .balken:hover { fill: var(--gold2); }
.chart .gitter { stroke: var(--linie); stroke-width: 1; }
.liste-balken { list-style: none; margin: 0; padding: 0; }
.liste-balken li { position: relative; padding: 7px 10px; margin-bottom: 5px; border-radius: 8px; overflow: hidden; display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.liste-balken .fuellung { position: absolute; inset: 0 auto 0 0; background: var(--gold-bg); z-index: 0; }
.liste-balken span { position: relative; z-index: 1; }
.liste-balken .n { color: var(--text2); }
.leer { color: var(--text3); font-size: 14px; padding: 8px 0; }
.umschalter { display: inline-flex; background: var(--flaeche2); border: 1px solid var(--linie); border-radius: 10px; padding: 3px; }
.umschalter button { background: none; border: 0; padding: 6px 12px; border-radius: 7px; cursor: pointer; color: var(--text2); font-size: 13px; }
.umschalter button.aktiv { background: var(--gold-bg); color: var(--gold); }

/* Tabellen und Listen */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-weight: 500; color: var(--text3); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; padding: 8px 10px; border-bottom: 1px solid var(--linie); }
td { padding: 11px 10px; border-bottom: 1px solid var(--linie); vertical-align: top; }
tr.klickbar { cursor: pointer; }
tr.klickbar:hover td { background: var(--flaeche2); }
.marke { display: inline-block; font-size: 12px; padding: 2px 9px; border-radius: 99px; background: var(--flaeche2); color: var(--text2); border: 1px solid var(--linie); }
.marke.gold { background: var(--gold-bg); color: var(--gold); border-color: rgba(214,174,88,.35); }
.marke.gruen { color: var(--gruen); border-color: rgba(92,194,139,.4); }
.marke.rot { color: var(--rot); border-color: rgba(228,106,106,.4); }
.anfrage { border: 1px solid var(--linie); border-radius: 12px; background: var(--flaeche); margin-bottom: 10px; }
.anfrage summary { list-style: none; cursor: pointer; padding: 14px 16px; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.anfrage summary::-webkit-details-marker { display: none; }
.anfrage.neu summary .titel::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); margin-right: 8px; vertical-align: middle; }
.anfrage .koerper { padding: 0 16px 16px; }
.anfrage dl { display: grid; grid-template-columns: minmax(120px, 220px) 1fr; gap: 6px 14px; margin: 0; font-size: 14px; }
.anfrage dt { color: var(--text2); }
.anfrage dd { margin: 0; white-space: pre-wrap; word-break: break-word; }
.postfach { border-top: 1px solid var(--linie); padding: 14px 0; }
.postfach:first-of-type { border-top: 0; }
.balken-speicher { height: 6px; background: var(--flaeche2); border-radius: 99px; overflow: hidden; width: 160px; }
.balken-speicher div { height: 100%; background: var(--gold); }
.aufklapp { margin-top: 12px; padding: 14px; border-radius: 10px; background: var(--flaeche2); }
.dialog-huelle { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; padding: 18px; z-index: 20; }
.dialog { width: 100%; max-width: 460px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 22px; max-height: 90vh; overflow: auto; }

/* Live-Besucher */
.puls { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--text3); margin-right: 9px; vertical-align: middle; }
.puls.an { background: var(--gruen); box-shadow: 0 0 0 0 rgba(92,194,139,.6); animation: puls 1.8s infinite; }
@keyframes puls { 0% { box-shadow: 0 0 0 0 rgba(92,194,139,.55); } 70% { box-shadow: 0 0 0 10px rgba(92,194,139,0); } 100% { box-shadow: 0 0 0 0 rgba(92,194,139,0); } }
.live-zahl { font-size: 46px; font-weight: 600; line-height: 1; color: var(--text); margin-right: 10px; }
.wv-zeile { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--linie); text-decoration: none; color: var(--text); }
.wv-zeile:first-of-type { border-top: 0; }
.wv-zeile.faellig .klein:last-child { color: var(--rot); }

/* Kontakte */
.suche { max-width: 380px; }
.pipeline { display: grid; grid-template-columns: repeat(5, minmax(200px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.spalte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 10px; min-height: 180px; }
.spalte.ueber { border-color: var(--gold); background: var(--flaeche2); }
.spalte-kopf { display: flex; justify-content: space-between; align-items: baseline; padding: 2px 4px 10px; }
.spalte[data-status=gewonnen] .spalte-kopf b { color: var(--gruen); }
.spalte[data-status=neu] .spalte-kopf b { color: var(--gold); }
.kkarte { display: flex; flex-direction: column; gap: 3px; background: var(--flaeche2); border: 1px solid var(--linie); border-radius: 10px; padding: 10px 11px; margin-bottom: 8px; color: var(--text); text-decoration: none; cursor: grab; font-size: 14px; }
.kkarte:hover { border-color: rgba(214,174,88,.5); }
.kkarte.zieht { opacity: .5; }
.kkarte .zeile { gap: 5px; margin-top: 3px; }
.statusleiste { display: flex; flex-wrap: wrap; gap: 6px; }
.statusleiste button { background: var(--flaeche); border: 1px solid var(--linie); color: var(--text2); border-radius: 99px; padding: 8px 16px; cursor: pointer; font-size: 14px; }
.statusleiste button:hover { border-color: var(--gold); color: var(--text); }
.statusleiste button.aktiv { background: var(--gold); border-color: var(--gold); color: #07080b; font-weight: 600; }
.statusleiste button.aktiv.st-gewonnen { background: var(--gruen); border-color: var(--gruen); }
.statusleiste button.aktiv.st-verloren { background: var(--rot); border-color: var(--rot); }
.notiz { border-top: 1px solid var(--linie); padding: 10px 0; margin-top: 10px; }
.umbruch { white-space: pre-wrap; word-break: break-word; }
.verlauf { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--linie); font-size: 14px; flex-wrap: wrap; }
.verlauf:first-of-type { border-top: 0; }
.wv-haken { align-items: flex-start; color: var(--text); font-size: 14px; margin: 0; cursor: pointer; }
.wv-haken input { margin-top: 4px; }
.erledigt span { text-decoration: line-through; color: var(--text3); }
.fehlertext { color: var(--rot); }

/* Popups fuer Anfrage und Kontakt */
.dialog.breit { max-width: 940px; position: relative; padding: 26px; }
.popup-zu { position: absolute; top: 10px; right: 12px; background: none; border: 0; color: var(--text2); font-size: 28px; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.popup-zu:hover { color: var(--text); background: var(--flaeche2); }
.popup-kopf { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; padding-right: 34px; }
.popup-titel { font-size: 21px; margin: 4px 0 2px; }
.kontaktzeile { margin: 2px 0 0; color: var(--text2); font-size: 14px; }
button.link { background: none; border: 0; padding: 0; color: var(--gold); cursor: pointer; font-weight: 600; text-decoration: underline; }
.listenknopf { width: 100%; background: none; border: 0; border-top: 1px solid var(--linie); padding: 10px 0; text-align: left; cursor: pointer; color: var(--text); font-size: 14px; }
.listenknopf:first-of-type { border-top: 0; }
.listenknopf:hover { color: var(--gold2); }
.dialog .karte { background: var(--flaeche2); }
.dialog .karte input, .dialog .karte textarea, .dialog .karte select { background: var(--flaeche); }
.feld.schmal { margin-bottom: 0; min-width: 170px; }
.anfrage-form { align-items: flex-end; }
dl.angaben { display: grid; grid-template-columns: minmax(110px, 180px) 1fr; gap: 6px 14px; margin: 0; font-size: 14px; }
dl.angaben dt { color: var(--text2); }
dl.angaben dd { margin: 0; white-space: pre-wrap; word-break: break-word; }
.ohne-scroll { overflow: hidden; }
.kkarte.ungelesen { border-left: 3px solid var(--gold); }
tr.ungelesen td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
.kkarte:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.marke.st-neu { color: var(--gold); border-color: rgba(214,174,88,.4); }
.marke.st-gewonnen { color: var(--gruen); border-color: rgba(92,194,139,.4); }
.marke.st-verloren { color: var(--rot); border-color: rgba(228,106,106,.4); }
.marke.st-angebot { color: var(--text); }

@media (max-width: 860px) {
  .pipeline { grid-template-columns: repeat(5, 78vw); scroll-snap-type: x mandatory; }
  .spalte { scroll-snap-align: start; }
  .suche { max-width: none; }
  .dialog.breit { padding: 18px 14px; }
  .dialog-huelle { padding: 8px; align-items: flex-start; }
  .dialog { max-height: calc(100vh - 16px); }
  dl.angaben { grid-template-columns: 1fr; gap: 2px; }
  dl.angaben dt { margin-top: 6px; }
  .kacheln { grid-template-columns: repeat(2, 1fr); }
  .raster2, .raster3 { grid-template-columns: 1fr; }
  .kopf-innen { flex-wrap: wrap; gap: 10px; }
  .nav { order: 3; flex: 1 1 100%; }
  .wer { margin-left: auto; }
  .anfrage dl { grid-template-columns: 1fr; gap: 2px; }
  .anfrage dt { margin-top: 6px; }
  .tabelle-huelle { overflow-x: auto; }
}