/* Partner-CRM – A1 CI angelehnt */
:root {
  --rot: #EB140A; --rot-dunkel: #820000; --rot-hell: #FA8A80; --rosa: #FEECEA;
  --dunkel: #1A1A1A; --g1: #333; --g2: #444; --g3: #767676; --g4: #AAA; --g5: #E2E2E2; --g6: #F4F4F4;
  --gruen: #1E7B34; --gruen-bg: #E6F4EA; --gelb: #8A5A00; --gelb-bg: #FFF4D6; --blau: #1F5FA8; --blau-bg: #E7F0FA;
  --radius: 6px;
}
* { box-sizing: border-box; }
html { font-size: 14px; }
body { margin: 0; font-family: Verdana, Geneva, sans-serif; color: var(--dunkel); background: var(--g6); line-height: 1.45; }
a { color: var(--rot); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.6rem; margin: 0 0 .2rem; }
h2 { font-size: 1.1rem; margin: 0 0 .8rem; display: flex; align-items: center; gap: .5rem; }
h2 .rechts, .kopf .rechts { margin-left: auto; }
h3 { font-size: 1rem; margin: 1rem 0 .4rem; }
.mono, code, .zahl { font-family: Consolas, "Courier New", monospace; }
.zahl { text-align: right; white-space: nowrap; }
.muted { color: var(--g3); }
.klein { font-size: .85rem; }
.pre { white-space: pre-wrap; }

/* Navigation */
header.top { background: var(--dunkel); color: #fff; display: flex; align-items: center; gap: 1.5rem; padding: 0 1.5rem; height: 54px; position: sticky; top: 0; z-index: 10; }
@media (max-width: 1400px) { header.top { gap: 1rem; } form.suche input { width: 140px; } }
.logo { display: flex; align-items: center; gap: .6rem; color: #fff; font-weight: bold; white-space: nowrap; }
.logo .a1 { background: var(--rot); color: #fff; border-radius: 4px; padding: 2px 7px; font-size: 1rem; }
.logo:hover { text-decoration: none; }
nav.haupt { display: flex; gap: .2rem; flex: 1; overflow-x: auto; }
nav.haupt a { color: #ddd; padding: .45rem .55rem; border-radius: 4px; white-space: nowrap; }
nav.haupt a:hover { background: #333; text-decoration: none; color: #fff; }
nav.haupt a.aktiv { background: var(--rot); color: #fff; }
form.suche input { width: 170px; padding: .4rem .7rem; border-radius: 4px; border: 1px solid #444; background: #2a2a2a; color: #fff; }
main { max-width: 1400px; margin: 0 auto; padding: 1.5rem; }

/* Bausteine */
.karte { background: #fff; border: 1px solid var(--g5); border-radius: var(--radius); padding: 1.1rem 1.2rem; margin-bottom: 1.2rem; }
.kopf { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.raster { display: grid; gap: 1.2rem; }
.r2 { grid-template-columns: 1fr 1fr; }
.r-detail { grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); }
@media (max-width: 1000px) { .r2, .r-detail { grid-template-columns: 1fr; } }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.2rem; }
.kpi { background: #fff; border: 1px solid var(--g5); border-left: 4px solid var(--rot); border-radius: var(--radius); padding: .8rem 1rem; }
.kpi .wert { font-size: 1.6rem; font-family: Consolas, monospace; font-weight: bold; }
.kpi .label { color: var(--g3); font-size: .85rem; }
.kpi.warn { border-left-color: var(--rot-dunkel); }

.btn { display: inline-flex; align-items: center; gap: .3rem; padding: .45rem .9rem; border-radius: 4px; border: 1px solid var(--g4); background: #fff; color: var(--dunkel); cursor: pointer; font: inherit; font-size: .9rem; white-space: nowrap; }
.btn:hover { background: var(--g6); text-decoration: none; }
.btn.primaer { background: var(--rot); border-color: var(--rot); color: #fff; }
.btn.primaer:hover { background: #c81108; }
.btn.klein { padding: .2rem .55rem; font-size: .8rem; }
.btn.gefahr { color: var(--rot-dunkel); border-color: var(--rot-hell); }
.btn.gefahr:hover { background: var(--rosa); }
.btn.link { border: none; background: none; color: var(--rot); padding: 0; }
.aktionen { display: flex; gap: .5rem; flex-wrap: wrap; }
form.inline { display: inline; margin: 0; }

.badge { display: inline-block; padding: .1rem .5rem; border-radius: 99px; font-size: .78rem; background: var(--g5); color: var(--g1); white-space: nowrap; }
.st-aktiv { background: var(--gruen-bg); color: var(--gruen); }
.st-reaktiv { background: var(--blau-bg); color: var(--blau); }
.st-neu { background: var(--gelb-bg); color: var(--gelb); }
.st-inaktiv { background: var(--g5); color: var(--g3); }
.badge.typ { background: var(--rosa); color: var(--rot-dunkel); }
.badge.kat { background: var(--blau-bg); color: var(--blau); }
.badge.hoch { background: var(--rot); color: #fff; }
.pot { letter-spacing: 1px; color: var(--rot); white-space: nowrap; font-size: .9rem; }
.pot .leer { color: var(--g5); }

/* Tabellen */
table.liste { width: 100%; border-collapse: collapse; }
table.liste th { text-align: left; font-size: .8rem; color: var(--g3); font-weight: normal; border-bottom: 2px solid var(--g5); padding: .4rem .5rem; white-space: nowrap; }
table.liste th a { color: var(--g3); }
table.liste th a.sortiert { color: var(--rot); font-weight: bold; }
table.liste td { border-bottom: 1px solid var(--g5); padding: .45rem .5rem; vertical-align: top; }
table.liste tr:hover td { background: #fafafa; }
table.liste tr.inaktiv td { color: var(--g4); }
.ueberfaellig { color: var(--rot); font-weight: bold; }
.bald { color: var(--gelb); font-weight: bold; }
.erledigt-text { text-decoration: line-through; color: var(--g4); }

/* Filterleiste */
form.filter { display: flex; gap: .6rem; flex-wrap: wrap; align-items: end; margin-bottom: 1rem; }
form.filter label { font-size: .8rem; color: var(--g3); display: flex; flex-direction: column; gap: .2rem; }

/* Formulare */
.feld { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .9rem; }
.feld label { font-size: .82rem; color: var(--g2); font-weight: bold; }
.feld .hilfe { font-size: .78rem; color: var(--g3); }
input[type=text], input[type=password], input[type=email], input[type=date], input[type=time], input[type=number], input[type=url], input[type=search], select, textarea {
  font: inherit; padding: .45rem .6rem; border: 1px solid var(--g4); border-radius: 4px; background: #fff; width: 100%; }
textarea { min-height: 90px; resize: vertical; }
textarea.gross { min-height: 220px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--rot-hell); border-color: var(--rot); }
form.filter input, form.filter select { width: auto; }
.felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 1rem; }
.check { display: flex; align-items: center; gap: .4rem; font-weight: normal !important; margin-bottom: .3rem; }
.check input { width: auto; }
.formfuss { display: flex; gap: .6rem; align-items: center; border-top: 1px solid var(--g5); padding-top: 1rem; margin-top: .5rem; }

/* Flash */
.flash { padding: .7rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; }
.flash.ok { background: var(--gruen-bg); color: var(--gruen); }
.flash.fehler { background: var(--rosa); color: var(--rot-dunkel); }

/* Timeline */
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { border-left: 3px solid var(--g5); padding: 0 0 1rem 1rem; position: relative; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 4px; width: 11px; height: 11px; border-radius: 50%; background: #fff; border: 2px solid var(--rot); }
.timeline .meta { font-size: .8rem; color: var(--g3); display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.timeline .titel { font-weight: bold; margin: .15rem 0; display: block; color: var(--dunkel); }
.timeline .auszug { font-size: .88rem; color: var(--g2); white-space: pre-wrap; max-height: 4.4em; overflow: hidden; }

/* Definitionslisten */
dl.daten { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; }
dl.daten dt { color: var(--g3); font-size: .85rem; }
dl.daten dd { margin: 0; }

/* Kontakte */
.kontakt { padding: .55rem 0; border-bottom: 1px solid var(--g5); }
.kontakt:last-child { border-bottom: none; }
.kontakt .name { font-weight: bold; }

/* Onboarding */
.fortschritt { height: 8px; background: var(--g5); border-radius: 99px; overflow: hidden; min-width: 80px; }
.fortschritt span { display: block; height: 100%; background: var(--rot); }
.fortschritt.fertig span { background: var(--gruen); }
ul.checkliste { list-style: none; padding: 0; margin: 0; }
ul.checkliste li { display: flex; gap: .5rem; align-items: flex-start; padding: .35rem 0; border-bottom: 1px solid var(--g6); }
ul.checkliste li details { flex: 1; }
ul.checkliste summary { cursor: pointer; list-style: none; }
ul.checkliste summary::-webkit-details-marker { display: none; }
.haken { width: 20px; height: 20px; border: 2px solid var(--g4); border-radius: 4px; background: #fff; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; flex-shrink: 0; }
.haken.an { background: var(--gruen); border-color: var(--gruen); }

/* Pipeline */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: .8rem; overflow-x: auto; padding-bottom: .5rem; }
.spalte { background: #fff; border: 1px solid var(--g5); border-radius: var(--radius); padding: .7rem; min-height: 200px; }
.spalte h3 { margin: 0 0 .2rem; font-size: .9rem; }
.spalte .summe { font-family: Consolas, monospace; font-size: .85rem; color: var(--g3); margin-bottom: .6rem; }
.spalte.gewonnen h3 { color: var(--gruen); }
.spalte.verloren h3 { color: var(--g3); }
.opp { border: 1px solid var(--g5); border-left: 3px solid var(--rot); border-radius: 4px; padding: .55rem; margin-bottom: .55rem; background: #fff; font-size: .85rem; }
.opp .t { font-weight: bold; display: block; color: var(--dunkel); }
.opp select { font-size: .78rem; padding: .15rem; margin-top: .3rem; }

/* Nächste Schritte im Formular */
.ns-zeile { display: grid; grid-template-columns: 1fr 170px 150px 130px; gap: .5rem; margin-bottom: .4rem; }
@media (max-width: 700px) { .ns-zeile { grid-template-columns: 1fr; } }

.leer { color: var(--g3); font-style: italic; padding: .5rem 0; }

/* Reporting */
.r3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) { .r3 { grid-template-columns: 1fr; } }
table.balken { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.balken td { padding: .25rem .3rem; vertical-align: middle; }
.bar { height: 10px; background: var(--g6); border-radius: 99px; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--rot); border-radius: 99px; }
tr.ueberfaellig .bar span { background: var(--rot-dunkel); }
.punkt { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: middle; margin-right: .3rem; border: 1px solid #fff; box-shadow: 0 0 0 1px var(--g4); }

/* Boarding */
.boarding-gruppe { margin-bottom: .8rem; }
.boarding-kopf { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--g5); padding: .2rem 0; font-size: .88rem; }
.symbol { font-size: .8rem; color: var(--g3); margin-left: .2rem; }
.hinweis { background: var(--gelb-bg); border-left: 3px solid #C98A00; padding: .45rem .6rem; font-size: .84rem; margin: .4rem 0; border-radius: 4px; white-space: pre-wrap; }
.klein-haken { width: 17px; height: 17px; font-size: 11px; margin-right: 2px; }

/* Franchise-Shops & Buddy-System */
.badge.shop { background: #FDE7E6; color: var(--rot); border: 1px solid var(--rot-hell); }
.badge.buddy { background: var(--rot); color: #fff; }
.badge.richtung { background: var(--blau-bg); color: var(--blau); }
.badge.richtung.core { background: var(--rosa); color: var(--rot-dunkel); }
.buddy-link { font-size: 1.1rem; text-decoration: none; }
.buddy-seite { border-top: 4px solid var(--rot); }
.lead-neu { background: var(--g6); border-radius: var(--radius); padding: .8rem .9rem .8rem; margin-bottom: .4rem; }
.shop-icon { background: var(--rot); color: #fff; border: 2px solid #fff; border-radius: 3px; box-shadow: 0 0 0 1px var(--rot-dunkel);
  font: bold 8px/14px Verdana, sans-serif; text-align: center; }
.punkt.shop-punkt { background: var(--rot); border-radius: 2px; }
.shop-icon.co, .punkt.shop-punkt.co { background: #1A1A1A; box-shadow: 0 0 0 1px var(--rot); }
.badge.shop.co { background: #1A1A1A; color: #fff; border-color: #1A1A1A; }
.shop-icon.neben { opacity: .75; font-size: 6px; line-height: 10px; }

/* Anmeldung & Benutzer */
details.nutzer { position: relative; color: #fff; }
details.nutzer summary { cursor: pointer; list-style: none; padding: .35rem .7rem; border: 1px solid #444; border-radius: 4px; white-space: nowrap; }
details.nutzer summary::-webkit-details-marker { display: none; }
.nutzer-menue { position: absolute; right: 0; top: 2.4rem; background: #fff; color: var(--g1, #1a1a1a); border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,.2); padding: .8rem 1rem; min-width: 220px; display: flex; flex-direction: column; gap: .5rem; z-index: 20; }
.nutzer-menue form.logout { margin: 0; }
.login-box { max-width: 380px; margin: 8vh auto; }
.login-box h1 { display: flex; align-items: center; gap: .6rem; }
.login-box .a1 { background: var(--rot); color: #fff; font-weight: bold; padding: .1rem .45rem; border-radius: 4px; }
.badge.rolle-admin { background: var(--rot); color: #fff; }
.badge.rolle-leser { background: var(--blau-bg); color: var(--blau); }
/* Leser: Bearbeiten ausblenden (serverseitig ohnehin gesperrt) */
body.leser main form[method="post" i], body.leser main form[method="POST"], body.leser .schreiben,
body.leser main a.btn[href*="/neu"], body.leser main a.btn[href*="/bearbeiten"], body.leser main a.btn[href*="/mail"],
body.leser main a.btn[href*="einstellungen"] { display: none !important; }
/* Leser: Erledigt-Haken anzeigen, aber nicht klickbar */
body.leser main form.inline:has(.haken) { display: inline-block !important; pointer-events: none; }
/* Umsatz & Team */
.plus { color: var(--gruen); }
.minus { color: var(--rot-dunkel); }
.hinweis.klein { margin: .4rem 0; }
.verlauf { display: flex; align-items: flex-end; gap: 2px; height: 40px; margin: .3rem 0 .1rem; }
.verlauf span { width: 10px; background: var(--rot-hell, #F7A19B); border-radius: 2px 2px 0 0; }
.verlauf span:last-child { background: var(--rot); }
.delta { font-size: .75rem; font-family: Verdana, sans-serif; font-weight: normal; margin-left: .2rem; }
.delta.plus { color: var(--gruen); } .delta.minus { color: var(--rot-dunkel); } .delta.gleich { color: var(--g4); }
.quote { font-weight: bold; } .quote.gut { color: var(--gruen); } .quote.mittel { color: #C98A00; } .quote.schlecht { color: var(--rot-dunkel); }
.tabelle-scroll { overflow-x: auto; }
table.liste.team td, table.liste.team th { white-space: nowrap; }
.last { display: inline-block; min-width: 1.6rem; padding: .05rem .3rem; border-radius: 3px; text-align: center;
  background: rgba(235, 20, 10, calc(var(--n) * 0.06)); }
.last.rot { background: var(--rot); color: #fff; font-weight: bold; }
ul.feed { list-style: none; margin: 0; padding: 0; max-height: 560px; overflow-y: auto; }
ul.feed li { padding: .4rem 0; border-bottom: 1px solid var(--g5); font-size: .88rem; }
ul.feed .zeit { color: var(--g3); font-size: .78rem; margin-right: .3rem; }
ul.feed .art { font-size: .75rem; padding: .05rem .35rem; border-radius: 3px; background: var(--g6); color: var(--g2); margin-right: .2rem; }
ul.feed .art-protokoll { background: var(--rosa); color: var(--rot-dunkel); }
ul.feed .art-aufgabe { background: var(--blau-bg); color: var(--blau); }
ul.feed .art-boarding { background: var(--gruen-bg); color: var(--gruen); }
@media print { header.top, .aktionen, form { display: none !important; } .karte { break-inside: avoid; } }
/* Zwei-Faktor */
.zf-einrichten { display: grid; grid-template-columns: 240px 1fr; gap: 1.5rem; align-items: start; }
.zf-einrichten .qr svg { width: 220px; height: 220px; background: #fff; }
.schluessel { background: var(--g6); padding: .4rem .6rem; border-radius: 4px; margin: .4rem 0; font-size: 1rem; letter-spacing: .05em; word-break: break-all; }
ol.schritte li { margin-bottom: .6rem; }
pre.codes { font-size: 1.15rem; background: var(--g6); padding: 1rem 1.2rem; border-radius: var(--radius); columns: 2; line-height: 1.8; }
@media (max-width: 700px) { .zf-einrichten { grid-template-columns: 1fr; } }