/* Gestaltung aus dem klickbaren Muster (3plus-radar/konzept/muster), Stand 12.10.2026 */
/* Layout: App-Rahmen – Kopfleiste (Suche, Timer, <svg class="i" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>), schmale Navigation links, Arbeitsfläche, einblendbares Agentenfeld rechts. Hausfarben 3 Plus. */
:root {
  --bg: #F4F7F9; --flaeche: #FFFFFF; --flaeche2: #F8FAFB; --fg: #262626; --leise: #5F5E5E; --linie: #DFE5E9;
  --blau: #009FE3; --blau-text: #0076A8; --blau-knopf: #0083BD; --blau-hell: #E6F5FC;
  --gruen: #1E8A4C; --gruen-hell: #E5F4EB; --gelb: #946600; --gelb-hell: #FFF4D6; --rot: #B42318; --rot-hell: #FDECEA; --lila: #6B4FBB; --lila-hell: #EFEBFA;
  --schatten: 0 1px 2px rgba(20,40,60,.06), 0 4px 16px rgba(20,40,60,.06);
  --schrift: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #121618; --flaeche: #1A2023; --flaeche2: #161B1E; --fg: #E8ECEE; --leise: #A0A9AE; --linie: #2B3438;
  --blau: #33B5EC; --blau-text: #6CCBF2; --blau-knopf: #1E9ED6; --blau-hell: #10303D;
  --gruen: #5CC98A; --gruen-hell: #14301F; --gelb: #E8B54A; --gelb-hell: #372C10; --rot: #F2867C; --rot-hell: #3A1A17; --lila: #A894EE; --lila-hell: #261F3D;
  --schatten: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25); color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #121618; --flaeche: #1A2023; --flaeche2: #161B1E; --fg: #E8ECEE; --leise: #A0A9AE; --linie: #2B3438;
  --blau: #33B5EC; --blau-text: #6CCBF2; --blau-knopf: #1E9ED6; --blau-hell: #10303D;
  --gruen: #5CC98A; --gruen-hell: #14301F; --gelb: #E8B54A; --gelb-hell: #372C10; --rot: #F2867C; --rot-hell: #3A1A17; --lila: #A894EE; --lila-hell: #261F3D;
  --schatten: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25); color-scheme: dark }
* { box-sizing: border-box }
html, body { height: 100% }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--schrift); font-size: 14px; line-height: 1.5 }
button, input, select, textarea { font: inherit; color: inherit }
a { color: var(--blau-text) }
:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px }
.app { display: grid; grid-template-rows: auto 1fr; height: 100% }
/* Kopfleiste */
.kopf { display: flex; align-items: center; gap: 10px; padding: 8px 16px; padding-top: calc(8px + env(safe-area-inset-top, 0px)); background: var(--flaeche); border-bottom: 1px solid var(--linie); position: relative; z-index: 20 }
.logo { font-weight: 700; font-size: 16px; color: var(--blau-text); white-space: nowrap; display: flex; align-items: center; gap: 6px; text-decoration: none }
.logo i { font-style: normal; background: var(--blau); color: #fff; border-radius: 6px; padding: 1px 6px; font-size: 13px }
.suche { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; border: 1px solid var(--linie); background: var(--flaeche2); border-radius: 8px; padding: 7px 12px; color: var(--leise); cursor: text; text-align: left; overflow: hidden }
.suche span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
kbd { font-family: inherit; font-size: 11px; border: 1px solid var(--linie); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; color: var(--leise); background: var(--flaeche) }
.timer { display: flex; align-items: center; gap: 8px; border: 1px solid var(--linie); border-radius: 8px; padding: 6px 10px; white-space: nowrap; background: var(--flaeche); cursor: pointer }
.timer .punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--leise) }
.timer.laeuft .punkt { background: var(--gruen); box-shadow: 0 0 0 3px var(--gruen-hell) }
.timer b { font-variant-numeric: tabular-nums }
.knopf { border: 1px solid var(--linie); background: var(--flaeche); border-radius: 8px; padding: 7px 12px; cursor: pointer; font-weight: 600; white-space: nowrap }
.knopf:hover { border-color: var(--blau) }
.knopf.haupt { background: var(--blau-knopf); border-color: var(--blau-knopf); color: #fff }
.knopf.klein { padding: 4px 9px; font-size: 12.5px }
.knopf.agent { color: var(--lila); border-color: var(--lila-hell); background: var(--lila-hell) }
.rund { width: 36px; height: 36px; padding: 0; display: grid; place-items: center; font-size: 20px; line-height: 1 }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--blau-hell); color: var(--blau-text); display: grid; place-items: center; font-weight: 700; font-size: 12px; flex: none }
/* Körper */
.koerper { display: grid; grid-template-columns: 215px 1fr auto; min-height: 0 }
nav.seite { background: var(--flaeche); border-right: 1px solid var(--linie); padding: 12px 8px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px }
nav.seite a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px; color: var(--leise); text-decoration: none; font-weight: 500 }
nav.seite a:hover { background: var(--flaeche2); color: var(--fg) }
nav.seite a.an { background: var(--blau-hell); color: var(--blau-text); font-weight: 700 }
nav.seite a .zahl { margin-left: auto; font-size: 11px; background: var(--rot); color: #fff; border-radius: 999px; padding: 0 6px; font-weight: 700 }
nav.seite .gruppe { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--leise); padding: 12px 10px 4px; opacity: .8 }
nav.seite .ico { width: 18px; text-align: center; opacity: .8 }
main { overflow-y: auto; padding: 20px 24px 48px; min-width: 0 }
.titelzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 16px }
h1 { font-size: 22px; margin: 0; text-wrap: balance }
h2 { font-size: 16px; margin: 0 0 10px }
h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--leise); margin: 0 0 8px; font-weight: 600 }
.leise { color: var(--leise) }
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; padding: 14px 16px; box-shadow: var(--schatten); min-width: 0 }
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; background: var(--flaeche2); border: 1px solid var(--linie); color: var(--leise) }
.c-ok { background: var(--gruen-hell); color: var(--gruen); border-color: transparent } .c-warn { background: var(--gelb-hell); color: var(--gelb); border-color: transparent } .c-stopp { background: var(--rot-hell); color: var(--rot); border-color: transparent } .c-info { background: var(--blau-hell); color: var(--blau-text); border-color: transparent } .c-ki { background: var(--lila-hell); color: var(--lila); border-color: transparent }
.marke-it { background: #E8EEF6; color: #2D5B8A; border-color: transparent } .marke-mk { background: #FCEBF3; color: #A3326A; border-color: transparent }
:root[data-theme="dark"] .marke-it { background: #1C2A3A; color: #8DB6E0 } :root[data-theme="dark"] .marke-mk { background: #3A1D2C; color: #E79BC1 }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .marke-it { background: #1C2A3A; color: #8DB6E0 } :root:not([data-theme="light"]) .marke-mk { background: #3A1D2C; color: #E79BC1 } }
/* Cockpit */
.rollen { display: flex; flex-wrap: wrap; gap: 6px }
.rollen button { border: 1px solid var(--linie); background: var(--flaeche); border-radius: 999px; padding: 4px 12px; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--leise) }
.rollen button.an { background: var(--blau-knopf); color: #fff; border-color: var(--blau-knopf) }
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; align-items: start }
.w { position: relative }
.w.breit { grid-column: span 2 }
.w h3 { display: flex; justify-content: space-between; align-items: center; gap: 8px }
.w .gross { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1 }
.w .gross small { font-size: 13px; color: var(--leise); font-weight: 500 }
.liste { list-style: none; margin: 0; padding: 0; display: grid }
.liste li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--linie); min-width: 0 }
.liste li:last-child { border-bottom: 0 }
.liste li > span.t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.liste li.klickbar { cursor: pointer } .liste li.klickbar:hover span.t { color: var(--blau-text) }
.p { width: 9px; height: 9px; border-radius: 50%; flex: none } .p.rot { background: var(--rot) } .p.gelb { background: var(--gelb) } .p.gruen { background: var(--gruen) } .p.blau { background: var(--blau) } .p.lila { background: var(--lila) }
.balken { height: 7px; background: var(--linie); border-radius: 4px; overflow: hidden; margin-top: 4px }
.balken span { display: block; height: 100%; border-radius: 4px; background: var(--blau) }
.balken.gelb span { background: var(--gelb) } .balken.rot span { background: var(--rot) } .balken.gruen span { background: var(--gruen) }
.zahl { font-variant-numeric: tabular-nums; white-space: nowrap }
.anpassen-leiste { display: flex; gap: 4px }
.anpassen-leiste button { border: 1px solid var(--linie); background: var(--flaeche); border-radius: 6px; width: 26px; height: 26px; cursor: pointer; font-size: 13px; line-height: 1 }
.katalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-top: 10px }
.katalog label { display: flex; gap: 8px; align-items: center; border: 1px solid var(--linie); border-radius: 8px; padding: 8px 10px; background: var(--flaeche); cursor: pointer }
/* Tabellen */
.tab-rahmen { overflow-x: auto; border: 1px solid var(--linie); border-radius: 10px; background: var(--flaeche) }
table { border-collapse: collapse; width: 100%; font-size: 13.5px }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--linie); vertical-align: middle }
th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--leise); font-weight: 600; background: var(--flaeche2); white-space: nowrap }
tr:last-child td { border-bottom: 0 }
tr.klickbar { cursor: pointer } tr.klickbar:hover td { background: var(--flaeche2) }
td.r, th.r { text-align: right }
/* Kundenakte */
.aktenkopf { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: start; margin-bottom: 14px }
.firmenlogo { width: 52px; height: 52px; border-radius: 12px; background: var(--blau-hell); color: var(--blau-text); display: grid; place-items: center; font-weight: 700; font-size: 18px }
.aktenkopf h1 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px }
.kopfdaten { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--leise); font-size: 13px; margin-top: 4px }
.ampeln { display: grid; grid-template-columns: repeat(4, minmax(110px, 1fr)); gap: 10px; margin-bottom: 14px }
.ampel { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; padding: 10px 12px; border-left: 4px solid var(--gruen) }
.ampel.gelb { border-left-color: var(--gelb) } .ampel.rot { border-left-color: var(--rot) } .ampel.blau { border-left-color: var(--blau) }
.ampel small { display: block; color: var(--leise); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em }
.ampel b { font-size: 18px; font-variant-numeric: tabular-nums }
.reiter { display: flex; gap: 2px; border-bottom: 1px solid var(--linie); margin-bottom: 16px; overflow-x: auto }
.reiter button { border: 0; background: none; padding: 9px 12px; cursor: pointer; color: var(--leise); font-weight: 600; border-bottom: 2px solid transparent; white-space: nowrap }
.reiter button.an { color: var(--blau-text); border-bottom-color: var(--blau) }
.reiter button .n { font-size: 11px; background: var(--flaeche2); border: 1px solid var(--linie); border-radius: 999px; padding: 0 6px; margin-left: 4px }
.zwei { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; align-items: start }
.stapel { display: grid; gap: 14px; min-width: 0 }
.kontakte { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px }
.kontakt { display: grid; gap: 6px }
.kontakt .kname { display: flex; gap: 10px; align-items: center }
.kontakt .rollen-k { display: flex; flex-wrap: wrap; gap: 4px }
.kontakt .daten { font-size: 13px; color: var(--leise); display: grid; gap: 2px }
.vorschlag { border: 1px dashed var(--lila); background: var(--lila-hell); border-radius: 10px; padding: 12px 14px }
.vorschlag.warn { border-color: var(--gelb); background: var(--gelb-hell) }
.zeile-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px }
.verlauf { display: grid; gap: 0 }
.ereignis { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding-bottom: 12px; position: relative }
.ereignis::before { content: ""; position: absolute; left: 10px; top: 20px; bottom: 0; width: 2px; background: var(--linie) }
.ereignis:last-child::before { display: none }
.ereignis .icon { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: var(--flaeche2); border: 1px solid var(--linie) }
.ereignis small { color: var(--leise) }
.vergleich td:nth-child(2) { color: var(--leise) }
.vergleich tr.abw td { background: var(--gelb-hell) }
/* Support */
.posteingang { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 14px; min-height: 0 }
.ticketliste { display: grid; gap: 6px; align-content: start }
.tk { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; padding: 10px 12px; cursor: pointer; display: grid; gap: 3px }
.tk.an { border-color: var(--blau); box-shadow: 0 0 0 2px var(--blau-hell) }
.tk .z1 { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--leise) }
.tk .betreff { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.nachricht { border: 1px solid var(--linie); border-radius: 10px; padding: 12px 14px; background: var(--flaeche) }
.nachricht.raus { background: var(--blau-hell); border-color: transparent }
.nachricht .von { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--leise); margin-bottom: 6px }
.entwurf { border: 1px solid var(--lila); border-radius: 10px; background: var(--flaeche) }
.entwurf .ek { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; background: var(--lila-hell); color: var(--lila); font-weight: 600; font-size: 13px; border-radius: 10px 10px 0 0 }
.entwurf textarea { width: 100%; border: 0; padding: 12px 14px; min-height: 150px; resize: vertical; background: transparent; line-height: 1.55 }
.entwurf .ef { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--linie); align-items: center }
/* Agentenfeld */
aside.agent { width: 0; overflow: hidden; background: var(--flaeche); border-left: 1px solid var(--linie); transition: width .2s ease; display: flex; flex-direction: column }
aside.agent.offen { width: 340px }
.agent-kopf { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--linie); font-weight: 700; color: var(--lila); white-space: nowrap }
.agent-verlauf { flex: 1; overflow-y: auto; padding: 12px 14px; display: grid; gap: 10px; align-content: start; min-width: 340px }
.blase { border-radius: 10px; padding: 9px 12px; font-size: 13.5px; max-width: 92% }
.blase.ich { background: var(--blau-hell); justify-self: end }
.blase.ki { background: var(--lila-hell); justify-self: start }
.agent-vorschlaege { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 8px; min-width: 340px }
.agent-vorschlaege button { border: 1px solid var(--linie); background: var(--flaeche2); border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: pointer }
.agent-eingabe { display: flex; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--linie); min-width: 340px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) }
.agent-eingabe input { flex: 1; min-width: 0; border: 1px solid var(--linie); border-radius: 8px; padding: 7px 10px; background: var(--flaeche2) }
/* Dialoge */
.schleier { position: fixed; inset: 0; background: rgba(15,25,35,.38); display: grid; place-items: start center; padding: 10vh 16px 16px; z-index: 50 }
.schleier[hidden] { display: none !important }
.dialog { width: min(640px, 100%); background: var(--flaeche); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.25); overflow: hidden; border: 1px solid var(--linie) }
.dialog .dk { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--linie); font-weight: 700 }
.dialog .dinhalt { padding: 14px 16px; display: grid; gap: 10px }
.palette input { width: 100%; border: 0; border-bottom: 1px solid var(--linie); padding: 14px 16px; font-size: 16px; background: transparent; outline: none }
.palette .treffer { max-height: 52vh; overflow-y: auto; padding: 6px }
.palette .gruppe { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--leise); padding: 8px 10px 4px }
.palette .eintrag { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer }
.palette .eintrag.an, .palette .eintrag:hover { background: var(--blau-hell) }
.palette .eintrag small { color: var(--leise); margin-left: auto; white-space: nowrap }
.feld { display: grid; gap: 4px } .feld label { font-size: 12px; font-weight: 600; color: var(--leise) }
.feld input, .feld select, .feld textarea { border: 1px solid var(--linie); border-radius: 8px; padding: 8px 10px; background: var(--flaeche2); width: 100% }
.schnell-arten { display: flex; flex-wrap: wrap; gap: 6px }
.schnell-arten button { border: 1px solid var(--linie); background: var(--flaeche); border-radius: 8px; padding: 6px 10px; cursor: pointer; font-weight: 600; font-size: 13px }
.schnell-arten button.an { border-color: var(--blau); background: var(--blau-hell); color: var(--blau-text) }
.toast-bereich { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 8px; z-index: 60 }
.toast { background: var(--fg); color: var(--bg); padding: 10px 14px; border-radius: 10px; box-shadow: var(--schatten); font-weight: 500; max-width: 360px }
.musterband { background: var(--gelb-hell); color: var(--gelb); font-size: 12.5px; padding: 6px 16px; text-align: center; font-weight: 600 }
.musterband button { border: 0; background: none; color: inherit; text-decoration: underline; cursor: pointer; font-weight: 700 }
.leer { padding: 30px; text-align: center; color: var(--leise) }
.sop { max-width: 760px }
.sop ol { padding-left: 20px } .sop li { margin-bottom: 6px }
.mobil-nav { display: none }
.anruf { position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: min(380px, calc(100vw - 32px)); background: var(--flaeche); border: 1px solid var(--linie); border-radius: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.25); z-index: 70; overflow: hidden }
.anruf-kopf { background: #0F2A3A; color: #fff; padding: 10px 14px; display: grid; gap: 2px } .anruf-kopf span { font-size: 12.5px; opacity: .85 } .anruf-kopf b { font-size: 17px }
.anruf-inhalt { padding: 12px 14px; max-height: 60vh; overflow-y: auto }
.sektionen { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px }
.sektion { border: 1px solid var(--linie); border-radius: 10px; padding: 10px 12px; background: var(--flaeche); display: grid; gap: 4px } .sektion.frei { border-color: var(--gruen) }
.sek-kopf { display: flex; justify-content: space-between; gap: 6px; align-items: center; flex-wrap: wrap } .sek-h { font-weight: 700; font-size: 15px; text-wrap: balance }
.wireframe { display: grid; gap: 6px } .wf { border: 1px dashed var(--linie); border-radius: 6px; height: 34px; display: grid; place-items: center; font-size: 12px; color: var(--leise); background: var(--flaeche2) } .wf.hero { height: 80px; background: linear-gradient(160deg,#7A4B2A,#2E2E2E); color: #fff; border: 0 }
.briefing { background: linear-gradient(120deg, var(--lila-hell), var(--blau-hell)); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px }
.briefing-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--lila) }
.fortschritt-heute { display: flex; gap: 10px; align-items: center; margin-bottom: 6px }
.liste.heute li .heute-akt { display: flex; gap: 2px; opacity: .35 } .liste.heute li:hover .heute-akt, .liste.heute li:focus-within .heute-akt { opacity: 1 }
.heute-akt button { border: 1px solid var(--linie); background: var(--flaeche); border-radius: 6px; width: 26px; height: 26px; display: grid; place-items: center; cursor: pointer; color: var(--leise) } .heute-akt button:hover { color: var(--gruen); border-color: var(--gruen) }
.kz-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px } .kz { display: grid; gap: 2px } .kz small { color: var(--leise); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em } .kz b { font-size: 20px } .kz span { font-size: 12px }
.ziehbar .w { cursor: grab; outline: 2px dashed transparent } .ziehbar .w.ziel { outline-color: var(--blau) } .ziehbar .w.zieht { opacity: .5 }
@media (hover: none) { .liste.heute li .heute-akt { opacity: 1 } }
.posteingang.drei { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) 260px }
.sla { margin-top: 8px; font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; display: inline-flex; gap: 6px; align-items: center }
.sla.rot { background: var(--rot-hell); color: var(--rot) } .sla.gelb { background: var(--gelb-hell); color: var(--gelb) } .sla.gruen { background: var(--gruen-hell); color: var(--gruen) }
.nachricht.intern { background: var(--gelb-hell); border-color: transparent }
.aenderung { border-color: var(--lila) }
.vorher-nachher { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px } .vorher-nachher small { color: var(--leise); font-weight: 600 }
.vn-bild { height: 110px; border-radius: 8px; border: 1px solid var(--linie); background: linear-gradient(#7A4B2A 0 30%, #F2E6D0 30%); position: relative; overflow: hidden }
.vn-bild span { position: absolute; left: 10%; right: 10%; height: 34%; background: #2E2E2E; border-radius: 4px } .vn-bild.alt span { top: 46% } .vn-bild.neu span { top: 36% }
@media (max-width: 1250px) { .posteingang.drei { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) } .kundenrand { display: none } }
.last { display: grid; gap: 6px } .lastzeile { display: grid; grid-template-columns: 90px 1fr 110px; gap: 10px; align-items: center; font-size: 13px } .lastzeile small { text-align: right }
.portal-reiter { display: flex; gap: 2px; overflow-x: auto; background: var(--flaeche); border-bottom: 1px solid var(--linie); padding: 0 12px }
.portal-reiter button { border: 0; background: none; padding: 10px 12px; cursor: pointer; color: var(--leise); font-weight: 600; border-bottom: 2px solid transparent; white-space: nowrap }
.portal-reiter button.an { color: var(--blau-text); border-bottom-color: var(--blau) }
.punkt-rot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--rot); vertical-align: 2px }
.phasen-leiste { display: flex; flex-wrap: wrap; gap: 4px } .phasen-leiste span { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--flaeche2); border: 1px solid var(--linie); color: var(--leise) }
.phasen-leiste span.ok { background: var(--gruen-hell); color: var(--gruen); border-color: transparent } .phasen-leiste span.an { background: var(--blau-knopf); color: #fff; border-color: transparent }
.motivchip { margin-top: 6px }
.geheimtext { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; background: var(--flaeche2); border: 1px solid var(--linie); border-radius: 8px; padding: 10px; white-space: pre-wrap; word-break: break-all; margin: 0; max-height: 180px; overflow: auto }
.linkbox { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: var(--flaeche2); border: 1px solid var(--linie); border-radius: 8px; padding: 8px 10px } .linkbox code { flex: 1; min-width: 0; word-break: break-all; font-size: 12px }
.sprungleiste { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px }
.ordnerbaum { list-style: none; margin: 0; padding: 0; font-size: 13.5px } .ordnerbaum li { padding-top: 4px; padding-bottom: 4px; display: flex; gap: 6px; align-items: center } .ordnerbaum li.klickbar { cursor: pointer; color: var(--blau-text) } .ordnerbaum .i { color: var(--blau) }
.dateityp { font-size: 10.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; background: var(--blau-hell); color: var(--blau-text); min-width: 44px; text-align: center }
.farbfeld { flex: 1; height: 54px; border-radius: 8px; display: flex; align-items: flex-end; padding: 4px 6px; border: 1px solid var(--linie) } .farbfeld span { font-size: 10.5px; background: rgba(255,255,255,.85); color: #222; border-radius: 3px; padding: 0 4px }
.ablage { display: flex; align-items: center; justify-content: center; gap: 8px; border: 2px dashed var(--linie); border-radius: 10px; padding: 16px; margin-top: 8px; cursor: pointer; color: var(--leise); font-weight: 600 } .ablage:hover { border-color: var(--blau); color: var(--blau-text) }
.upkarte.ok { border-left: 4px solid var(--gruen) } .upkarte.warn { border-left: 4px solid var(--gelb) } .upkarte.offen { border-left: 4px solid var(--linie) }
.logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px } .logofeld { display: grid; gap: 6px }
.logobild { border: 1px solid var(--linie); border-radius: 8px; height: 90px; display: grid; place-items: center; padding: 10px } .logobild img { max-height: 60px; max-width: 100% }
.farben { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px } .farbe { display: grid; gap: 4px } .farbe > div { height: 56px; border-radius: 8px; border: 1px solid var(--linie) }
.vorschau-box { height: 220px; border: 1px solid var(--linie); border-radius: 8px; display: grid; place-items: center; color: var(--leise); background: var(--flaeche2) }
.pipeline { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 8px }
.spalte { background: var(--flaeche2); border: 1px solid var(--linie); border-radius: 10px; padding: 8px; display: grid; gap: 8px; align-content: start; min-height: 140px }
.spalte.ziel { border-color: var(--blau); background: var(--blau-hell) }
.spalte-kopf { display: flex; justify-content: space-between; gap: 6px; align-items: baseline; padding: 2px 4px; font-size: 13px }
.deal { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px; padding: 10px; cursor: grab; box-shadow: var(--schatten) }
.deal:hover { border-color: var(--blau) }
.deal-fuss { display: flex; justify-content: space-between; align-items: center; margin-top: 6px }
.avatar.klein { width: 24px; height: 24px; font-size: 10px }
.kursliste { display: grid; gap: 8px }
.kurs { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; padding: 8px; border-radius: 10px; border: 1px solid var(--linie); background: var(--flaeche); cursor: pointer }
.kurs:hover { border-color: var(--blau) }
.kurs-bild { width: 52px; height: 52px; border-radius: 10px; display: grid; place-items: center; color: #fff } .kurs-bild .i { width: 22px; height: 22px }
.video { max-width: 760px; background: #0F1A20; border-radius: 12px; overflow: hidden; color: #fff }
.video-inhalt { aspect-ratio: 16 / 9; display: grid; place-content: center; justify-items: center; gap: 8px; text-align: center; padding: 16px; background: radial-gradient(circle at 30% 30%, #1d4a5f, #0F1A20) }
.video-inhalt .i { width: 36px; height: 36px; opacity: .7 } .video-inhalt b { font-size: 18px } .video-inhalt span { font-size: 12.5px; opacity: .75 }
.video-leiste { display: flex; gap: 10px; align-items: center; padding: 8px 12px; font-size: 12.5px }
.lektionen li .nr { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--linie); display: grid; place-items: center; font-size: 11px; flex: none } .lektionen li .i { color: var(--gruen) }
.lektionen li.aktiv { background: var(--blau-hell); border-radius: 6px; padding-left: 6px }
.antwort { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--linie); border-radius: 8px; margin-bottom: 6px; cursor: pointer; background: var(--flaeche) }
.antwort.richtig { border-color: var(--gruen); background: var(--gruen-hell) } .antwort.falsch { border-color: var(--rot); background: var(--rot-hell) }
.varianten { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 12px }
.variante { display: grid; gap: 8px; min-width: 0; overflow: hidden; background: var(--flaeche); border: 2px solid var(--linie); border-radius: 12px; padding: 10px; cursor: pointer; position: relative }
.variante.an { border-color: var(--blau) }
.variante > input { position: absolute; top: 16px; right: 16px; width: 18px; height: 18px; z-index: 2 }
.motiv-bild { width: 100%; box-sizing: border-box; border-radius: 8px; color: #fff; padding: 14px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; aspect-ratio: 4 / 5; max-width: 100% }
.motiv-bild.fmt-1-1 { aspect-ratio: 1 / 1 } .motiv-bild.fmt-9-16 { aspect-ratio: 9 / 16; width: auto; height: 300px; justify-self: center }
.motiv-bild span { font-weight: 700; font-size: 17px; line-height: 1.25; text-wrap: balance } .motiv-bild small { opacity: .8; font-size: 11px }
button:disabled { opacity: .45; cursor: not-allowed }
.filterchip { border: 1px solid var(--linie); background: var(--flaeche); border-radius: 999px; padding: 4px 11px; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--leise) }
.filterchip.an { background: var(--blau-knopf); border-color: var(--blau-knopf); color: #fff }
.rottext { color: var(--rot); font-weight: 700 }
.karte .gross { font-size: 28px; font-weight: 700; line-height: 1.1 }
.vorschlag.rotrahmen { border-color: var(--rot); background: var(--rot-hell) }
.updlauf { display: grid; gap: 8px; margin-top: 12px; border-top: 1px solid var(--linie); padding-top: 12px }
.updschritt { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start }
.updschritt > span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--flaeche2); border: 1px solid var(--linie); font-weight: 700; font-size: 12px }
.updschritt.ok > span { background: var(--gruen-hell); color: var(--gruen); border-color: transparent }
.updschritt.warn > span { background: var(--gelb-hell); color: var(--gelb); border-color: transparent }
.updschritt.lauf > span { background: var(--blau-hell); color: var(--blau-text); border-color: transparent }
.schritte { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 16px }
.schritt { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--flaeche); border: 1px solid var(--linie); color: var(--leise); font-weight: 600; font-size: 13px }
.schritt span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--flaeche2); border: 1px solid var(--linie); font-size: 12px }
.schritt.an { border-color: var(--blau); color: var(--blau-text) } .schritt.an span { background: var(--blau-knopf); color: #fff; border-color: var(--blau-knopf) }
.schritt.ok { color: var(--gruen) } .schritt.ok span { background: var(--gruen-hell); color: var(--gruen); border-color: transparent }
.formraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px }
.dokument { background: #fff; color: #222; border: 1px solid var(--linie); border-radius: 6px; padding: 28px 30px; box-shadow: var(--schatten); min-width: 0 }
.dokument .leise { color: #5F5E5E }
.dok-kopf { display: flex; justify-content: space-between; gap: 8px; border-bottom: 2px solid #009FE3; padding-bottom: 8px; font-size: 12.5px; color: #5F5E5E }
.dok-tab td { border-bottom: 1px solid #E3E7EA; padding: 7px 8px; vertical-align: top; font-size: 13px } .dok-tab td:first-child { width: 34%; color: #5F5E5E; font-weight: 600 }
.mailvorschau { border: 1px solid var(--linie); border-radius: 8px; padding: 10px 12px; background: var(--flaeche2); font-size: 13px }
.mailvorschau small { color: var(--leise); font-weight: 600; margin-right: 4px } .mailvorschau hr { border: 0; border-top: 1px solid var(--linie); margin: 8px 0 } .mailvorschau p { margin: 0 0 8px }
.mailvorschau.klein { margin-top: 4px; border-style: dashed }
.hinweis-wechsel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: var(--lila-hell); color: var(--fg); border-radius: 10px; padding: 10px 14px; margin-bottom: 12px }
.kundenportal { border: 2px solid var(--linie); border-radius: 12px; overflow: hidden; background: var(--bg) }
.kp-kopf { display: flex; justify-content: space-between; gap: 8px; padding: 10px 16px; background: #0F2A3A; color: #fff; font-size: 13px }
.kp-inhalt { padding: 16px }
.fehlertext { color: var(--rot); font-size: 13px; font-weight: 600; min-height: 1em }
.folgen li .i { color: var(--gruen); width: 18px; height: 18px }
.i { width: 1.05em; height: 1.05em; vertical-align: -0.17em; flex: none }
nav.seite .ico { display: inline-flex } nav.seite .ico .i { width: 18px; height: 18px }
.rund .i { width: 20px; height: 20px; vertical-align: middle }
.suche .i { width: 16px; height: 16px }
.ereignis .icon .i { width: 12px; height: 12px }
@media (max-width: 1100px) { .zwei { grid-template-columns: 1fr } .w.breit { grid-column: auto } .ampeln { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 860px) {
  .koerper { grid-template-columns: 1fr } nav.seite { display: none } .mobil-nav { display: flex; gap: 4px; overflow-x: auto; padding: 6px 12px; background: var(--flaeche); border-bottom: 1px solid var(--linie) }
  .mobil-nav a { white-space: nowrap; padding: 6px 10px; border-radius: 6px; text-decoration: none; color: var(--leise); font-weight: 600; font-size: 13px } .mobil-nav a.an { background: var(--blau-hell); color: var(--blau-text) }
  aside.agent.offen { position: fixed; inset: 0; width: auto; z-index: 40 } .agent-verlauf, .agent-eingabe, .agent-vorschlaege { min-width: 0 }
  .posteingang { grid-template-columns: 1fr } main { padding: 16px 16px 48px } .timer .txt, .suche kbd, .kopf .avatar, .knopf.agent .txt, #fokus-knopf .txt { display: none }
  .aktenkopf { grid-template-columns: auto 1fr } .aktenkopf .akt { grid-column: 1 / -1 }
}
@media (prefers-reduced-motion: reduce) { aside.agent { transition: none } }
#fokus-knopf.an { background: var(--lila-hell); border-color: var(--lila); color: var(--lila) }
#fokus-leiste { background: var(--lila-hell); color: var(--text); border-bottom: 1px solid var(--lila); padding: 7px 16px; font-size: 13px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap }
#fokus-leiste[hidden] { display: none }
.fb-vorschau { position: relative; border: 1px solid var(--linie); border-radius: 8px; overflow: hidden; background: #FBF7F2; color: #3B2A1E; cursor: crosshair; margin: 0 auto; font-family: Georgia, serif }
.fb-vorschau.desktop { width: 100%; aspect-ratio: 16 / 10 } .fb-vorschau.mobil { width: 300px; max-width: 100%; aspect-ratio: 9 / 16 }
.fb-nav { display: flex; justify-content: space-between; align-items: center; padding: 3% 4%; font-size: 11px; gap: 8px; border-bottom: 1px solid #E8DCCD }
.fb-vorschau.mobil .fb-nav span { display: none }
.fb-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 4%; padding: 5% 4%; align-items: center }
.fb-vorschau.mobil .fb-hero { grid-template-columns: 1fr }
.fb-hero small { font-size: 11px; color: #9A6B3F } .fb-hero h2 { font-size: clamp(14px, 2.4vw, 26px); margin: 6px 0 10px; line-height: 1.15 }
.fb-btn { display: inline-block; background: #7A4B2A; color: #fff; padding: 6px 12px; border-radius: 4px; font: 600 11px system-ui }
.fb-bild { background: linear-gradient(135deg, #C9A27A, #7A4B2A); border-radius: 6px; aspect-ratio: 4 / 3; display: grid; place-items: center; color: #fff; font: 12px system-ui }
.fb-karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3%; padding: 0 4% 4% } .fb-karten div { background: #fff; border: 1px solid #E8DCCD; border-radius: 6px; padding: 8% 6%; font-size: 12px; text-align: center }
.fb-vorschau.mobil .fb-karten { grid-template-columns: 1fr }
.fb-pin { position: absolute; transform: translate(-50%, -50%); width: 24px; height: 24px; border-radius: 50%; background: var(--rot); color: #fff; font: 700 12px system-ui; display: grid; place-items: center; box-shadow: 0 0 0 3px rgba(255,255,255,.8); cursor: default }
.fb-pin.ok { background: var(--gruen) } .fb-pin.klein { position: static; transform: none; flex: none; width: 22px; height: 22px; box-shadow: none }
.fb-form { position: absolute; background: var(--flaeche); color: var(--text); border: 1px solid var(--linie); border-radius: 8px; padding: 8px; box-shadow: var(--schatten); width: 240px; font-family: system-ui; cursor: default; z-index: 2 } .fb-form input { width: 100% }
.bereichsleiste { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: -4px 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--linie) }
.bereich-name { display: flex; align-items: center; gap: 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--leise); font-weight: 600 }
.bereich-reiter { display: flex; gap: 4px; flex-wrap: wrap }
.bereich-reiter a { padding: 6px 12px; border-radius: 999px; color: var(--fg); text-decoration: none; font-size: 13.5px; font-weight: 500; border: 1px solid transparent; display: flex; gap: 6px; align-items: center }
.bereich-reiter a:hover { background: var(--flaeche2) }
.bereich-reiter a.an { background: var(--blau-hell); color: var(--blau-text); font-weight: 700; border-color: var(--blau) }
.bereich-reiter a .zahl { font-size: 11px; background: var(--rot); color: #fff; border-radius: 999px; padding: 0 6px; font-weight: 700 }
.nav-trenner { border-top: 1px solid var(--linie); margin: 10px 6px }
.nav-anpassen { margin: 10px 6px 0; background: none; border: 1px dashed var(--linie); color: var(--leise); border-radius: 7px; padding: 6px 10px; cursor: pointer; display: flex; gap: 8px; align-items: center; font: inherit; font-size: 13px }
.nav-anpassen:hover { color: var(--fg); border-color: var(--blau) }
.stern-knopf { margin-left: auto } .stern-knopf.an { color: var(--gelb); border-color: var(--gelb) }

/* ---- Ergänzungen für das echte OS (nicht im Muster) ---- */
.schlicht { background: var(--bg) }
.schlicht-rahmen { max-width: 460px; margin: 8vh auto; padding-inline: 16px; display: grid; gap: 18px }
.logo-gross { font-weight: 800; font-size: 22px; display: flex; gap: 8px; align-items: center }
.logo-gross i { font-style: normal; background: var(--blau); color: #fff; border-radius: 8px; padding: 2px 8px }
.anmeldekarte h1 { margin-top: 0; font-size: 22px }
.formular { display: grid; gap: 12px; margin-top: 8px }
.formular input, .formular select, .formular textarea { font: inherit; padding: 9px 11px; border: 1px solid var(--linie); border-radius: 8px; background: var(--flaeche); color: var(--fg); width: 100% }
.formular input:focus-visible, .formular select:focus-visible { outline: 2px solid var(--blau); outline-offset: 1px }
.meldung { padding: 10px 12px; border-radius: 8px; font-size: 14px; margin: 0 0 12px }
.meldung.fehler { background: var(--rot-hell); color: var(--rot) }
.meldung.ok { background: var(--gruen-hell); color: var(--gruen) }
.schrittliste { padding-left: 20px; display: grid; gap: 4px; font-size: 14px }
.qr { background: #fff; padding: 12px; border-radius: 10px; width: max-content; max-width: 100% }
.qr svg { width: 200px; height: 200px; display: block }
.konto-menue { position: relative }
.konto-menue summary { list-style: none; cursor: pointer }
.konto-menue summary::-webkit-details-marker { display: none }
.konto-liste { position: absolute; right: 0; top: 44px; min-width: 240px; display: grid; gap: 8px; z-index: 30 }
.nav-trenner { border-top: 1px solid var(--linie); margin: 10px 6px }
.bereichsleiste { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: -4px 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--linie) }
.bereich-name { display: flex; align-items: center; gap: 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--leise); font-weight: 600 }
.bereich-reiter { display: flex; gap: 4px; flex-wrap: wrap }
.bereich-reiter a { padding: 6px 12px; border-radius: 999px; color: var(--fg); text-decoration: none; font-size: 13.5px; font-weight: 500; border: 1px solid transparent }
.bereich-reiter a:hover { background: var(--flaeche2) }
.bereich-reiter a.an { background: var(--blau-hell); color: var(--blau-text); font-weight: 700; border-color: var(--blau) }
.reiter a { padding: 9px 12px; color: var(--leise); font-weight: 600; border-bottom: 2px solid transparent; white-space: nowrap; text-decoration: none }
.reiter a.an { color: var(--blau-text); border-bottom-color: var(--blau) }
.reiter a .n { font-size: 11px; background: var(--flaeche2); border: 1px solid var(--linie); border-radius: 999px; padding: 0 6px; margin-left: 4px }
.formular .zeile { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px }
.formular label.haken { display: flex; gap: 8px; align-items: center; font-size: 14px; font-weight: 500; color: var(--fg) }
.formular label.haken input { width: auto }
.seiten { display: flex; gap: 6px; align-items: center; margin-top: 10px; font-size: 13px }
.suchleiste { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px }
.suchleiste input[type=search] { font: inherit; padding: 7px 11px; border: 1px solid var(--linie); border-radius: 8px; background: var(--flaeche); color: var(--fg); min-width: 220px }
a.knopf { text-decoration: none; display: inline-flex; align-items: center; gap: 6px }

/* Persönliches Menü, Favoriten, Cockpit-Widgets */
.merken button[aria-pressed="true"] { color: var(--gelb); border-color: var(--gelb) }
.merken button[aria-pressed="true"] svg, .nav-favoriten svg { fill: currentColor }
.merken { margin-right: 8px }
.nav-favoriten { display: grid; gap: 2px }
.nav-favoriten > small { color: var(--leise); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; padding: 4px 10px }
.nav-favoriten a.fav .ico { color: var(--gelb) }
.w-fehler { color: var(--rot, #c0392b); font-size: 12.5px }
.anpassen-tabelle td input[type=number] { width: 64px }
.suche-kopf { margin-left: 18px; flex: 0 1 340px }
.suche-kopf input { width: 100%; border: 1px solid var(--linie); border-radius: 8px; padding: 6px 10px; font: inherit; background: var(--flaeche) }
@media (max-width: 700px) { .suche-kopf { display: none } }