/* MELTER Akquise - Oberflaeche */

:root {
  --papier: #f4f3f0;
  --karte: #ffffff;
  --linie: #e0ddd6;
  --linie-stark: #c9c4b8;
  --text: #22262b;
  --gedaempft: #6d7278;
  --akzent: #2f5d8a;
  --akzent-hell: #eaf1f8;
  --gut: #2e7d52;
  --gut-hell: #e6f3ec;
  --warn: #a8611a;
  --warn-hell: #fdf1e3;
  --stark: #8a2f4f;
  --stark-hell: #fbeaf0;
  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --radius: 7px;
  --schatten: 0 1px 2px rgba(24,26,29,.05), 0 4px 14px rgba(24,26,29,.05);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--akzent); }

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

.kopf {
  display: flex; align-items: center; gap: 22px;
  background: #1d2833; color: #eef1f4;
  padding: 0 20px; height: 52px;
  position: sticky; top: 0; z-index: 40;
}
.kopf .marke {
  font-weight: 800; letter-spacing: .16em; font-size: 14px;
  color: #fff; text-decoration: none;
}
.kopf nav { display: flex; gap: 2px; flex: 1; overflow-x: auto; }
.kopf nav a {
  color: #b9c4cf; text-decoration: none; padding: 7px 12px;
  border-radius: 6px; font-size: 14px; white-space: nowrap;
  display: flex; align-items: center; gap: 7px;
}
.kopf nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.kopf nav a.an { background: rgba(255,255,255,.14); color: #fff; font-weight: 600; }
.kopf nav .ic { opacity: .75; font-size: 13px; }
.kopf .ab { color: #8d99a6; text-decoration: none; font-size: 13px; }
.kopf .ab:hover { color: #fff; }

/* ------------------------------------------------------------- Modus */

.modus {
  padding: 9px 20px; font-size: 13.5px; font-weight: 600;
  display: flex; align-items: center; gap: 10px;
}
.modus a { margin-left: auto; font-weight: 500; }
.modus.test { background: var(--warn-hell); color: var(--warn); border-bottom: 1px solid #f0dcc2; }
.modus.live { background: var(--stark-hell); color: var(--stark); border-bottom: 1px solid #f0c9d6; }

/* ------------------------------------------------------------ Aufbau */

main { max-width: 1080px; margin: 0 auto; padding: 26px 20px 90px; }
main.breit { max-width: 1420px; }

.seitenkopf {
  display: flex; align-items: flex-start; gap: 16px;
  margin: 4px 0 20px; flex-wrap: wrap;
}
.seitenkopf h1 { margin: 0; font-size: 24px; letter-spacing: -.015em; }
.seitenkopf .unter { margin: 3px 0 0; color: var(--gedaempft); font-size: 14px; }
.seitenkopf .werkzeuge { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.karte {
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 20px; margin-bottom: 16px;
  box-shadow: var(--schatten);
}
.karte h2 { margin: 0 0 12px; font-size: 17px; }
.karte h3 { margin: 20px 0 8px; font-size: 15px; }
.karte > :last-child { margin-bottom: 0; }

.raster { display: grid; gap: 16px; }
.raster.z2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.raster.z3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.raster.z4 { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }

/* ---------------------------------------------------------- Meldungen */

.meldung {
  padding: 11px 15px; border-radius: var(--radius); margin-bottom: 16px;
  font-size: 14px; border: 1px solid;
}
.meldung.ok   { background: var(--gut-hell);  border-color: #c6e3d3; color: var(--gut); }
.meldung.warn { background: var(--warn-hell); border-color: #f0dcc2; color: var(--warn); }
.meldung.fehler { background: var(--stark-hell); border-color: #f0c9d6; color: var(--stark); }

/* ------------------------------------------------------------ Kacheln */

.kachel {
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 15px 16px;
  display: block; text-decoration: none; color: inherit;
  box-shadow: var(--schatten);
}
a.kachel:hover { border-color: var(--akzent); }
.kachel b { display: block; font-size: 27px; line-height: 1.15; letter-spacing: -.02em; }
.kachel span { color: var(--gedaempft); font-size: 13px; }
.kachel.gut b { color: var(--gut); }
.kachel.warn b { color: var(--warn); }
.kachel.stark b { color: var(--stark); }

/* ------------------------------------------------------------ Knoepfe */

.knopf, button {
  display: inline-block; padding: 8px 15px; border-radius: 6px;
  border: 1px solid var(--linie-stark); background: #fff; color: var(--text);
  font: inherit; font-size: 14px; font-weight: 500;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.knopf:hover, button:hover { border-color: #9a9484; background: #fbfaf8; }
.knopf.haupt, button.haupt {
  background: var(--akzent); border-color: var(--akzent); color: #fff;
}
.knopf.haupt:hover, button.haupt:hover { background: #26496d; border-color: #26496d; }
.knopf.gefahr, button.gefahr {
  background: var(--stark); border-color: var(--stark); color: #fff;
}
.knopf.gefahr:hover, button.gefahr:hover { background: #6f2540; }
.knopf.klein, button.klein { padding: 4px 10px; font-size: 13px; }
.knopf[disabled], button[disabled] { opacity: .45; pointer-events: none; }

/* ------------------------------------------------------------- Felder */

.feld { display: block; margin-bottom: 14px; }
.feld > span { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.feld input, .feld select, .feld textarea {
  width: 100%; padding: 8px 11px; font: inherit; font-size: 14px;
  border: 1px solid var(--linie-stark); border-radius: 6px;
  background: #fff; color: var(--text);
}
.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: 2px solid var(--akzent-hell); border-color: var(--akzent);
}
.feld textarea { resize: vertical; min-height: 70px; line-height: 1.55; }
.feld small { display: block; color: var(--gedaempft); font-size: 12.5px; margin-top: 4px; }
.feld input[type=color] { padding: 2px; height: 36px; cursor: pointer; }

.haken { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; font-size: 14px; }
.haken input { width: 16px; height: 16px; }

.feldreihe { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* ----------------------------------------------------------- Tabellen */

.tabellenrahmen { overflow-x: auto; border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead th {
  text-align: left; font-size: 12px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--gedaempft); font-weight: 700;
  padding: 8px 10px; border-bottom: 2px solid var(--linie); white-space: nowrap;
}
tbody td { padding: 9px 10px; border-bottom: 1px solid var(--linie); vertical-align: top; }
tbody tr:hover { background: #faf9f6; }
tbody td a { text-decoration: none; font-weight: 500; }
tbody td a:hover { text-decoration: underline; }
.leer { color: var(--gedaempft); padding: 22px 0; text-align: center; }

/* ------------------------------------------------------------- Marken */

.marke {
  display: inline-block; padding: 2px 8px; border-radius: 20px;
  font-size: 12px; font-weight: 600; background: #eeece7; color: #5c6066;
  white-space: nowrap;
}
.marke.gut   { background: var(--gut-hell);  color: var(--gut); }
.marke.warn  { background: var(--warn-hell); color: var(--warn); }
.marke.stark { background: var(--stark-hell);color: var(--stark); }
.marke.aktiv { background: var(--akzent-hell); color: var(--akzent); }
.marke.grau  { background: #eeece7; color: #8b8f95; }

.blaettern {
  display: flex; align-items: center; gap: 16px; justify-content: center;
  padding: 14px 0; color: var(--gedaempft); font-size: 14px;
}

/* ------------------------------------------------------- Kontaktdetail */

.dl { display: grid; grid-template-columns: 175px 1fr; gap: 7px 16px; font-size: 14px; }
.dl dt { color: var(--gedaempft); }
.dl dd { margin: 0; }

.signalliste { display: flex; flex-wrap: wrap; gap: 6px; }

.verlauf { list-style: none; margin: 0; padding: 0; }
.verlauf li {
  padding: 11px 0 11px 18px; border-left: 2px solid var(--linie);
  position: relative; font-size: 14px;
}
.verlauf li::before {
  content: ""; position: absolute; left: -5px; top: 17px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--linie-stark);
}
.verlauf li.gesendet::before { background: var(--akzent); }
.verlauf li.antwort::before { background: var(--gut); }
.verlauf .wann { color: var(--gedaempft); font-size: 12.5px; }

/* ------------------------------------------------------- Segmentbauer */

.filterblock {
  border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 14px; margin-bottom: 12px; background: #fbfaf8;
}
.filterblock > h4 { margin: 0 0 9px; font-size: 13px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--gedaempft); }
.hakenraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 14px; }

.vorschau {
  position: sticky; bottom: 0; background: #1d2833; color: #fff;
  padding: 13px 18px; border-radius: var(--radius);
  display: flex; align-items: center; gap: 14px; margin-top: 16px;
}
.vorschau b { font-size: 21px; }
.vorschau .rechts { margin-left: auto; display: flex; gap: 8px; }

/* ------------------------------------------------------------- Editor */

.editorflaeche { display: grid; grid-template-columns: 226px 1fr 262px; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .editorflaeche { grid-template-columns: 1fr; } }

.werkzeugkiste, .eigenschaften {
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 14px; position: sticky; top: 108px;
  box-shadow: var(--schatten);
}
.werkzeugkiste h3, .eigenschaften h3 {
  margin: 0 0 10px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--gedaempft);
}
.bausteine { display: grid; gap: 6px; }
.baustein {
  display: flex; align-items: center; gap: 9px; padding: 9px 11px;
  border: 1px solid var(--linie); border-radius: 6px; background: #fff;
  cursor: pointer; font-size: 14px; text-align: left; width: 100%;
}
.baustein:hover { border-color: var(--akzent); background: var(--akzent-hell); }
.baustein .ic { font-size: 15px; width: 18px; text-align: center; opacity: .7; }

.leinwandrahmen {
  background: #e8e6e1; border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 22px; min-height: 460px;
}
.leinwand {
  background: #fff; max-width: 600px; margin: 0 auto;
  border-radius: 6px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,.09);
}
.eblock { position: relative; border: 2px solid transparent; }
.eblock:hover { border-color: #b9d3ec; }
.eblock.gewaehlt { border-color: var(--akzent); }
.eblock .griff {
  position: absolute; top: -1px; right: -1px; display: none; gap: 1px;
  background: var(--akzent); border-radius: 0 0 0 5px; z-index: 3;
}
.eblock:hover .griff, .eblock.gewaehlt .griff { display: flex; }
.eblock .griff button {
  background: none; border: 0; color: #fff; padding: 3px 8px;
  font-size: 12px; cursor: pointer; border-radius: 0; line-height: 1.5;
}
.eblock .griff button:hover { background: rgba(0,0,0,.22); }
.eblock [contenteditable]:focus { outline: 2px solid var(--akzent-hell); }
.leerhinweis { padding: 60px 20px; text-align: center; color: var(--gedaempft); }

.eigenschaften .feld { margin-bottom: 11px; }
.farbreihe { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.medienliste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-height: 220px; overflow-y: auto; }
.medienliste img {
  width: 100%; height: 54px; object-fit: cover; border-radius: 4px;
  border: 2px solid var(--linie); cursor: pointer;
}
.medienliste img:hover { border-color: var(--akzent); }

.platzhalterliste { display: flex; flex-wrap: wrap; gap: 5px; }
.platzhalterliste code {
  background: #eeece7; padding: 2px 7px; border-radius: 4px; cursor: pointer;
  font-family: var(--mono); font-size: 12px;
}
.platzhalterliste code:hover { background: var(--akzent); color: #fff; }

/* -------------------------------------------------------------- Login */

.anmeldeseite {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: #1d2833; padding: 20px;
}
.anmeldekarte {
  background: #fff; padding: 34px; border-radius: 10px; width: 100%; max-width: 380px;
}
.anmeldekarte h1 { margin: 0 0 5px; font-size: 21px; letter-spacing: .1em; }
.anmeldekarte p.unter { margin: 0 0 22px; color: var(--gedaempft); font-size: 14px; }
.anmeldekarte button { width: 100%; }

/* ------------------------------------------------------------ Sonstiges */

code, kbd { font-family: var(--mono); font-size: 13px; }
pre {
  background: #1d2833; color: #dbe3ea; padding: 14px; border-radius: 6px;
  overflow-x: auto; font-family: var(--mono); font-size: 12.5px; line-height: 1.6;
}
.hinweiskasten {
  background: var(--akzent-hell); border-left: 3px solid var(--akzent);
  padding: 12px 15px; border-radius: 0 6px 6px 0; font-size: 14px; margin: 14px 0;
}
.reihe { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rechtsbuendig { margin-left: auto; }
.gedaempft { color: var(--gedaempft); }
.klein { font-size: 13px; }
.nowrap { white-space: nowrap; }
hr { border: 0; border-top: 1px solid var(--linie); margin: 18px 0; }

/* ===================================================== Ladeanzeige & Modal */

.schleier {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(24, 30, 37, .45);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .18s ease;
  backdrop-filter: blur(1.5px);
}
.schleier.da { opacity: 1; }

.ladekarte {
  background: #fff; border-radius: 10px; padding: 26px 34px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .22); min-width: 210px;
}
.ladekarte .ltext { font-size: 14.5px; color: var(--gedaempft); text-align: center; }

.kreisel {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid var(--linie); border-top-color: var(--akzent);
  animation: dreh .8s linear infinite;
}
@keyframes dreh { to { transform: rotate(360deg); } }

.modal {
  background: #fff; border-radius: 10px; padding: 24px;
  width: 100%; max-width: 430px; margin: 20px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
}
.modal h3 { margin: 0 0 10px; font-size: 18px; }
.modal .mtext { color: var(--gedaempft); font-size: 14.5px; line-height: 1.6; }
.modal .mknoepfe { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }

.schnipsel {
  position: fixed; bottom: 22px; left: 50%; transform: translate(-50%, 14px);
  background: #1d2833; color: #fff; padding: 11px 20px; border-radius: 22px;
  font-size: 14px; z-index: 210; opacity: 0; transition: all .22s ease;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .25);
}
.schnipsel.da { opacity: 1; transform: translate(-50%, 0); }
.schnipsel.fehler { background: var(--stark); }
.schnipsel.warn { background: var(--warn); }

/* ======================================================== Ernte-Fortschritt */

.fortschrittsbalken {
  background: #e3e1dc; border-radius: 20px; height: 10px;
  overflow: hidden; margin: 12px 0;
}
.fortschrittsbalken > div {
  background: linear-gradient(90deg, var(--akzent), #4a86c0);
  height: 100%; width: 0; transition: width .4s ease;
}
.fortschrittsbalken.unbestimmt > div {
  width: 32% !important;
  animation: wandern 1.5s ease-in-out infinite;
}
@keyframes wandern {
  0% { margin-left: -32%; } 100% { margin-left: 100%; }
}

.laufzeile {
  font-family: var(--mono); font-size: 12.5px; color: var(--gedaempft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.pulsierend { animation: pulsieren 1.6s ease-in-out infinite; }
@keyframes pulsieren { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* ============================================================ Auswahlleiste */

.auswahlleiste {
  position: sticky; bottom: 0; z-index: 30;
  background: #1d2833; color: #fff; padding: 12px 18px;
  border-radius: var(--radius); margin-top: 14px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  box-shadow: 0 -3px 18px rgba(0, 0, 0, .13);
}
.auswahlleiste b { font-size: 18px; }
.auswahlleiste select {
  padding: 7px 10px; border-radius: 6px; border: 1px solid #3c4c5c;
  background: #26333f; color: #fff; font: inherit; font-size: 14px;
}
.auswahlleiste .rechts { margin-left: auto; display: flex; gap: 8px; align-items: center; }

td.waehlen, th.waehlen { width: 32px; padding-right: 0; }
td.waehlen input, th.waehlen input { width: 16px; height: 16px; cursor: pointer; }

/* =============================================================== Sicherung */

.sicherungszeile { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.sicherungszeile .datei { font-family: var(--mono); font-size: 12.5px; }

/* ====================================================== Gruppenschalter */

.gruppenschalter {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 10px; flex-wrap: wrap;
}
.gruppenschalter .knopf { padding: 3px 10px; font-size: 12.5px; }
.gruppenschalter .rechtsbuendig { margin-left: auto; }

/* Damit die Kästchenliste beim Rechnen nicht flackert */
#verteilung { min-height: 60px; }
#vorschauStand { transition: color .2s ease; }

/* ============================================================== Protokoll */

pre.protokoll {
  max-height: 260px; overflow-y: auto; margin: 0;
  background: #161d24; color: #cfd8e0;
  font-size: 12px; line-height: 1.62; white-space: pre-wrap; word-break: break-word;
}
pre.protokoll.hatFehler { border-left: 3px solid var(--stark); }

/* ============================================================== Auswertung */

.trichter { display: grid; gap: 9px; }
.trichterzeile {
  display: grid; grid-template-columns: 105px 1fr 52px 62px;
  align-items: center; gap: 10px; font-size: 14px;
}
.trichterzeile .tl { color: var(--gedaempft); }
.trichterzeile .tbalken {
  background: #eeece7; border-radius: 4px; height: 20px; overflow: hidden;
}
.trichterzeile .tbalken > span {
  display: block; height: 100%; background: var(--linie-stark);
  border-radius: 4px; transition: width .4s ease;
}
.trichterzeile .tbalken > span.gut   { background: var(--gut); }
.trichterzeile .tbalken > span.aktiv { background: var(--akzent); }
.trichterzeile .tbalken > span.stark { background: var(--stark); }
.trichterzeile b { text-align: right; }
.trichterzeile .tq { color: var(--gedaempft); font-size: 12.5px; text-align: right; }

.tagraster {
  display: flex; align-items: flex-end; gap: 3px; height: 150px;
  overflow-x: auto; padding-bottom: 4px;
}
.tagbalken {
  flex: 1 0 16px; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; height: 100%;
}
.tagbalken > span {
  width: 100%; background: var(--akzent); border-radius: 3px 3px 0 0;
  min-height: 2px; opacity: .82;
}
.tagbalken:hover > span { opacity: 1; }
.tagbalken > i {
  font-size: 10px; color: var(--gedaempft); font-style: normal; margin-top: 4px;
}

/* ========================================================== Anschriftprobe */

.anschriftprobe {
  border: 1px dashed var(--linie-stark); border-radius: 4px;
  padding: 12px 14px; margin: 10px 0 8px;
  width: 85mm; max-width: 100%;
  font-size: 14px; line-height: 1.45; background: #fbfaf8;
}