/* fit4school Bewerbungsplattform – modernes, helles UI */

:root {
  --primaer: #d94f2c;
  --primaer-dunkel: #b83e20;
  --primaer-hell: #fdeee9;
  --tinte: #1f2733;
  --tinte-leise: #5b6673;
  --linie: #e5e9ef;
  --flaeche: #f6f7f9;
  --weiss: #ffffff;
  --radius: 12px;
  --schatten: 0 1px 3px rgba(16, 24, 40, .07), 0 1px 2px rgba(16, 24, 40, .04);
  --schatten-hoch: 0 8px 24px rgba(16, 24, 40, .12);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--flaeche);
  color: var(--tinte);
  font-size: 15px;
  line-height: 1.5;
}

a { color: var(--primaer); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 1.5rem; margin: 0; }
h2 { font-size: 1.05rem; margin: 0 0 10px; }

/* ---------- Topbar ---------- */
.topbar {
  background: var(--weiss);
  border-bottom: 1px solid var(--linie);
  position: sticky;
  top: 0;
  z-index: 50;
}
.topbar-innen {
  display: flex;
  align-items: center;
  gap: 28px;
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 16px;
  height: 60px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand:hover { text-decoration: none; }
.brand-logo { height: 30px; width: 30px; }
.brand-text { font-weight: 700; font-size: 1.05rem; color: var(--tinte); }
.brand-sub { color: var(--primaer); font-weight: 600; }
.nav { display: flex; gap: 4px; flex: 1; }
.nav a {
  padding: 8px 14px;
  border-radius: 8px;
  color: var(--tinte-leise);
  font-weight: 500;
}
.nav a:hover { background: var(--flaeche); text-decoration: none; color: var(--tinte); }
.nav a.aktiv { background: var(--primaer-hell); color: var(--primaer-dunkel); }
.topbar-rechts { display: flex; align-items: center; gap: 12px; }
.benutzer-chip {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--primaer); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .8rem;
}
.benutzer-chip:hover { text-decoration: none; background: var(--primaer-dunkel); }
.logout { color: var(--tinte-leise); font-size: .85rem; }

.inhalt { max-width: 1560px; margin: 0 auto; padding: 24px 16px; }

/* ---------- Unternavigation (Einstellungsbereich) ---------- */
.unternav {
  display: inline-flex; gap: 6px; flex-wrap: wrap;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: 999px;
  box-shadow: var(--schatten);
  padding: 6px;
  margin-bottom: 24px;
}
.unternav a {
  padding: 8px 20px;
  border-radius: 999px;
  color: var(--tinte-leise);
  font-weight: 600;
  font-size: .9rem;
  transition: background .15s, color .15s;
}
.unternav a:hover {
  background: var(--flaeche);
  color: var(--tinte);
  text-decoration: none;
}
.unternav a.aktiv {
  background: var(--primaer);
  color: #fff;
  box-shadow: 0 1px 3px rgba(217, 79, 44, .35);
}
@media (max-width: 700px) {
  .unternav { display: flex; border-radius: 14px; }
  .unternav a { flex: 1; text-align: center; padding: 8px 10px; }
}

/* ---------- Allgemein ---------- */
.seitenkopf { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.hilfe { color: var(--tinte-leise); font-size: .85rem; }
.klein-text { color: var(--tinte-leise); font-size: .8rem; }
.fehler-text { color: #b91c1c; font-size: .8rem; }
.fliess { margin: 0; white-space: pre-line; }

.panel {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 16px;
  box-shadow: var(--schatten);
}
.panel.zentriert { text-align: center; }

.hinweis { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-size: .9rem; }
.hinweis.ok { background: #ecfdf3; color: #067647; border: 1px solid #abefc6; }
.hinweis.fehler { background: #fef3f2; color: #b42318; border: 1px solid #fecdca; }

.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .75rem; font-weight: 600; }
.badge.gruen { background: #ecfdf3; color: #067647; }
.badge.grau { background: #f2f4f7; color: #475467; }
.badge.blau { background: #eff8ff; color: #175cd3; }
.badge.orange { background: var(--primaer-hell); color: var(--primaer-dunkel); }

.chip {
  display: inline-block;
  background: var(--primaer-hell);
  color: var(--primaer-dunkel);
  border-radius: 999px;
  padding: 3px 11px;
  font-size: .78rem;
  font-weight: 600;
}
.chip.leise { background: #f2f4f7; color: #475467; }
.chip.pool { background: #eff8ff; color: #175cd3; }
.pool-notiz { color: #175cd3; }
.chip-zeile { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }

/* ---------- Buttons & Formulare ---------- */
.btn {
  display: inline-block;
  background: var(--weiss);
  border: 1px solid #d0d5dd;
  color: var(--tinte);
  border-radius: 9px;
  padding: 8px 15px;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.btn:hover { background: var(--flaeche); text-decoration: none; }
.btn.primaer { background: var(--primaer); border-color: var(--primaer); color: #fff; }
.btn.primaer:hover { background: var(--primaer-dunkel); }
.btn.klein { padding: 5px 10px; font-size: .78rem; }
.btn.gefahr { color: #b42318; border-color: #fecdca; }
.btn.gefahr:hover { background: #fef3f2; }
.btn.leise { border-color: transparent; color: var(--tinte-leise); }
.btn.breit { width: 100%; }
.link-btn { color: var(--primaer); font-weight: 600; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }

label { display: block; margin-bottom: 12px; font-size: .85rem; font-weight: 600; color: #344054; }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=number],
select, textarea {
  width: 100%;
  margin-top: 5px;
  padding: 9px 12px;
  border: 1px solid #d0d5dd;
  border-radius: 9px;
  font-size: .9rem;
  font-family: inherit;
  background: var(--weiss);
  color: var(--tinte);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primaer);
  box-shadow: 0 0 0 3px rgba(217, 79, 44, .15);
}
input.mini { width: 60px; margin: 0; padding: 5px 7px; }
.checkbox-zeile { display: flex; align-items: center; gap: 8px; font-weight: 500; margin-bottom: 6px; }
.checkbox-zeile input { width: auto; margin: 0; }
.checkbox-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 2px 14px; margin: 8px 0; }
.form-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.schmal { max-width: 420px; }
.zeilen-form { display: flex; gap: 10px; align-items: center; }
.zeilen-form input { margin: 0; flex: 1; }

/* ---------- Tabellen ---------- */
.tabelle { width: 100%; border-collapse: collapse; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten); margin-bottom: 14px; }
.tabelle th, .tabelle td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--linie); font-size: .88rem; }
.tabelle th { background: #fafbfc; color: var(--tinte-leise); font-size: .76rem; text-transform: uppercase; letter-spacing: .03em; }
.tabelle tr:last-child td { border-bottom: none; }
.tabelle tr.inaktiv td { opacity: .5; }
.tabelle.kompakt { border: none; box-shadow: none; margin: 0; }
.tabelle.kompakt td { padding: 6px 8px 6px 0; border-bottom: 1px solid #f2f4f7; }
.tabelle.kompakt td:first-child { color: var(--tinte-leise); width: 40%; }
.aktionen { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* ---------- Login / Installation ---------- */
.seite-zentriert {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.karte-schmal {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: 16px;
  box-shadow: var(--schatten-hoch);
  padding: 34px;
  width: 100%;
  max-width: 460px;
}
.karte-schmal h1 { margin-bottom: 6px; }
.karte-schmal h2 { margin-top: 20px; }
.login-logo { text-align: center; margin-bottom: 12px; }
.login-logo img { height: 52px; }
.login-fuss { margin: 16px 0 0; text-align: center; font-size: .85rem; }
.login-fuss a { color: var(--tinte-leise); text-decoration: none; }
.login-fuss a:hover { color: var(--primaer); text-decoration: underline; }

/* ---------- Dropzone ---------- */
.dropzone {
  border: 2px dashed #c9d2dd;
  border-radius: var(--radius);
  background: var(--weiss);
  padding: 22px;
  margin-bottom: 18px;
  transition: border-color .15s, background .15s;
}
.dropzone.aktiv { border-color: var(--primaer); background: var(--primaer-hell); }
.dropzone-inhalt { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.dropzone-icon {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--primaer-hell); color: var(--primaer);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; font-weight: 700;
}
.dropzone-optionen { display: flex; gap: 18px; align-items: center; margin-left: auto; flex-wrap: wrap; }
.dropzone-optionen label { margin: 0; display: flex; align-items: center; gap: 8px; }
.dropzone-optionen select { width: auto; margin: 0; }
.upload-liste { margin-top: 8px; }
.upload-eintrag {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 4px; border-top: 1px solid var(--linie);
  font-size: .85rem;
}
.upload-balken { flex: 1; height: 6px; background: #eef1f5; border-radius: 999px; overflow: hidden; }
.upload-balken > div { height: 100%; background: var(--primaer); width: 0; transition: width .2s; }
.upload-status { min-width: 130px; text-align: right; color: var(--tinte-leise); }
.upload-status.ok { color: #067647; }
.upload-status.fehler { color: #b42318; }

/* ---------- Filterleiste ---------- */
.filterleiste { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.filterleiste select, .filterleiste input { width: auto; margin: 0; }
.filterleiste input[type=search] { flex: 1; min-width: 200px; }

/* ---------- Kartenraster ---------- */
.kartenraster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(305px, 1fr));
  gap: 16px;
}
.bewerbung-karte {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 16px;
  color: var(--tinte);
  box-shadow: var(--schatten);
  transition: box-shadow .15s, transform .15s, border-color .15s;
}
.bewerbung-karte:hover {
  text-decoration: none;
  box-shadow: var(--schatten-hoch);
  transform: translateY(-2px);
  border-color: #d0d5dd;
}
.karte-status {
  position: absolute; top: 12px; right: 12px;
  background: color-mix(in srgb, var(--statusfarbe) 12%, white);
  color: var(--statusfarbe);
  font-size: .72rem; font-weight: 700;
  padding: 3px 9px; border-radius: 999px;
}
.karte-kopf { display: flex; gap: 12px; align-items: center; padding-right: 78px; }
.karte-foto {
  width: 58px; height: 58px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  border: 2px solid var(--linie);
  background: var(--flaeche);
}
.initialen {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--primaer), #e8794f);
  color: #fff; font-weight: 700; font-size: 1.05rem;
}
.karte-name { font-weight: 700; font-size: 1rem; line-height: 1.25; }
.karte-stelle { color: var(--tinte-leise); font-size: .83rem; }
.karte-info { display: flex; gap: 6px; flex-wrap: wrap; }
.karte-text { color: var(--tinte-leise); font-size: .83rem; line-height: 1.45; }
.karte-analyse {
  font-size: .8rem; color: var(--primaer-dunkel);
  background: var(--primaer-hell);
  padding: 6px 10px; border-radius: 8px;
}
.karte-analyse::before { content: '✦ '; }
.karte-analyse.fehler { background: #fef3f2; color: #b42318; }
.karte-fuss {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: auto; padding-top: 8px; border-top: 1px solid #f2f4f7;
}
.karte-meta { color: var(--tinte-leise); font-size: .76rem; }

/* ---------- Sterne ---------- */
.sterne-anzeige { display: inline-flex; align-items: center; gap: 1px; }
.stern { color: #d8dde4; font-size: .95rem; }
.stern.voll { color: #f5a623; }
.stern-wert { margin-left: 5px; font-size: .78rem; font-weight: 700; color: #8a6d1a; }
.sterne-eingabe { display: inline-flex; gap: 2px; margin: 6px 0; }
.stern-btn {
  background: none; border: none; cursor: pointer;
  font-size: 1.7rem; color: #d8dde4; padding: 0 2px;
  transition: color .1s, transform .1s;
}
.stern-btn.voll, .stern-btn.hover { color: #f5a623; }
.stern-btn:hover { transform: scale(1.15); }

/* ---------- Detailseite ---------- */
.brotkrumen { margin-bottom: 14px; font-size: .88rem; }
.aktionsleiste {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius); box-shadow: var(--schatten);
  padding: 18px 22px; margin-bottom: 18px;
}
.aktionsleiste .btn { padding: 10px 18px; }
.aktionsleiste-titel { font-weight: 700; font-size: .85rem; color: var(--tinte-leise); margin-right: 6px; }

/* ---------- Termine ---------- */
.termin-zeile {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; padding: 9px 0; border-bottom: 1px solid #f5f6f8;
  text-align: left;
}
.termin-zeile:last-of-type { border-bottom: none; }
/* ---------- Terminübersicht ---------- */
.termin-tag { margin-bottom: 26px; }
.termin-tag.vergangen { opacity: .72; }
.termin-tag-titel {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 10px; padding-bottom: 7px;
  border-bottom: 2px solid var(--primaer-hell);
}
.termin-tag-titel h2 { margin: 0; font-size: 1.05rem; }
.termin-liste {
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius); box-shadow: var(--schatten);
  overflow: hidden;
}
.termin-reihe {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px;
  border-bottom: 1px solid #f2f4f7;
}
.termin-reihe:last-child { border-bottom: none; }
.termin-reihe:hover { background: #fafbfc; }
.termin-reihe[data-href] { cursor: pointer; }
.termin-reihe[data-href]:hover .termin-name { color: var(--primaer); }
.termin-foto {
  width: 40px; height: 40px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0; border: 2px solid var(--linie);
  font-size: .78rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.termin-details { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.termin-hauptzeile, .termin-nebenzeile {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.termin-uhrzeit {
  font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--primaer-dunkel);
  background: var(--primaer-hell);
  border-radius: 6px; padding: 1px 8px; font-size: .82rem;
}
.termin-tag.vergangen .termin-uhrzeit { background: #f2f4f7; color: var(--tinte-leise); }
.termin-name { font-weight: 700; color: var(--tinte); }
.termin-name:hover { color: var(--primaer); text-decoration: none; }
.trenner { color: #c9d2dd; }
.termin-art-select {
  width: auto; margin: 0;
  padding: 2px 24px 2px 9px;
  font-size: .78rem; font-weight: 600;
  border-radius: 999px;
  background-color: #f2f4f7; border-color: transparent;
  color: #475467;
  cursor: pointer;
}
.termin-art-select:hover { border-color: #d0d5dd; }
.bestaetigt-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .74rem; font-weight: 600; color: var(--tinte-leise);
  cursor: pointer; margin: 0; white-space: nowrap;
}
.bestaetigt-toggle input { width: auto; margin: 0; cursor: pointer; }
.termin-art-select.mini-art {
  font-size: .74rem; font-weight: 600;
  padding: 3px 22px 3px 9px;
  width: auto; max-width: none;
  white-space: nowrap;
}
.termin-aktion-select.mini-art {
  width: 118px; /* immer gleich breit – angezeigt wird stets «Aktionen …» */
}
.art-gespeichert {
  font-size: .7rem; font-weight: 700; color: #067647;
  white-space: nowrap;
  animation: artOk 1.8s ease forwards;
}
@keyframes artOk { 0% { opacity: 0; } 12% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; } }
.termin-aktionen { display: flex; gap: 6px; margin-left: auto; flex-shrink: 0; }
@media (max-width: 700px) {
  .termin-aktionen { flex-direction: column; }
}

.teams-link { font-size: .8rem; font-weight: 600; }
.teams-link::before { content: '↗ '; }
.termin-neu { margin-top: 10px; font-size: .85rem; }
.termin-neu summary { cursor: pointer; color: var(--primaer); font-weight: 600; margin-bottom: 8px; }
.zusage-btn { color: #067647; border-color: #abefc6; }
.zusage-btn:hover { background: #ecfdf3; }
.absage-btn { color: #b42318; border-color: #fecdca; }
.absage-btn:hover { background: #fef3f2; }
.hr-btn { background: var(--primaer); border-color: var(--primaer); color: #fff; }
.hr-btn:hover { background: var(--primaer-dunkel); }
.dialog.breit { max-width: 720px; }

/* ---------- Anhang-Liste im E-Mail-Dialog ---------- */
.anhang-liste {
  display: flex; flex-direction: column; gap: 2px;
  margin: 6px 0 8px;
  border: 1px solid var(--linie); border-radius: 9px;
  padding: 8px 12px;
  background: #fafbfc;
}
.anhang-liste .checkbox-zeile {
  width: 100%; margin: 0; padding: 4px 0;
}
.anhang-liste .anhang-name {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- E-Mail-Vorlagen: ausklappbare Blöcke ---------- */
.vorlage-block {
  border: 1px solid var(--linie);
  border-radius: 10px;
  margin-bottom: 10px;
  background: #fafbfc;
}
.vorlage-block summary {
  cursor: pointer;
  padding: 12px 16px;
  font-weight: 700;
  color: var(--tinte);
}
.vorlage-block summary:hover { color: var(--primaer); }
.vorlage-block[open] summary { border-bottom: 1px solid var(--linie); }
.vorlage-block label { padding: 0 16px; }
.vorlage-block label:first-of-type { margin-top: 12px; }
.vorlage-block label:last-of-type { margin-bottom: 14px; }
.detail-layout { display: grid; grid-template-columns: 330px 1fr; gap: 18px; align-items: start; }
.detail-foto {
  width: 130px; height: 130px; border-radius: 50%;
  object-fit: cover; border: 3px solid var(--linie);
  margin: 4px auto 12px;
}
div.detail-foto { display: flex; font-size: 2.2rem; }
.detail-name { font-size: 1.3rem; margin-bottom: 2px; }
.detail-stelle { color: var(--tinte-leise); margin-bottom: 10px; }
.detail-status { margin: 16px 0 6px; text-align: left; }
.rating-block { border-top: 1px solid var(--linie); margin-top: 14px; padding-top: 12px; }
.rating-details { margin-top: 8px; font-size: .82rem; text-align: left; }
.rating-details summary { cursor: pointer; color: var(--tinte-leise); font-weight: 600; }
#rating-leer span { color: var(--tinte-leise); font-style: italic; }
.rating-zeile { display: flex; justify-content: space-between; padding: 3px 0; color: var(--tinte-leise); }
.rating-zeile span:last-child { color: #f5a623; }

.cv-eintrag { display: flex; gap: 14px; padding: 7px 0; border-bottom: 1px solid #f5f6f8; font-size: .9rem; }
.cv-eintrag:last-child { border-bottom: none; }
.cv-zeit { min-width: 130px; color: var(--tinte-leise); font-size: .8rem; padding-top: 2px; }

.dokument-liste { display: flex; flex-direction: column; }
.dok-drop-hinweis {
  border: 1px dashed #c9d2dd;
  border-radius: 9px;
  padding: 8px 12px;
  margin-bottom: 10px;
  color: var(--tinte-leise);
  font-size: .8rem;
  transition: border-color .15s, background .15s, color .15s;
}
#dok-panel.drop-aktiv { border-color: var(--primaer); box-shadow: 0 0 0 3px rgba(217, 79, 44, .15); }
#dok-panel.drop-aktiv .dok-drop-hinweis {
  border-color: var(--primaer);
  background: var(--primaer-hell);
  color: var(--primaer-dunkel);
  font-weight: 600;
}
.dokument-zeile {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid #f5f6f8;
  flex-wrap: wrap;
}
.dokument-zeile:last-child { border-bottom: none; }
.dokument-link { flex: 1; min-width: 180px; font-weight: 600; }
.dokument-icon { margin-right: 6px; }

/* ---------- Kommentare ---------- */
.kommentar-eingabe { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.kommentar-eingabe textarea { margin: 0; }
.kommentar-eingabe .btn { align-self: flex-end; }
.kommentar { padding: 10px 0; border-bottom: 1px solid #f5f6f8; }
.kommentar:last-child { border-bottom: none; }
.kommentar.system { color: var(--tinte-leise); font-size: .8rem; padding: 5px 0; }
.system-punkt { color: var(--primaer); }
.kommentar-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.kommentar-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: #eef1f5; color: var(--tinte-leise);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .68rem; font-weight: 700;
}
.kommentar-text { white-space: pre-line; font-size: .9rem; }
.kommentar-aktionen { margin-left: auto; display: inline-flex; gap: 2px; }
.kommentar-loeschen, .kommentar-bearbeiten {
  background: none; border: none;
  color: #c3cad3; cursor: pointer; font-size: 1.1rem;
}
.kommentar-bearbeiten { font-size: .95rem; }
.kommentar-loeschen:hover { color: #b42318; }
.kommentar-bearbeiten:hover { color: var(--primaer); }
.kommentar-edit textarea { margin-top: 4px; }
.bearbeitet-marker { font-style: italic; }
#konditionen-text { margin-top: 0; }

/* ---------- Dialoge ---------- */
.dialog {
  border: none; border-radius: 16px;
  box-shadow: var(--schatten-hoch);
  padding: 26px; width: 94%; max-width: 560px;
}
.dialog::backdrop { background: rgba(16, 24, 40, .45); }
.dialog-aktionen { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }

.leer { text-align: center; padding: 60px 20px; color: var(--tinte-leise); }

/* ---------- Mail-Testprotokoll ---------- */
.mail-protokoll {
  background: #1f2733; color: #e9edf3;
  border-radius: 9px; padding: 12px 14px;
  font-size: .78rem; line-height: 1.5;
  overflow-x: auto; white-space: pre-wrap; word-break: break-word;
  margin: 8px 0 0;
}

/* ---------- Verlauf (ausklappbar) ---------- */
.verlauf-block > summary {
  display: flex; align-items: baseline; gap: 10px;
  cursor: pointer; list-style: none;
}
.verlauf-block > summary::-webkit-details-marker { display: none; }
.verlauf-block > summary h2 { margin: 0; }
.verlauf-block > summary::before {
  content: '▸';
  color: var(--primaer);
  font-size: .9rem;
  transition: transform .15s;
}
.verlauf-block[open] > summary::before { content: '▾'; }
.verlauf-block > summary:hover h2 { color: var(--primaer); }
.verlauf-block[open] > summary { margin-bottom: 10px; }

/* ---------- Hilfeseite ---------- */
.hilfe-thema h2 {
  font-size: 1.15rem;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--primaer-hell);
}
.hilfe-thema article { padding: 6px 0; }
.hilfe-thema article h3 { font-size: .95rem; margin: 10px 0 4px; }
.hilfe-thema article p { margin: 0 0 6px; color: #3d4754; }
.hilfe-thema mark {
  background: #fde68a;
  border-radius: 3px;
  padding: 0 2px;
}
#ergebnis-bereich { transition: opacity .12s; }
#ergebnis-bereich.laedt { opacity: .45; }

/* ---------- Standort-Gruppen ---------- */
.standort-gruppe { margin-bottom: 30px; }
.standort-titel {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 12px; padding-bottom: 8px;
  border-bottom: 2px solid var(--primaer-hell);
  flex-wrap: wrap;
}
.standort-titel h2 {
  margin: 0; font-size: 1.25rem; color: var(--tinte);
}
.standort-leer {
  background: var(--weiss); border: 1px dashed var(--linie);
  border-radius: var(--radius); padding: 18px; margin: 0;
}

/* Unterteilung nach Status: Spalten nebeneinander (Pipeline pro Standort) */
.status-spalten {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
}
.status-spalte {
  flex: 1 1 280px;
  min-width: 228px;
  max-width: 340px;
}
.status-titel {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 12px; padding-bottom: 7px;
  border-bottom: 2px solid color-mix(in srgb, var(--statusfarbe, #6b7280) 35%, white);
  font-size: .9rem; font-weight: 700;
  color: var(--statusfarbe, var(--tinte-leise));
}
.status-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-punkt {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--statusfarbe, var(--tinte-leise));
  flex-shrink: 0;
}
.status-anzahl {
  flex-shrink: 0;
  font-size: .75rem; font-weight: 700;
  padding: 1px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--statusfarbe, #6b7280) 12%, white);
  color: var(--statusfarbe, var(--tinte-leise));
}
.spalten-karten { display: flex; flex-direction: column; gap: 10px; }

/* Kompaktere Karten in der Spaltenansicht; der zarte Rand links zeigt den Status */
.status-spalte .bewerbung-karte {
  gap: 7px;
  padding: 12px 13px;
  border-left: 3px solid color-mix(in srgb, var(--statusfarbe, #6b7280) 25%, white);
}
.status-spalte .karte-kopf { padding-right: 0; gap: 10px; }
.status-spalte .karte-foto { width: 44px; height: 44px; border-width: 1px; }
.status-spalte .initialen { font-size: .9rem; }
.status-spalte .karte-name { font-size: .94rem; }
.status-spalte .karte-stelle { font-size: .79rem; }
.status-spalte .karte-info { gap: 5px; }
.status-spalte .karte-text {
  font-size: .8rem; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.status-spalte .karte-fuss { padding-top: 6px; }
.status-spalte .karte-meta { font-size: .73rem; }
.status-spalte .chip { padding: 1px 7px; font-size: .72rem; }

@media (max-width: 900px) {
  .detail-layout { grid-template-columns: 1fr; }
  .form-raster { grid-template-columns: 1fr; }
  .nav { overflow-x: auto; }
  .inhalt { padding: 14px; }
  .topbar-innen { gap: 14px; }
  /* Auf schmalen Bildschirmen stehen die Status-Spalten untereinander */
  .status-spalten { flex-direction: column; overflow-x: visible; gap: 22px; }
  .status-spalte { flex: 1 1 auto; max-width: none; min-width: 0; width: 100%; }
}