/* emtec Serviceplaner – Oberfläche (emtec-Farben: Rot #E30613, Anthrazit #2B2B2B) */
:root { --rot: #E30613; --rot2: #F6D5D7; --dunkel: #2B2B2B; --grau: #595959; --linie: #D0D0D0; --hell: #F4F4F4; --gut: #2E7D32; --warn: #C55A11; --bad: #C00000; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 13px/1.35 "Segoe UI", Calibri, Arial, Helvetica, sans-serif; color: var(--dunkel); background: #fff; }
button, input, select, textarea { font: inherit; color: inherit; }
input[type=text], input[type=password], input[type=number], input[type=date], input:not([type]), select, textarea {
  border: 1px solid #B8B8B8; border-radius: 3px; padding: 4px 6px; background: #fff; min-width: 0; }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(227, 6, 19, .35); border-color: var(--rot); }
textarea { width: 100%; resize: vertical; }
.mono { font-family: Consolas, monospace; font-size: 12px; }
.muted { color: #6B6B6B; } .small { font-size: 12px; } .nowrap { white-space: nowrap; }
.laden { padding: 40px; color: var(--grau); }

.btn { border: 1px solid #A6A6A6; background: #fff; border-radius: 3px; padding: 5px 12px; cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: var(--rot); color: var(--rot); }
.btn:active { background: var(--rot); color: #fff; }
.btn.primary { background: var(--rot); color: #fff; border-color: var(--rot); }
.btn.primary:hover { background: #B8000F; color: #fff; }
.btn.danger { border-color: var(--bad); color: var(--bad); }
.btn.danger:hover { background: var(--bad); color: #fff; }
.btn.small { padding: 2px 8px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: default; }
.btn.on { background: var(--rot); color: #fff; border-color: var(--rot); }

/* ---------- Anmeldung */
body.login { background: linear-gradient(160deg, #fff 0%, #F2F2F2 60%, #E9E9E9 100%); }
.loginbox { max-width: 380px; margin: 9vh auto; background: #fff; border: 1px solid #DDD; border-top: 4px solid var(--rot); border-radius: 6px; padding: 26px 28px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 8px 30px rgba(0,0,0,.08); }
.loginbox img { width: 200px; align-self: center; }
.loginbox h1 { text-align: center; font-size: 22px; margin: 2px 0 6px; font-weight: 600; }
.loginbox input { padding: 8px 10px; }
.loginbox .btn { padding: 8px; font-weight: 600; }
.loginmsg { color: var(--bad); min-height: 1em; }

/* ---------- Kopfleiste */
header.top { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-bottom: 3px solid var(--rot); background: #fff; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; margin-right: 8px; }
.brand img { height: 26px; }
.tbtn { border: 1px solid transparent; background: transparent; border-radius: 3px; padding: 4px 9px; cursor: pointer; }
.tbtn:hover { border-color: #C8C8C8; background: var(--hell); }
.jahrlab { margin-left: 6px; font-weight: 700; } .jahr { font-weight: 700; }
.sp { flex: 1; }
.wer { color: var(--grau); font-size: 12.5px; }
.demo { background: var(--rot); color: #fff; font-weight: 700; padding: 2px 8px; border-radius: 3px; font-size: 11.5px; letter-spacing: .5px; }
nav.tabs { display: flex; gap: 2px; padding: 6px 8px 0; background: #fff; overflow-x: auto; border-bottom: 1px solid #C8C8C8; scrollbar-width: thin; }
nav.tabs button { border: 1px solid #C8C8C8; border-bottom: none; background: #EDEDED; padding: 7px 14px; cursor: pointer; border-radius: 3px 3px 0 0; white-space: nowrap; }
nav.tabs button:hover { background: var(--rot2); }
nav.tabs button.on { background: #fff; color: var(--rot); font-weight: 700; border-top: 3px solid var(--rot); margin-bottom: -1px; }
.badge:not(:empty) { margin-left: 6px; color: var(--grau); font-weight: 400; }
.badge.warn { color: var(--bad); }

main { padding: 8px 10px; height: calc(100vh - 92px); overflow: auto; }
.toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.toolbar .grow { flex: 1; }
.toolbar label { display: inline-flex; align-items: center; gap: 4px; }
.hinweis { color: var(--bad); font-weight: 700; cursor: pointer; background: none; border: 0; }
.chk { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.chk input { margin: 0; }

/* ---------- Tabellen */
.tblwrap { overflow: auto; border: 1px solid var(--linie); background: #fff; }
.tblwrap.fill { height: 100%; }
table.grid { border-collapse: separate; border-spacing: 0; width: 100%; }
table.grid th { position: sticky; top: 0; z-index: 1; background: var(--dunkel); color: #fff; text-align: left; padding: 5px 6px; font-weight: 600; white-space: nowrap; border-right: 1px solid #4D4D4D; }
table.grid td { padding: 3px 6px; border-bottom: 1px solid #EBEBEB; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
table.grid tbody tr:nth-child(even) td { background-color: #FAFAFA; }
table.grid tbody tr:hover td { background-color: #FDEEEF; }
table.grid tbody tr.sel td { background-color: var(--rot) !important; color: #fff !important; }
table.grid tbody tr.sel td b, table.grid tbody tr.sel td span { color: #fff !important; }
table.grid td.r { text-align: right; } table.grid td.c { text-align: center; }
table.grid td.wrap { white-space: normal; }
table.grid td.empty { text-align: center; padding: 18px; }
table.grid.dense td { padding: 2px 5px; }
table.grid select { padding: 1px 3px; font-size: 12px; max-width: 220px; }
tr.off td { color: #A6A6A6; }

/* ---------- Tourenplanung */
.planung { display: flex; flex-direction: column; height: 100%; }
.planung .liste { flex: 1 1 46%; min-height: 140px; }
.planung .tafelwrap { flex: 1 1 54%; min-height: 160px; margin-top: 6px; border: 1px solid var(--linie); position: relative; display: flex; overflow: hidden; }
.tafel-namen { flex: 0 0 auto; background: #F2F2F2; border-right: 1px solid #808080; z-index: 2; overflow: hidden; }
.tafel-namen canvas, .tafel-scroll canvas { display: block; }
.tafel-scroll { flex: 1; overflow-x: auto; overflow-y: auto; }
.tip { position: fixed; z-index: 50; background: #FFFFE8; border: 1px solid #A6A6A6; padding: 5px 8px; font-size: 12px; white-space: pre-line; pointer-events: none; box-shadow: 0 2px 8px rgba(0,0,0,.15); max-width: 360px; }
.zoom { width: 120px; }

/* ---------- Kalender */
.kal-wrap { overflow: auto; border: 1px solid var(--linie); }

/* ---------- Tourenplan */
.split { display: grid; grid-template-columns: 270px 1fr; gap: 10px; height: 100%; }
.split > div { min-height: 0; display: flex; flex-direction: column; }
.tourliste { flex: 1; overflow: auto; border: 1px solid var(--linie); }
.tourliste div { padding: 5px 8px; cursor: pointer; border-bottom: 1px solid #F0F0F0; }
.tourliste div.mit { font-weight: 700; }
.tourliste div:hover { background: #FDEEEF; }
.tourliste div.on { background: var(--rot); color: #fff; }
.tourkopf { font-size: 15px; margin: 2px 0 2px; }
.vorschau { border: 1px solid var(--linie); padding: 10px; margin-top: 8px; background: #fff; overflow: auto; }
.vorschau table { border-collapse: collapse; width: 100%; }
.vorschau th { background: var(--dunkel); color: #fff; text-align: left; padding: 3px 5px; font-size: 12px; }
.vorschau td { border: 1px solid #C8C8C8; padding: 3px 5px; vertical-align: top; font-size: 12px; }
.vorschau .z1 { background: #EFEFEF; }
.vorschau .lab { color: var(--grau); }
.vorschau .prot { color: #404040; font-size: 10.5px; }

/* ---------- In-House */
.ih { display: grid; grid-template-columns: minmax(0, 1fr) 480px; gap: 10px; height: calc(100% - 70px); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.chip { border: 1px solid #A6A6A6; background: #fff; border-radius: 12px; padding: 3px 12px; cursor: pointer; }
.chip.on { background: var(--rot); color: #fff; border-color: var(--rot); }
.chip.gruen { color: var(--gut); } .chip.rot { color: var(--bad); }
.chip.on.gruen, .chip.on.rot { color: #fff; }
.detail { overflow: auto; border: 1px solid var(--linie); padding: 8px 10px; background: #fff; }
.detail .kopfz { font-size: 15px; margin-bottom: 6px; }
.dgrid { display: grid; grid-template-columns: 96px 1fr 96px 1fr; gap: 4px 8px; align-items: center; }
.dgrid label { color: var(--grau); font-size: 12px; }
.dgrid .w3 { grid-column: span 3; }
.dgrid input, .dgrid select { width: 100%; }
.dgrid .combo, .fv .combo { display: flex; width: 100%; }
.schritte .phase { color: var(--rot); font-weight: 700; margin-top: 6px; }
.schritte .s { display: flex; justify-content: space-between; gap: 8px; padding: 1px 0; }
.schritte .s.next label { color: var(--rot); font-weight: 700; }
.schritte .wer { color: #7F7F7F; font-size: 12px; white-space: nowrap; }
.schritte .s.next .wer { color: var(--rot); }
.ampel { font-size: 16px; line-height: 1; }

/* ---------- Kunden / Stammdaten */
.kd { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 10px; height: calc(100% - 40px); }
.subtabs { display: flex; gap: 2px; border-bottom: 1px solid #C8C8C8; margin-bottom: 8px; flex-wrap: wrap; }
.subtabs button { border: 1px solid #C8C8C8; border-bottom: none; background: #F2F2F2; padding: 5px 12px; cursor: pointer; border-radius: 3px 3px 0 0; }
.subtabs button.on { background: #fff; color: var(--rot); font-weight: 700; margin-bottom: -1px; }
.farbfeld { display: inline-block; width: 38px; height: 14px; border-radius: 2px; vertical-align: middle; border: 1px solid rgba(0,0,0,.15); }
.sect { max-width: 900px; }
.sect p { max-width: 820px; }

/* ---------- Umsätze */
.ums { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 10px; }
.ums .links { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ums .links .tblwrap { max-height: 40vh; }
table.grid td.sumcol { background-color: #F2F2F2; font-weight: 600; }
tr.ns td { background-color: #FCE4D6 !important; } tr.hw td { background-color: #FFF2CC !important; }
tr.sum td { background-color: var(--rot2) !important; font-weight: 700; } tr.head td { font-weight: 700; }
.charts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.charts .voll { grid-column: 1 / -1; }
svg.chart { width: 100%; height: auto; border: 1px solid var(--linie); background: #fff; }

/* ---------- Dialoge */
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 40; display: flex; align-items: flex-start; justify-content: center; padding: 4vh 10px; overflow: auto; }
.modal { background: #fff; border-radius: 6px; width: 560px; max-width: 100%; box-shadow: 0 12px 40px rgba(0,0,0,.25); border-top: 4px solid var(--rot); display: flex; flex-direction: column; max-height: 92vh; }
.modal.wide { width: 900px; } .modal.xwide { width: 1100px; }
.modal h2 { margin: 0; padding: 12px 16px 6px; font-size: 16px; }
.modal .body { padding: 6px 16px 10px; overflow: auto; }
.modal .foot { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px 14px; border-top: 1px solid #EEE; flex-wrap: wrap; }
.modal .foot .left { margin-right: auto; }
.modal p { margin: 4px 0 8px; }
.form { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 6px 10px; align-items: center; }
.form > label { color: #404040; }
.form .fv { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.form .fv > input:not([type=checkbox]):not([type=radio]), .form .fv > select, .form .fv > textarea, .form .fv > .combo { flex: 1 1 200px; }
.form .fv small { flex-basis: 100%; color: #6B6B6B; }
.form .full { grid-column: 1 / -1; }
.form1 { display: flex; flex-direction: column; gap: 6px; }
.combo { display: inline-flex; } .combo input { width: 100%; }
.checks { display: flex; flex-wrap: wrap; gap: 4px 14px; max-height: 150px; overflow: auto; border: 1px solid #DDD; padding: 6px 8px; border-radius: 3px; flex: 1 1 100%; }
.grid3 { display: grid; grid-template-columns: 190px minmax(0, 1fr) minmax(0, 1fr); gap: 6px 10px; align-items: center; }
.grid3 small { color: #6B6B6B; font-size: 11.5px; }
.note { border: 1px solid #E8A202; background: #FFF6E0; padding: 7px 10px; border-radius: 4px; margin: 6px 0; }
.note.bad { border-color: var(--bad); background: #FDECEA; } .note.good { border-color: var(--gut); background: #E9F7EE; }
.sub { font-weight: 700; margin: 12px 0 6px; border-bottom: 1px solid #EEE; padding-bottom: 3px; }
.bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bar input[type=text], .bar input[type=password] { flex: 1 1 180px; }
.steps .good { color: var(--gut); } .steps .bad { color: var(--bad); }
.list-row { display: flex; gap: 10px; align-items: center; padding: 4px 0; border-bottom: 1px solid #F2F2F2; }
.files { white-space: pre; font-family: Consolas, monospace; font-size: 12px; max-height: 220px; overflow: auto; background: #F7F7F7; padding: 6px; }
.dz { border: 2px dashed #B8B8B8; border-radius: 6px; padding: 18px; text-align: center; color: var(--grau); cursor: pointer; }
.dz.over, .dz:hover { border-color: var(--rot); color: var(--rot); }
.secrow { display: grid; grid-template-columns: 24px 1fr; gap: 8px; padding: 7px 0; border-bottom: 1px solid #EEF0F3; }
.secdot { color: #fff; border-radius: 50%; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.secsum { padding: 8px 10px; border-radius: 6px; margin: 4px 0 8px; font-weight: 600; }
.secsum.bad { background: #FDECEA; color: #C0152B; } .secsum.warn { background: #FFF4E0; color: #B26A00; } .secsum.ok { background: #E8F5EC; color: #1B7A2B; }
.geraete-tab td input, .geraete-tab td .combo { width: 100%; }

.menu { position: fixed; z-index: 60; background: #fff; border: 1px solid #C8C8C8; border-radius: 5px; box-shadow: 0 8px 26px rgba(0,0,0,.18); min-width: 270px; padding: 4px; }
.menu button { display: flex; width: 100%; text-align: left; gap: 8px; align-items: flex-start; border: 0; background: none; padding: 6px 10px; cursor: pointer; border-radius: 3px; }
.menu button:hover { background: #FDEEEF; }
.menu button small { display: block; color: #6B6B6B; font-size: 11.5px; }
.menu .mi { width: 18px; text-align: center; color: var(--rot); }
.menu kbd { margin-left: auto; color: #8C8C8C; font-size: 11px; }
.menu hr { border: 0; border-top: 1px solid #EEE; margin: 4px 0; }

#toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%) translateY(30px); background: var(--dunkel); color: #fff; padding: 9px 16px; border-radius: 5px; opacity: 0; transition: all .25s; z-index: 80; max-width: 90vw; pointer-events: none; }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.err { background: var(--bad); }

.hilfe { display: grid; grid-template-columns: 220px 1fr; gap: 12px; min-height: 50vh; }
.hilfe nav { border-right: 1px solid #EEE; display: flex; flex-direction: column; }
.hilfe nav button { text-align: left; border: 0; background: none; padding: 5px 8px; cursor: pointer; border-radius: 3px; }
.hilfe nav button.on { background: var(--rot); color: #fff; }
.hilfe article h3 { margin-top: 0; } .hilfe article li { margin-bottom: 4px; }

/* ---------- Handy / Tablet */
@media (max-width: 900px) {
  main { height: auto; min-height: calc(100vh - 92px); }
  .ih, .kd, .split, .ums, .charts { grid-template-columns: 1fr; height: auto; }
  .planung { height: auto; } .planung .liste { max-height: 50vh; } .planung .tafelwrap { height: 50vh; }
  .tourliste { max-height: 28vh; }
  .form, .grid3 { grid-template-columns: 1fr; }
  .dgrid { grid-template-columns: 90px 1fr; } .dgrid .w3 { grid-column: auto; }
  .brand span, .wer { display: none; }
  .modal-bg { padding: 0; } .modal { max-height: 100vh; border-radius: 0; }
}
@media print { header.top, nav.tabs, .toolbar { display: none; } main { height: auto; } }
/* Benutzer & LDAP: Spalte „Serviceplanung“ */
.techzelle label { white-space: nowrap; }
.techinfo { display: flex; align-items: center; gap: 6px; margin-top: 4px; flex-wrap: wrap; font-weight: 600; }
.techinfo .farbfeld, .hits .farbfeld, td .farbfeld { width: 14px; }
tr.off td.techzelle, tr.off td.techzelle .btn { color: #2B2B2B; }