/* EBS Kundenakte - ein Akzent (EBS-Gruen), 4px-Raster.
   Farben auf Lesbarkeit geprueft: Fliesstext und Pillen erreichen mindestens 4,5:1 Kontrast. */
:root {
  --gruen: #2E5C3E; --gruen-dunkel: #1f4a2e; --gruen-hell: #e3efe7; --gruen-mittel: #a9cdb5;
  --text: #16201a; --grau: #47524b; --grau-hell: #69736d; --rand: #cdd6d0; --flaeche: #f3f6f4;
  --rot: #a3201a; --rot-hell: #fde6e4; --rot-rand: #f0b4ae;
  --gelb: #7a4b00; --gelb-hell: #fff0d1; --gelb-rand: #f1cf8a;
  --blau: #1d4f91; --blau-hell: #e3edfb; --blau-rand: #b5cbee;
  --violett: #5b2ea6; --violett-hell: #efe7fb;
  --radius: 6px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 120px; }
body { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif; font-size: 15.5px;
       line-height: 1.55; color: var(--text); background: #fff; }
a { color: var(--gruen-dunkel); text-decoration: none; font-weight: 500; }
a:hover { text-decoration: underline; }
h1 { font-size: 25px; margin: 0 0 4px; font-weight: 600; }
h2 { font-size: 18px; margin: 28px 0 10px; font-weight: 600; color: var(--gruen-dunkel); }
h3 { font-size: 15.5px; margin: 0 0 6px; font-weight: 600; }
.klein { font-size: 13.5px; color: var(--grau); }
.leer { color: var(--grau-hell); font-style: italic; }
code, .mono { font-family: Consolas, "Cascadia Mono", monospace; font-size: 13px; }
b, strong { font-weight: 600; }

/* Kopf */
.kopf { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid var(--rand); }
.kopf-innen { max-width: 1280px; margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; gap: 16px; }
.kopf img.logo { height: 32px; display: block; }
.marke { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 600; white-space: nowrap; }
.marke:hover { text-decoration: none; }
nav.haupt { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
nav.haupt a { padding: 6px 8px; border-radius: var(--radius); color: var(--grau); white-space: nowrap; font-weight: 500; }
nav.haupt a.an, nav.haupt a:hover { background: var(--gruen-hell); color: var(--gruen-dunkel); text-decoration: none; }
.neu-knoepfe { display: flex; gap: 6px; flex-shrink: 0; }
.neu-knoepfe .knopf { white-space: nowrap; }
/* Kopf ist eng: der Schriftzug neben dem Logo entfaellt */
.marke span { display: none; }
.suche-kopf { position: relative; flex: 1; min-width: 150px; max-width: 420px; margin-left: auto; }
.suche-kopf input { width: 100%; }
.nutzer { white-space: nowrap; font-size: 13.5px; color: var(--grau); }
/* Language switch DE | EN */
.sprache { margin-left: 8px; border: 1px solid var(--rand); border-radius: 6px; display: inline-flex; overflow: hidden; }
.sprache a { padding: 1px 6px; font-size: 12px; color: var(--grau); }
.sprache a.an { background: var(--gruen-hell); color: var(--gruen-dunkel); font-weight: 600; }
.ergebnisse { position: absolute; top: 40px; left: 0; right: 0; background: #fff; border: 1px solid var(--rand);
              border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.14); max-height: 70vh; overflow: auto; }
.ergebnisse:empty { display: none; }
.erg-gruppe { padding: 6px 12px 2px; font-size: 12px; color: var(--grau); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.erg { display: block; padding: 6px 12px; color: var(--text); font-weight: 500; }
.erg:hover, .erg:focus { background: var(--gruen-hell); text-decoration: none; }
.erg small { display: block; color: var(--grau); font-weight: 400; }

main { max-width: 1280px; margin: 0 auto; padding: 20px 16px 60px; }

/* Formulare */
input[type=text], input[type=search], input[type=password], input[type=date], input[type=datetime-local],
input[type=email], input[type=tel], select, textarea {
  font: inherit; padding: 7px 10px; border: 1px solid #b8c3bc; border-radius: var(--radius); background: #fff; color: var(--text);
  max-width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--gruen-mittel); border-color: var(--gruen); }
textarea { width: 100%; min-height: 90px; resize: vertical; }
label { display: block; font-size: 13.5px; color: var(--grau); margin: 12px 0 4px; font-weight: 500; }
.knopf, button { font: inherit; font-weight: 500; display: inline-block; padding: 7px 14px; border-radius: var(--radius);
                 border: 1px solid var(--gruen); background: var(--gruen); color: #fff; cursor: pointer; }
.knopf:hover, button:hover { background: var(--gruen-dunkel); text-decoration: none; }
.knopf.zwei, button.zwei { background: #fff; color: var(--gruen-dunkel); }
.knopf.zwei:hover, button.zwei:hover { background: var(--gruen-hell); }
.knopf.klein, button.klein { padding: 3px 9px; font-size: 13.5px; color: #fff; }
.knopf.zwei.klein, button.zwei.klein { color: var(--gruen-dunkel); }
.zeile { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; }
.zeile > div { flex: 1; min-width: 160px; }
.formular { max-width: 860px; }
.fehler { background: var(--rot-hell); color: var(--rot); border: 1px solid var(--rot-rand); padding: 10px 14px; border-radius: var(--radius); margin: 12px 0; }
.hinweis { background: var(--gelb-hell); color: var(--gelb); border: 1px solid var(--gelb-rand); padding: 10px 14px; border-radius: var(--radius); margin: 12px 0; }
.ok { background: var(--gruen-hell); color: var(--gruen-dunkel); border: 1px solid var(--gruen-mittel); padding: 10px 14px; border-radius: var(--radius); margin: 12px 0; }

/* Karten und Raster */
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.raster-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
.raster-kd { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
@media (max-width: 900px) { .raster-2 { grid-template-columns: 1fr; } }
.karte { border: 1px solid var(--rand); border-radius: var(--radius); padding: 12px 14px; background: #fff; }
.karte.still { background: var(--flaeche); }
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 16px 0; }
.kennzahl { border: 1px solid var(--rand); border-radius: var(--radius); padding: 12px 14px; color: var(--text); font-weight: 400; }
a.kennzahl:hover { background: var(--flaeche); text-decoration: none; }
.kennzahl .wert { font-size: 28px; font-weight: 600; line-height: 1.2; color: var(--gruen-dunkel); }
.kennzahl .was { font-size: 13.5px; color: var(--grau); }
.kennzahl.warn .wert { color: var(--rot); }
.diagramm { position: relative; height: 300px; }

/* Tabellen */
.tabelle-huelle { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--rand); vertical-align: top; }
th { font-size: 12.5px; color: var(--grau); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; background: var(--flaeche); }
tr:hover td { background: #f7faf8; }

/* Pillen: dunkler Text auf hellem Grund, sichtbarer Rand */
.pille { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12.5px; font-weight: 500; background: var(--flaeche);
         border: 1px solid var(--rand); color: var(--grau); white-space: nowrap; }
.pille.gruen { background: var(--gruen-hell); border-color: var(--gruen-mittel); color: var(--gruen-dunkel); }
.pille.gelb { background: var(--gelb-hell); border-color: var(--gelb-rand); color: var(--gelb); }
.pille.rot { background: var(--rot-hell); border-color: var(--rot-rand); color: var(--rot); }
.pille.ruht { background: #eeeeee; border-color: #cfcfcf; color: #4a4a4a; }
.pille.blau { background: var(--blau-hell); border-color: var(--blau-rand); color: var(--blau); }
.pille.violett { background: var(--violett-hell); border-color: #d2c0f2; color: var(--violett); }
.punkt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--grau-hell); margin-right: 6px; }
.punkt.gruen { background: #23803f; } .punkt.gelb { background: #c78400; } .punkt.rot { background: var(--rot); } .punkt.ruht { background: #9a9a9a; }

/* Kundenakte */
.akte-kopf { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: start; }
.kontaktleiste { display: flex; gap: 10px 28px; flex-wrap: wrap; margin: 14px 0 6px; padding: 12px 14px; background: var(--flaeche);
                 border: 1px solid var(--rand); border-radius: var(--radius); }
.kontaktleiste a { font-size: 15.5px; }
nav.reiter { position: sticky; top: 49px; z-index: 10; background: #fff; display: flex; gap: 4px; overflow-x: auto;
             border-bottom: 1px solid var(--rand); padding: 6px 0; margin: 10px 0 0; scrollbar-width: none; }
nav.reiter a { padding: 5px 12px; border-radius: 999px; white-space: nowrap; color: var(--grau); border: 1px solid var(--rand); }
nav.reiter a:hover { background: var(--gruen-hell); color: var(--gruen-dunkel); text-decoration: none; }
.vorgang { border-left: 4px solid var(--rand); }
.steckbrief { background: #fafcfb; border: 1px solid var(--gruen-mittel); border-radius: var(--radius); padding: 10px 12px; margin: 8px 0; }
.vorgang.gruen { border-left-color: #23803f; } .vorgang.gelb { border-left-color: #c78400; }
.vorgang.rot { border-left-color: var(--rot); } .vorgang.ruht { border-left-color: #9a9a9a; }
.vorgang .meta { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 8px; }
.feld { font-size: 14px; margin: 2px 0; }
.feld b { font-weight: 600; color: var(--grau); }
details > summary { cursor: pointer; color: var(--gruen-dunkel); margin: 6px 0; font-weight: 500; }
.zeitleiste { list-style: none; padding: 0; margin: 0; }
.zeitleiste li { position: relative; padding: 0 0 14px 22px; border-left: 2px solid var(--rand); margin-left: 6px; }
.zeitleiste li::before { content: ""; position: absolute; left: -7px; top: 4px; width: 12px; height: 12px; border-radius: 50%;
                         background: var(--grau-hell); border: 2px solid #fff; }
.zeitleiste li.gespraech::before { background: var(--gruen); }
.zeitleiste li.mail::before { background: var(--blau); }
.zeitleiste li.log::before { background: var(--violett); }
.zeitleiste li.dokument::before { background: #c78400; }
.zeitleiste li.asana::before { background: #d1495b; }
.zeitleiste .wann { font-size: 13px; color: var(--grau); }
.zeitleiste .text { white-space: pre-line; }
.rohtext { white-space: pre-wrap; background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: 12px; }
.md { font-size: 14.5px; overflow-wrap: anywhere; }
.md h1, .md h2, .md h3 { font-size: 15px; color: var(--text); margin: 10px 0 4px; }
.md p { margin: 4px 0; }
.md table { font-size: 13.5px; }
.md ul, .md ol { padding-left: 20px; margin: 4px 0; }
.dokliste { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.dok { padding: 4px 6px; border-radius: 4px; color: var(--text); font-weight: 400; }
.dok:hover { background: var(--flaeche); text-decoration: none; }
.liste-schlicht { list-style: none; padding: 0; margin: 0; }
.liste-schlicht li { padding: 7px 0; border-bottom: 1px solid var(--rand); }
.liste-schlicht li:last-child { border-bottom: 0; }
.kopierbar { cursor: copy; }
.az { display: flex; flex-wrap: wrap; gap: 2px; margin: 8px 0 14px; }
.az a { min-width: 26px; text-align: center; padding: 2px 6px; border-radius: 4px; border: 1px solid var(--rand); color: var(--grau); }
.az a.an, .az a:hover { background: var(--gruen); color: #fff; border-color: var(--gruen); text-decoration: none; }
.buchstabe { background: var(--flaeche); font-weight: 600; color: var(--gruen-dunkel); }

/* Login */
.login { max-width: 380px; margin: 10vh auto; padding: 24px; border: 1px solid var(--rand); border-radius: var(--radius); }
.login img { height: 44px; margin-bottom: 12px; }
.login input { width: 100%; }

@media (max-width: 720px) {
  .kopf-innen { flex-wrap: wrap; gap: 8px; }
  .suche-kopf { order: 3; max-width: none; flex-basis: 100%; }
  nav.haupt { order: 2; flex-basis: 100%; }
  nav.reiter { top: 0; position: static; }
  .nutzer { display: none; }
  main { padding: 14px 12px 50px; }
  h1 { font-size: 21px; }
  .marke span { display: none; }
}

/* Erstgespraech: Protokoll links, Leitfaden rechts */
.programmwahl { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 14px; }
.programmwahl button.pille { font-size: 14px; padding: 4px 12px; background: #fff; color: var(--gruen-dunkel);
  border: 1px solid var(--gruen-mittel); }
.programmwahl button.pille:hover { background: var(--gruen-hell); }
.programmwahl button.pille.aktiv { background: var(--gruen); color: #fff; border-color: var(--gruen); }
/* Leitfaden schon geoeffnet: Antworten darin bleiben erhalten */
.programmwahl button.pille.geladen:not(.aktiv) { border-style: dashed; border-color: var(--gruen); }
.programmwahl .trenner { width: 1px; align-self: stretch; background: var(--rand, #ddd); margin: 0 6px; }
.zweispaltig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 22px; align-items: start; }
.zweispaltig textarea, .zweispaltig input[type=text], .zweispaltig input[type=email], .zweispaltig input[type=tel],
.zweispaltig input[type=search] { width: 100%; }
.spalte-rechts { position: sticky; top: 64px; max-height: calc(100vh - 80px); overflow: auto; border: 1px solid var(--rand);
  border-radius: var(--radius); padding: 10px 14px; background: var(--flaeche); }
.leitfaden-kopf h2 { margin: 4px 0 2px; }
.lf-abschnitt { border-top: 1px solid var(--rand); padding: 6px 0; }
.lf-abschnitt summary { cursor: pointer; font-weight: 600; color: var(--gruen-dunkel); padding: 2px 0; }
.lf-text { font-size: 14px; }
.lf-text ul { margin: 4px 0 6px; padding-left: 20px; }
.lf-text blockquote { margin: 6px 0; padding: 4px 10px; border-left: 3px solid var(--gruen-mittel); background: #fff; font-style: italic; }
.lf-text table { font-size: 13.5px; }
.lf-frage { display: block; margin: 6px 0; font-size: 14px; color: var(--text); font-weight: 500; }
.lf-frage input, .lf-frage textarea { display: block; width: 100%; margin-top: 2px; background: #fff; }
.lf-punkt { display: block; margin: 4px 0; font-size: 14px; color: var(--text); font-weight: 400; }
.kundeart { display: flex; gap: 18px; margin: 4px 0 8px; }
.kundeart label { color: var(--text); font-weight: 500; }
.kunde-wahl { display: block; margin: 4px 0; color: var(--text); font-weight: 400; }
#kunde-neu, #kunde-bestand { margin-bottom: 10px; }
@media (max-width: 900px) {
  .zweispaltig { grid-template-columns: 1fr; }
  .spalte-rechts { position: static; max-height: none; }
}

/* Lead anlegen: Programmauswahl als Haken */
.pille-wahl { display: inline-block; padding: 3px 10px; border: 1px solid var(--gruen-mittel); border-radius: 999px;
  font-size: 14px; color: var(--text); font-weight: 500; background: #fff; margin: 0; }
.pille-wahl input { margin-right: 3px; }

/* Anrede Du/Sie in der Kundenakte und im Vorschlag */
.anrede-knoepfe { display: inline; margin-left: 6px; }
.anrede-knoepfe button { padding: 1px 8px; font-size: 12.5px; }
.anrede-wahl { align-items: center; gap: 8px; margin: 10px 0 4px; }
.anrede-wahl > label:first-child { margin: 0 6px 0 0; }

/* Vorlagen: Vergleich zweier Fassungen */
.diff { font-family: Consolas, monospace; font-size: 12.5px; border: 1px solid var(--rand, #ddd); border-radius: 4px; padding: 6px; max-height: 420px; overflow: auto; white-space: pre-wrap; }
.diff .dneu { background: #e6f4ea; }
.diff .dalt { background: #fdecea; text-decoration: line-through; color: #8a2c22; }
/* verlorener Vorgang (91_Lost): durchgestrichen, bleibt aber lesbar */
.lost { text-decoration: line-through; color: var(--grau); }

/* mail templates */
.raster-mail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; align-items: start; }
.raster-mail label { display: block; margin-top: 8px; }
.raster-mail button { margin-top: 12px; }
.mailtext { font-family: "Segoe UI", Arial, sans-serif; font-size: 14.5px; line-height: 1.45; }
.mailtext p { margin: 0 0 10px; }
@media (max-width: 900px) { .raster-mail { grid-template-columns: 1fr; } }
.reiter { display: flex; gap: 4px; border-bottom: 1px solid var(--rand); margin-bottom: 14px; }
.reiter a { padding: 6px 12px; color: var(--grau); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.reiter a.an { color: var(--gruen-dunkel); border-bottom-color: var(--gruen-dunkel); }
.reiter a:hover { text-decoration: none; color: var(--gruen-dunkel); }

/* Claude clock (analysis state): yellow ticking while working, green finished, red aborted */
.uhr-zeile { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 12px 0; }
.uhr { display: inline-flex; align-items: center; gap: 7px; padding: 3px 12px 3px 8px; border-radius: 999px;
  border: 1px solid; font-size: 13.5px; font-weight: 600; }
.uhr.gelb { background: var(--gelb-hell); border-color: var(--gelb-rand); color: var(--gelb); }
.uhr.gruen { background: var(--gruen-hell); border-color: var(--gruen-mittel); color: var(--gruen-dunkel); }
.uhr.rot { background: var(--rot-hell); border-color: var(--rot-rand); color: var(--rot); }
.uhr .zifferblatt { width: 14px; height: 14px; border: 2px solid currentColor; border-radius: 50%; position: relative; flex: none; }
.uhr .zifferblatt::after { content: ""; position: absolute; left: 50%; top: 50%; width: 2px; height: 5px; margin-left: -1px;
  background: currentColor; border-radius: 1px; transform-origin: 50% 0; transform: rotate(180deg); }
.uhr.gelb .zifferblatt::after { animation: uhr-zeiger 2s linear infinite; }
@keyframes uhr-zeiger { from { transform: rotate(180deg); } to { transform: rotate(540deg); } }
@media (prefers-reduced-motion: reduce) { .uhr.gelb .zifferblatt::after { animation: none; } }
fieldset.sperre { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.sperre:disabled textarea, fieldset.sperre:disabled input { background: var(--flaeche); color: #6b6b6b; }
fieldset.sperre:disabled button { opacity: .5; cursor: not-allowed; }