html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}
.anmelden-karte {
  width: 100%;
  max-width: 400px;
}

.anydesk-symbol {
  color: #ef443b;
  display: inline-flex;
  vertical-align: -2px;
  margin-left: .35rem;
}

.anydesk-symbol:hover {
  color: #c62d25;
}

/* Bildgröße im Editor (editor.js): Rahmen um das gewählte Bild, Größenknöpfe und Anfasser. */
.editor-bildhuelle { position: relative; }
.bild-auswahl { position: absolute; display: none; border: 2px solid var(--bs-primary); border-radius: .25rem; pointer-events: none; z-index: 5; }
.bild-groessen { position: absolute; top: .3rem; left: .3rem; display: flex; gap: .2rem; pointer-events: auto; background: rgba(255, 255, 255, .95);
  border: 1px solid var(--bs-border-color); border-radius: .375rem; padding: .15rem; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); }
.bild-groessen button { border: 0; background: transparent; font-size: .75rem; padding: .1rem .4rem; border-radius: .25rem; }
.bild-groessen button:hover { background: var(--bs-primary); color: #fff; }
.bild-anfasser { position: absolute; right: -7px; bottom: -7px; width: 14px; height: 14px; background: var(--bs-primary); border: 2px solid #fff;
  border-radius: 3px; cursor: nwse-resize; pointer-events: auto; touch-action: none; }

.editor-inhalt {
  min-height: 12rem;
  max-height: 60vh;
  overflow-y: auto;
  outline: none;
}

.editor-inhalt img,
.leistung-beschreibung img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--bs-border-color);
  border-radius: .25rem;
  margin: .25rem 0;
}

.leistung-beschreibung {
  overflow-wrap: anywhere;
}

.leistung-beschreibung > :last-child {
  margin-bottom: 0;
}

/* Tagesleiste (Zeitstrahl waagrecht, Dashboard und /Zeitstrahl) */
.tagesleiste { --tl-name: 6.5rem; font-size: .75rem; user-select: none; }
.tl-zeile { display: grid; grid-template-columns: var(--tl-name) 1fr; align-items: stretch; }
.tl-zeile + .tl-zeile { border-top: 1px solid var(--bs-border-color-translucent); }
.tl-name { padding: .3rem .5rem .3rem 0; color: var(--bs-secondary-color); white-space: nowrap; }
.tl-bahn { position: relative; min-height: 1.7rem; background: var(--bs-tertiary-bg); }
.tl-achse .tl-bahn { background: none; min-height: 1.2rem; }
.tl-stunde { position: absolute; top: 0; transform: translateX(-50%); color: var(--bs-secondary-color); }
.tl-stunde:first-child { transform: none; }
.tl-linie { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--bs-border-color); }
.tl-jetzt { position: absolute; top: 0; bottom: 0; border-left: 2px solid #dc3545; z-index: 3; }
.tl-eintrag-huelle { position: absolute; top: .2rem; bottom: .2rem; min-width: .7rem; }
.tl-eintrag-huelle > .tl-eintrag { position: static; width: 100%; height: 100%; }
.tl-eintrag { position: absolute; top: .2rem; bottom: .2rem; min-width: .7rem; display: flex; align-items: center; justify-content: center;
  border-radius: .2rem; border: 1px solid transparent; padding: 0; overflow: hidden; color: #fff; font-size: .7rem; text-decoration: none; cursor: pointer; }
.tl-eintrag:hover { z-index: 4; box-shadow: 0 .1rem .4rem rgba(0,0,0,.35); }
.tl-leistung { background: #4f6bed; border-color: #3b55d1; }
.tl-geplant { background: #c5b3e6; border-color: #8f6fd1; border-style: dashed; color: #3d2a6b; }
.tl-abgesagt { background: var(--bs-secondary-bg); color: var(--bs-secondary-color); text-decoration: line-through; }
.tl-gebucht { background: #20a39e; border-color: #178581; opacity: .55; }
.tl-offen { background: #20a39e; border-color: #0d6e6a; box-shadow: inset 0 0 0 2px #ffc107; }
.tl-luecke { background: repeating-linear-gradient(45deg, #e5534b 0 6px, #f28b85 6px 12px); border-color: #c93c35; opacity: .8; }
.tl-legende { display: inline-block; width: 1rem; height: .7rem; vertical-align: middle; border-radius: .15rem; position: static; }

/* Ticketlisten im Dashboard, gruppiert nach Abteilung */
.ticketliste .ti-rahmen { max-height: 70vh; overflow-y: auto; }
.ti-gruppe { background: #3d6ea8; color: #fff; font-size: .8rem; font-weight: 600; padding: .2rem .6rem; cursor: pointer; }
.ti-neu { color: #ffd6d6; }
.ticketliste-faellig { border-color: #fd7e14; }
.ticketliste-faellig .card-header { background: #fff1e0; color: #8a4500; }
.ticketliste-faellig .ti-zeile { background: #fffaf3; }
.ti-notiz { font-size: .75rem; color: #8a4500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ti-zeile { display: flex; align-items: center; gap: .6rem; padding: .3rem .6rem .3rem 0; border-bottom: 1px solid var(--bs-border-color-translucent);
  text-decoration: none; color: var(--bs-body-color); font-size: .85rem; }
.ti-zeile:hover { background: var(--bs-tertiary-bg); }
.ti-prio { align-self: stretch; width: .4rem; flex: none; background: #adb5bd; }
.ti-prio-hoch { background: #dc3545; }
.ti-prio-mittel { background: #fd7e14; }
.ti-prio-niedrig { background: #adb5bd; }
.ti-symbol { flex: none; width: 1.2rem; text-align: center; color: #3d6ea8; font-size: 1rem; }
.ti-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.ti-kopf, .ti-betreff { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ti-wer { flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: #e7eefb; color: #3d6ea8; font-size: .7rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center; }
.ti-niemand { background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); }
.ti-datum { flex: none; font-size: .75rem; color: var(--bs-secondary-color); }
.ti-st-neu { color: #dc3545; }
.ti-st-arbeit { color: #0d6efd; }
.ti-st-warte { color: #fd7e14; }
.ti-st-erledigt { color: #198754; }
.verlauf-mail { border-left: 3px solid #3d6ea8; }
.verlauf-neu { background: #fff5f5; border-left-color: #dc3545; }

/* Ticketdetail: Karten, Einträge mit Symbol im Kreis, Filter-Chips, Log-Seitenleiste */
.text-umbruch { white-space: pre-line; overflow-wrap: anywhere; }
/* Titelzeile mit Nummer, Status und Knöpfen bleibt beim Scrollen oben stehen (über die volle Breite des Inhalts). */
.ticket-titel { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: -.5rem -1.5rem 1rem; padding: .5rem 1.5rem;
  position: sticky; top: 0; z-index: 1020; background: var(--bs-body-bg); border-bottom: 1px solid var(--bs-border-color-translucent);
  box-shadow: 0 2px 4px rgba(15, 23, 42, .05); }
.ticket-knoepfe { display: flex; flex-wrap: wrap; gap: .35rem; margin-left: auto; }
.ticket-karte { margin-bottom: 1rem; border-color: #e5e7eb; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.ticket-karte > .card-header { background: none; font-weight: 600; border-bottom-color: #eef0f3; }
.karte-wichtig { border-left: 4px solid var(--bs-primary); }
.ticket-kopf { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: .35rem .75rem; margin: 0; }
.ticket-kopf dt { color: var(--bs-secondary-color); font-weight: normal; font-size: .875rem; }
.ticket-kopf dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.ticket-kontakt { display: flex; flex-wrap: wrap; gap: .1rem .75rem; }
/* Fehlerzusammenfassung (asp-validation-summary) nur zeigen, wenn es Fehler gibt; leer trägt sie validation-summary-valid. */
.validation-summary-valid { display: none; }

/* Vorschläge beim Tippen eines Namens in „An“/„CC“ (ansprechpartner.js). */
.adress-vorschlaege { top: 100%; left: 0; width: 100%; margin-top: .125rem; max-height: 16rem; overflow-y: auto; }
.adress-vorschlaege .dropdown-item { white-space: normal; }
/* Editor für den Mailtext etwas höher. */
.mail-editor { min-height: 16rem; }

/* Ansprechpartner zur Auswahl in der Mail (ansprechpartner.js). */
.ap-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.ap-chip { display: inline-flex; align-items: stretch; border: 1px solid #cbd5e1; border-radius: 999px; overflow: hidden; font-size: .8rem; background: #fff; }
.ap-chip button { border: 0; background: transparent; padding: .1rem .55rem; color: var(--bs-body-color); }
.ap-chip .ap-chip-bearbeiten { border-left: 1px solid #e2e8f0; padding: .1rem .45rem; color: var(--bs-secondary-color); }
.ap-chip button:hover { background: var(--bs-tertiary-bg); }
.ap-chip .ap-chip-wahl.gewaehlt { background: var(--bs-primary); color: #fff; }
.ap-chip .ap-chip-wahl.gewaehlt .text-muted { color: rgba(255, 255, 255, .8) !important; }

/* Ablagefläche für Dateien (Drag & Drop, site.js). */
.dateien-ablage { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .3rem .5rem; padding: 1rem;
  border: 2px dashed var(--bs-border-color); border-radius: .5rem; color: var(--bs-secondary-color); cursor: pointer; text-align: center; margin: 0; }
.dateien-ablage:hover { background: var(--bs-tertiary-bg); }
.dateien-ablage.ueber { border-color: var(--bs-primary); background: rgba(13, 110, 253, .06); color: var(--bs-primary); }
.dateien-ablage.laedt { opacity: .6; pointer-events: none; }
.dateien-ablage .bi { font-size: 1.3rem; }
.dateien-auswahl { flex-basis: 100%; color: var(--bs-body-color); }
.dateien-auswahl:empty { display: none; }
/* Durchsuchbare Auswahl (site.js): ein Eingabefeld im Aussehen eines select, darunter die passenden Einträge. */
.auswahl-kombi { position: relative; }
.auswahl-kombi .auswahl-liste { top: 100%; left: 0; width: 100%; margin-top: .125rem; max-height: 18rem; overflow-y: auto; }
.auswahl-kombi .auswahl-liste .dropdown-item { white-space: normal; }
.ticket-beschreibung-titel { color: var(--bs-secondary-color); font-size: .875rem; margin-bottom: .15rem; }
.ticket-beschreibung { overflow-wrap: anywhere; }
.ticket-beschreibung.eingeklappt { max-height: 7.5em; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent); mask-image: linear-gradient(to bottom, #000 60%, transparent); }
@media (max-width: 575.98px) {
  .ticket-kopf { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ticket-kopf dd { margin-bottom: .5rem; }
}
.wiedervorlage-kasten { background: #fffbeb; border: 1px solid #fde68a; border-radius: .5rem; padding: .5rem .75rem; }
.wiedervorlage-formular { margin-top: .5rem; }
/* Verlauf und „Wichtig“: jeder Eintrag als eigene Karte mit farbigem Streifen je Art, auf grauem Grund. */
#verlauf, #wichtig { background: var(--bs-tertiary-bg); }
#verlauf > .card-header, #wichtig > .card-header { background: var(--bs-body-bg); }
.eintrag { --typ: #94a3b8; display: flex; gap: .75rem; margin: .65rem .75rem; padding: .7rem .9rem; background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color); border-left: 4px solid var(--typ); border-radius: .5rem; box-shadow: 0 1px 2px rgba(15, 23, 42, .06); }
.eintrag-kommentar { --typ: #dc6b6b; }
.eintrag-mail { --typ: #6366f1; }
.eintrag-mail-aus { --typ: #94a3d8; }
.eintrag-leistung { --typ: #22a35a; }
.eintrag-termin { --typ: #7c3aed; }
.eintrag-typ { color: var(--typ); font-weight: 700; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; margin-right: .2rem; }
.eintrag-symbol { width: 2.1rem; height: 2.1rem; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: 1rem; }
.sym-kommentar { background: #fee2e2; color: #b91c1c; }
.sym-mail { background: #e0e7ff; color: #3730a3; }
.sym-leistung { background: #dcfce7; color: #15803d; }
.sym-termin { background: #ede9fe; color: #6d28d9; }
.eintrag-inhalt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.eintrag-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .4rem; font-size: .8rem; color: var(--bs-secondary-color);
  padding-bottom: .4rem; margin-bottom: .5rem; border-bottom: 1px solid var(--bs-border-color-translucent); }
.eintrag-inhalt .leistung-beschreibung p { margin-bottom: .4rem; }
.eintrag-kopf b, .eintrag-kopf a.fw-bold { color: var(--bs-body-color); font-size: .875rem; }
.eintrag-aktionen { margin-left: auto; display: inline-flex; flex-wrap: wrap; gap: .6rem; }
.eintrag-aktionen .btn-link { font-size: .8rem; text-decoration: none; }
.eintrag-abgesagt .eintrag-inhalt { opacity: .6; }
.eintrag-anhaenge { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }
.mail-text { overflow-x: auto; }
.mail-text img { max-width: 100%; height: auto; }
.mail-text table { max-width: 100%; }
/* Lange Texte (Mails, Beschreibung) eingeklappt; ticket.js setzt die Klasse nur, wenn der Text wirklich länger ist. */
.einklappbar.eingeklappt { max-height: 12rem; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent); mask-image: linear-gradient(to bottom, #000 65%, transparent); }
.eintrag.verlauf-neu { --typ: #dc3545; background: #fff5f5; }
.filter-chip, .datei-chip { border: 1px solid #cbd5e1; border-radius: 999px; padding: .1rem .65rem; font-size: .8rem; background: #fff; color: var(--bs-body-color); text-decoration: none; }
.datei-chip:hover { background: var(--bs-tertiary-bg); }
.filter-chip.an { background: #1f2937; border-color: #1f2937; color: #fff; }
.chip-anzahl { font-weight: 600; margin-left: .15rem; }
.leistungstabelle tbody tr[data-href] { cursor: pointer; }
.leistungstabelle th { color: var(--bs-secondary-color); font-weight: 500; }
.log-leiste { --bs-offcanvas-width: 420px; max-width: 100%; }
.log-eintrag { font-size: .875rem; padding: .45rem 0; border-bottom: 1px solid #f1f5f9; }
.log-eintrag small { display: block; }
.log-eintrag mark { background: #fde68a; padding: 0; }