/* Chat am Vorgang (chat.js) – nur mit dem neuen Gerüst (body.gerust). Farben aus den Variablen der Seite (--ink, --line, --red …).
   Ohne Gerüst gibt es keine dieser Klassen im Verlauf – die alte Ansicht bleibt unverändert. */
:root { --ch-ich: #f5ecdf; --ch-ich-rand: #e8d6bb; --ch-team: #f6f4f1; --ch-team-rand: #e9e4dd; --ch-kunde: #fff4ea; --ch-kunde-rand: #f4d3bd; }

/* Kopf der Verlaufskarte: Galerie-Knopf rechts */
body.gerust .ch-h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body.gerust .ch-gal-knopf { margin-left: auto; font-size: 13px; font-weight: 600; }

/* Liste als Chat: älteste oben, neueste unten (Reihenfolge dreht chat.js), die Liste scrollt innen – die Seite wächst nicht mit */
body.gerust ul.ch-liste { display: flex; flex-direction: column; gap: 8px; margin: 8px -6px 0; padding: 4px 6px 10px;
  overflow-y: auto; overscroll-behavior: contain; max-height: clamp(300px, 62vh, 680px); scroll-padding: 12px; }
body.gerust ul.ch-liste > li:first-child { margin-top: auto; }   /* wenige Einträge: unten an der Eingabe, wie im Chat */
/* rechte Verlaufsspalte der Mappe (breite Fenster): Karte füllt die Spalte, nur die Liste scrollt */
@media (min-width: 1181px) {
  body.gerust #vgInhalt.g-mappe > .ch-karte.g-vg-verlauf { display: flex !important; flex-direction: column; height: var(--ch-hoehe, calc(100vh - 24px)); }
  body.gerust #vgInhalt.g-mappe > .ch-karte.g-vg-verlauf > * { flex: none; }
  body.gerust #vgInhalt.g-mappe > .ch-karte.g-vg-verlauf > ul.ch-liste { flex: 1 1 0; min-height: 180px; max-height: none; }
  body.gerust #vgInhalt.g-mappe > .ch-karte.g-vg-verlauf > .ch-pins { max-height: 30vh; overflow-y: auto; }
}

/* Eingabe unter der Liste: Feld über die ganze Breite, darunter Haken · Hinweis „nur intern / für den Kunden“ · Eintragen */
body.gerust .ch-karte > .vg-neu-notiz { margin: 6px 0 4px; padding-top: 10px; border-top: 1px solid var(--line); gap: 6px 10px; }
body.gerust .ch-karte > .vg-neu-notiz > #vgNotiz { flex: 1 1 100%; }
body.gerust .ch-karte > .diktat { display: block; margin: 0 0 4px; }
.ch-sicht { margin-right: auto; font-size: 12.5px; font-weight: 600; line-height: 1.3; border-radius: 10px; padding: 3px 9px; background: #f1eee9; color: var(--muted); border: 1px solid transparent; }
.ch-sicht .ch-sicht-kunde { display: none; }
@supports selector(:has(a)) {
  body.gerust .ch-karte > .vg-neu-notiz:has(#vgNotizKunde:checked) .ch-sicht { background: #fff1e6; color: #a8380f; border-color: #f2c4a2; }
  body.gerust .ch-karte > .vg-neu-notiz:has(#vgNotizKunde:checked) .ch-sicht-intern { display: none; }
  body.gerust .ch-karte > .vg-neu-notiz:has(#vgNotizKunde:checked) .ch-sicht-kunde { display: inline; }
  body.gerust .ch-karte > .vg-neu-notiz:has(#vgNotizKunde:checked) > #vgNotiz { border-color: var(--orange); box-shadow: 0 0 0 2px #ef7d2230; }
}
@supports not selector(:has(a)) {
  .ch-sicht[data-an="1"] { background: #fff1e6; color: #a8380f; border-color: #f2c4a2; }
  .ch-sicht[data-an="1"] .ch-sicht-intern { display: none; }
  .ch-sicht[data-an="1"] .ch-sicht-kunde { display: inline; }
}

/* Rückfrage vor einer Kunden-Mail (Enter bei „für Kunden sichtbar“) */
dialog.ch-frage { width: min(380px, calc(100vw - 32px)); }
.ch-frage-inhalt { padding: 18px 20px 16px; }
.ch-frage-inhalt p { margin: 0 0 6px; }
.ch-frage-titel { font-weight: 700; font-size: 16px; }
.ch-frage-inhalt .btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
body.gerust ul.ch-liste[data-ch="laedt"] { opacity: .45; transition: opacity .2s; }
body.gerust ul.ch-liste > li.ch-e { display: block; padding: 7px 12px 3px; margin: 0 28px 0 0; border: 1px solid var(--ch-team-rand); border-radius: 14px 14px 14px 4px;
  background: var(--ch-team); font-size: 14px; min-width: 0; overflow-wrap: anywhere; scroll-margin: 90px; }
body.gerust ul.ch-liste > li.ch-e.ch-ich { background: var(--ch-ich); border-color: var(--ch-ich-rand); border-radius: 14px 14px 4px 14px; margin: 0 0 0 28px; }
body.gerust ul.ch-liste > li.ch-e.ch-kunde { background: var(--ch-kunde); border: 1px solid var(--ch-kunde-rand); border-left: 4px solid var(--red); border-radius: 6px 14px 14px 6px; margin: 0 16px 0 0; }
body.gerust ul.ch-liste > li.ch-e.ch-sys { background: none; border: 0; border-radius: 8px; padding: 1px 6px; margin: 0 10px; text-align: center; font-size: 12.5px; color: var(--muted); }
body.gerust ul.ch-liste > li.ch-e.ch-gepinnt:not(.ch-sys) { border-top: 2px solid #e9c46a; }
body.gerust li.ch-e > .ch-orig { display: none; }
body.gerust li.ch-e.ch-mail > .ch-orig { display: block; margin: 2px 0 2px; }
body.gerust li.ch-e.ch-mail > .ch-orig summary { cursor: pointer; overflow-wrap: anywhere; }
body.gerust li.ch-e.ch-mail > .ch-orig summary .hinweis { display: none; }
body.gerust li.ch-e.ch-mail > .ch-orig p { margin: 6px 0 4px; font-size: 13.5px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; max-height: 360px; overflow: auto; }

/* Kopfzeile je Eintrag: Name · Uhrzeit · sichtbar für */
.ch-kopf { display: flex; align-items: baseline; gap: 4px 7px; flex-wrap: wrap; font-size: 12.5px; margin-bottom: 1px; }
.ch-wer { font-weight: 700; color: var(--ink); font-size: 13px; }
.ch-du { font-weight: 400; color: var(--muted); }
.ch-zeit { color: var(--muted); font-variant-numeric: tabular-nums; }
.ch-badge { margin-left: auto; font-size: 11.5px; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 0 7px; white-space: nowrap; }
.ch-b-sicht { color: #7a4a00; background: #fff6dc; border-color: #f0d898; }
.ch-b-kunde { color: #fff; background: var(--red); border-color: var(--red); font-weight: 700; }
.ch-pinmarke { font-size: 12px; }
.ch-text { white-space: pre-wrap; line-height: 1.45; color: var(--ink); }
.ch-info { font-size: 12px; color: var(--muted); margin-top: 3px; }

/* Systemzeilen (Status, automatisch) */
.ch-sys-zeile { display: inline; }
.ch-sys-text { white-space: pre-wrap; }
.ch-sys-meta { margin-left: 6px; white-space: nowrap; }
.ch-sys .ch-zitat { margin: 2px auto 3px; max-width: 420px; }

/* Aktionen: dezent, beim Überfahren deutlicher */
.ch-akt { display: flex; justify-content: flex-end; align-items: center; gap: 2px; margin: 1px -7px 0 0; flex-wrap: wrap; }
.ch-akt button { border: 0; background: none; font: inherit; font-size: 12px; color: var(--muted); padding: 3px 7px; border-radius: 7px; cursor: pointer; opacity: .75; }
.ch-akt button:hover, .ch-akt button:focus-visible { background: #0000000f; color: var(--ink); opacity: 1; }
li.ch-e:hover .ch-akt button, li.ch-e:focus-within .ch-akt button { opacity: 1; }
.ch-akt .ch-akt-antw { margin-right: auto; color: #8a5a14; opacity: 1; font-weight: 600; }
.ch-sys .ch-akt { justify-content: center; margin: 0; display: none; }
.ch-sys:hover .ch-akt, .ch-sys:focus-within .ch-akt { display: flex; }
@media (hover: none) {
  .ch-akt button { opacity: 1; padding: 6px 9px; font-size: 12.5px; }
  .ch-sys .ch-akt { display: flex; }
}

/* Zitat über einer Antwort – Klick springt zum Original */
.ch-zitat { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left; border: 0; border-left: 3px solid var(--wood-dark, #b89668);
  background: #ffffffb3; border-radius: 6px; padding: 3px 9px 4px; margin: 3px 0 5px; font: inherit; font-size: 12.5px; color: var(--muted); cursor: pointer; min-width: 0; }
.ch-zitat:hover, .ch-zitat:focus-visible { background: #fff; color: var(--ink); }
.ch-zitat-wer { font-weight: 700; color: var(--ink); }
.ch-zitat-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ch-zitat-weg { cursor: default; font-style: italic; }

/* Tagestrenner */
body.gerust ul.ch-liste > li.ch-tag { display: flex; align-items: center; gap: 10px; padding: 6px 0 0; border: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
body.gerust ul.ch-liste > li.ch-tag::before, body.gerust ul.ch-liste > li.ch-tag::after { content: ""; flex: 1; border-top: 1px solid var(--line); }

/* @Erwähnungen */
.ch-erw { background: #fde6e7; color: #a3222b; border-radius: 10px; padding: 0 6px; font-weight: 600; white-space: nowrap; }
.ch-erw-ich { background: var(--red); color: #fff; }

/* Angeheftet – oben im Verlauf */
.ch-pins { background: #fffaee; border: 1px solid #f1dfb0; border-radius: 12px; padding: 7px 8px 5px 11px; margin: 2px 0 12px; }
.ch-pins-kopf { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--g-gelb-ink, #6f5300); margin-bottom: 2px; }
.ch-pins-zahl { background: #f3e1b3; border-radius: 9px; padding: 0 6px; font-size: 11px; letter-spacing: 0; }
.ch-pins ul { list-style: none; margin: 0; padding: 0; }
.ch-pins li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 4px; align-items: start; padding: 5px 0; border-top: 1px solid #f3e6c6; }
.ch-pins li:first-child { border-top: 0; }
.ch-pin-text { grid-column: 1; display: grid; gap: 1px; border: 0; background: none; text-align: left; padding: 0; font: inherit; font-size: 13.5px; color: var(--ink); cursor: pointer; min-width: 0; }
.ch-pin-wer { font-size: 12px; color: var(--muted); } .ch-pin-wer b { color: var(--ink); }
.ch-pin-inhalt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ch-pin-text:hover .ch-pin-inhalt, .ch-pin-text:focus-visible .ch-pin-inhalt { text-decoration: underline; text-underline-offset: 2px; }
.ch-pin-von { grid-column: 1; font-size: 11.5px; color: var(--muted); }
.ch-pin-x { grid-column: 2; grid-row: 1 / span 2; border: 0; background: none; color: var(--muted); font-size: 14px; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; }
.ch-pin-x:hover, .ch-pin-x:focus-visible { background: #f3e6c6; color: var(--ink); }

/* „Antwort auf …“ über dem Eingabefeld */
.ch-antw-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; background: #f6efe4; border-left: 3px solid var(--orange); border-radius: 8px; padding: 5px 6px 6px 10px; margin: 8px 0 0; font-size: 13.5px; }
.ch-antw-pfeil { color: var(--orange); font-weight: 700; }
.ch-antw-text { flex: 1 1 180px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-antw-x { border: 0; background: none; color: var(--muted); font-size: 14px; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; }
.ch-antw-x:hover, .ch-antw-x:focus-visible { background: #ead9bf; color: var(--ink); }
.ch-antw-laeuft { font-size: 12px; color: var(--muted); }
.ch-antw-tipp { flex-basis: 100%; font-size: 12px; color: var(--muted); }
.ch-antw-leiste.sendet { opacity: .8; }

/* kurz aufleuchten nach dem Springen */
@keyframes chBlink { 0%, 55% { box-shadow: 0 0 0 3px var(--yellow, #fbc926); } 100% { box-shadow: 0 0 0 3px transparent; } }
body.gerust ul.ch-liste > li.ch-blink { animation: chBlink 2s ease-out; }

/* ---------- Galerie ---------- */
dialog.ch-gal { width: min(1180px, calc(100vw - 32px)); height: min(880px, calc(100vh - 32px)); max-height: calc(100vh - 32px); overflow: hidden; padding: 0; }
dialog.ch-gal[open] { display: flex; flex-direction: column; }
.ch-gal .dk { flex: none; }
.ch-gal .dk h2 { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; min-width: 0; }
.ch-gal-kunde { font-weight: 400; color: var(--muted); font-size: 14px; }
.ch-gal-leiste { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.ch-gal-leiste:empty { display: none; }
.ch-gal-n { font-size: 11.5px; color: var(--muted); font-weight: 600; margin-left: 2px; }
.ch-gal-inhalt { flex: 1; min-height: 0; overflow: auto; padding: 4px 16px 16px; background: var(--bg); overscroll-behavior: contain; }
.ch-gal-laedt, .ch-gal-leer { padding: 24px 4px; }
.ch-gal-tag h3 { display: flex; align-items: baseline; gap: 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; margin: 16px 0 8px; }
.ch-gal-tag h3 .hinweis { text-transform: none; letter-spacing: 0; font-weight: 400; }
.ch-gal-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.ch-gk { position: relative; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; padding: 0; cursor: pointer;
  display: grid; place-items: center; font: inherit; color: var(--ink); }
.ch-gk img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ch-gk.dok { background: #fbfaf8; }
.ch-gk.dok img { object-position: top; }
.ch-gk-sym { font-size: 42px; line-height: 1; margin-bottom: 26px; }
/* unten kein Innenabstand, sonst blitzt eine dritte Zeile durch – der Rand unten übernimmt den Abstand */
.ch-gk-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 5px 7px 0; border-bottom: 5px solid transparent; font-size: 12px; line-height: 1.25; background: #fffffff2; border-top: 1px solid var(--line); text-align: left;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ch-gk-q { position: absolute; top: 5px; left: 5px; background: #ffffffe8; border-radius: 8px; padding: 1px 5px; font-size: 12px; line-height: 1.4; }
.ch-gk-play { position: absolute; inset: 0; display: grid; place-items: center; font-size: 30px; color: #fff; text-shadow: 0 2px 8px #0009; pointer-events: none; }
.ch-gk:hover, .ch-gk:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
.ch-gal-fuss { margin: 18px 0 0; }

/* Großansicht mit Blättern */
.ch-gross { position: absolute; inset: 0; z-index: 2; background: #1f1c19; color: #fff; display: flex; flex-direction: column; }
.ch-gross[hidden] { display: none; }
.ch-gross-kopf { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 16px; border-bottom: 1px solid #ffffff1f; }
.ch-gross-zahl { font-size: 12.5px; color: #cfc7bd; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ch-gross-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-gross-knoepfe { display: flex; gap: 6px; align-items: center; flex: none; }
.ch-gross-zu { border: 0; background: #ffffff1f; color: #fff; width: 40px; height: 40px; border-radius: 10px; font-size: 17px; cursor: pointer; }
.ch-gross-zu:hover, .ch-gross-zu:focus-visible { background: #ffffff38; }
.ch-gross-bild { flex: 1; min-height: 0; position: relative; display: flex; align-items: center; justify-content: center; padding: 12px 60px; }
.ch-gross-bild > img, .ch-gross-bild > video, .ch-gross-bild > iframe { position: absolute; top: 10px; bottom: 10px; left: 60px; right: 60px; width: calc(100% - 120px); height: calc(100% - 20px); object-fit: contain; display: block; }
.ch-gross-bild > iframe { border: 0; background: #525659; border-radius: 6px; }
.ch-gross-pfeil { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; width: 46px; height: 66px; border: 0; border-radius: 10px; background: #ffffff1f; color: #fff; font-size: 34px; line-height: 1; cursor: pointer; }
.ch-gross-pfeil:hover, .ch-gross-pfeil:focus-visible { background: #ffffff3d; }
.ch-gross-pfeil.links { left: 7px; } .ch-gross-pfeil.rechts { right: 7px; }
.ch-gross-fuss { flex: none; padding: 8px 16px 12px; font-size: 13px; color: #d8d1c8; border-top: 1px solid #ffffff1f; overflow-wrap: anywhere; }
.ch-gross-dok { display: grid; justify-items: center; gap: 10px; text-align: center; max-width: 560px; max-height: 100%; overflow: auto; }
.ch-gross-dok img { max-width: 100%; max-height: 52vh; border-radius: 6px; background: #fff; }
.ch-gross-dok > span:not(.ch-gross-sym) { color: #d8d1c8; font-size: 13.5px; }
.ch-gross-sym { font-size: 84px; line-height: 1; }
.ch-gross-hinweis { color: #d8d1c8; font-size: 13.5px; }
.ch-gross .btn.sec { background: #ffffff14; color: #fff; border-color: #ffffff47; }

/* Handy */
@media (max-width: 700px) {
  body.gerust ul.ch-liste > li.ch-e { margin-right: 14px; }
  body.gerust ul.ch-liste > li.ch-e.ch-ich { margin: 0 0 0 14px; }
  body.gerust ul.ch-liste > li.ch-e.ch-kunde { margin-right: 8px; }
  dialog.ch-gal { width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; border-radius: 0; margin: 0; }
  .ch-gal-leiste { padding: 8px 12px; } .ch-gal-leiste > .hinweis { display: none; }
  .ch-gal-inhalt { padding: 2px 10px 14px; }
  .ch-gal-raster { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
  .ch-gk-sym { font-size: 34px; }
  .ch-gross-bild { padding: 0; }
  .ch-gross-bild > img, .ch-gross-bild > video, .ch-gross-bild > iframe { top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; border-radius: 0; }
  .ch-gross-pfeil { width: 40px; height: 56px; background: #0000005c; }
  .ch-gross-kopf .btn { padding: 6px 9px; }
}
@media print { .ch-akt, .ch-gal-knopf, .ch-antw-leiste, .ch-pin-x { display: none !important; } }
@media (prefers-reduced-motion: reduce) { body.gerust ul.ch-liste > li.ch-blink { animation: none; box-shadow: 0 0 0 3px var(--yellow, #fbc926); } }