/* ======================================================================
   Arbeitsautomat.de – Bewerber-Extras
   ----------------------------------------------------------------------
   Merken-Stern, Reaktions-Chip, Suchagent-Knopf, Statistik, Schrittleiste,
   Merkliste und Suchagenten. Eingebunden in profil.html, jobs.html und
   stelle.php – jeweils NACH styles.css, weil einzelne Regeln dortige
   Basisregeln (.btn, .chip) überschreiben. Nur Tokens aus styles.css.
   ====================================================================== */

/* Elemente, die per hidden-Attribut ein- und ausgeblendet werden. .btn und
   die Flex-Leisten setzen selbst ein display – das schlägt das hidden des
   Browsers, der Knopf bliebe also sichtbar. */
.merk-stern[hidden], .merk-knopf[hidden], .suchagent-leiste[hidden],
.suchagent-leiste [hidden], .agent-hinweis[hidden] { display: none; }

/* ---------- Merken-Stern (Job-Karten, Merkliste) ---------- */
.merk-stern {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--tinte-40);
  font-family: var(--font); font-size: 1.35rem; line-height: 1; cursor: pointer;
  transition: color var(--dauer-kurz) var(--kurve), background-color var(--dauer-kurz) var(--kurve),
              transform var(--dauer-kurz) var(--kurve);
}
.merk-stern:hover { background: var(--bg); color: var(--gelb-dunkel); }
.merk-stern[aria-pressed="true"], .merk-stern.an { color: var(--gelb-dunkel); }
.merk-stern:active { transform: scale(.88); }
.merk-stern:focus-visible { outline: 3px solid var(--blau); outline-offset: 2px; }
.merk-stern[disabled] { cursor: progress; }

/* Auf der Karte oben rechts, außerhalb des Kopf-Flusses: Der Kopf trägt
   schon Remote-Chip und NEU-Abzeichen, ein viertes Flex-Kind würde dort je
   nach Kombination woanders landen. Der Kopf hält dafür rechts Platz frei. */
.job-karte .merk-stern { position: absolute; top: 12px; right: 12px; z-index: 1; }
.job-karte.mit-stern .kopf { padding-right: 34px; }

/* ---------- Reaktions-Chip (Job-Karte) ---------- */
.job-reaktion { margin: 0; }
.job-reaktion .chip { display: inline-block; font-size: .8rem; padding: 4px 11px; }

/* ---------- Stellenbörse: „Als Suchagent speichern" ---------- */
.suchagent-leiste {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin: -14px 0 22px;
}
.suchagent-leiste .btn { white-space: normal; text-align: center; }

/* ---------- Stellenseite: Merken neben „Jetzt bewerben" ---------- */
.bewerben-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
/* Bewerben nimmt fast allen Platz; passt beides nicht nebeneinander, bricht
   Merken in eine eigene Zeile um und füllt sie. */
.bewerben-knoepfe [type="submit"] { flex: 999 1 190px; }
.merk-knopf { flex: 1 0 auto; padding-left: 20px; padding-right: 20px; }
.merk-knopf .merk-symbol { color: var(--tinte-40); transition: color var(--dauer-kurz) var(--kurve); }
.merk-knopf[aria-pressed="true"] .merk-symbol { color: var(--gelb-dunkel); }
.firma-reaktion { display: inline-block; margin-top: 2px; font-size: .88rem; color: var(--tinte-60); }

/* ---------- Profil: Sprungziele ----------
   Die Kopfzeile klebt oben – ohne Abstand landete eine Karte, zu der eine
   Mail oder ein Hinweis springt, mit ihrer Überschrift darunter. */
#statistik, #skills, #merkliste, #suchagenten, #benachrichtigungen { scroll-margin-top: 92px; }

/* ---------- Profil: Statistik ---------- */
.stat-kacheln {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px; margin-bottom: 22px;
}
.stat-kachel { background: var(--bg); border-radius: var(--radius-klein); padding: 14px 16px; min-width: 0; }
.stat-zahl {
  font-size: 1.9rem; font-weight: 800; line-height: 1.1; color: var(--tinte);
  font-variant-numeric: tabular-nums;
}
.stat-titel { font-size: .88rem; font-weight: 700; color: var(--tinte-60); margin-top: 4px; line-height: 1.35; }
.stat-unter { font-size: .88rem; color: var(--tinte-60); line-height: 1.4; }
.stat-klein { display: block; font-size: .78rem; color: var(--tinte-40); margin-top: 2px; }

.wochen-titel { font-size: .88rem; font-weight: 700; color: var(--tinte-60); margin: 0 0 10px; }
/* Fläche und Beschriftung als zwei Raster mit gleichen Spalten: So läuft
   die Grundlinie durch, statt an jedem Spaltenabstand zu reißen. */
.wochen-flaeche, .wochen-kw { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0 6px; }
.wochen-flaeche { height: 90px; border-bottom: 1px solid var(--linie); }
.woche { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 0; }
.woche-wert {
  font-size: .8rem; font-weight: 800; line-height: 1; color: var(--blau);
  font-variant-numeric: tabular-nums; margin-bottom: 4px;
}
.woche-balken {
  display: block; width: 100%; max-width: 28px; background: var(--blau); opacity: .35;
  border-radius: calc(var(--radius-klein) / 2.5) calc(var(--radius-klein) / 2.5) 0 0;
  transform-origin: bottom; animation: woche-wachsen var(--dauer-lang) var(--kurve) both;
}
.woche.aktuell .woche-balken { opacity: 1; }
/* Null ist ein Wert, keine Lücke: ein Strich auf der Grundlinie. */
.woche-balken.null { height: 2px; background: var(--linie); opacity: 1; border-radius: 0; animation: none; }
@keyframes woche-wachsen { from { transform: scaleY(0); } }
/* Bei sehr schmaler Breite bricht „KW 41" lieber zweizeilig um, als sich
   mit der Nachbarspalte zu überlappen. */
.wochen-kw span {
  font-size: .75rem; line-height: 1.25; color: var(--tinte-40); text-align: center;
  margin-top: 6px; min-width: 0; overflow-wrap: normal;
}
.wochen-leer { font-size: .88rem; color: var(--tinte-60); margin: 10px 0 0; }
.stat-tipp {
  margin: 18px 0 0; padding: 12px 14px; font-size: .92rem; line-height: 1.5;
  background: var(--bg); border-radius: var(--radius-klein);
}

/* ---------- Profil: Schrittleiste je Bewerbung ---------- */
.schrittleiste { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.schritt {
  position: relative; display: flex; align-items: center; gap: 10px; min-width: 0;
  font-size: .85rem; line-height: 1.4; color: var(--tinte-40);
}
.schritt-punkt {
  flex: none; width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--linie); background: var(--weiss);
}
.schritt.erreicht { color: var(--tinte); }
.schritt.erreicht .schritt-punkt { background: var(--blau); border-color: var(--blau); }
.schritt.aktuell .schritt-punkt { outline: 2px solid var(--blau); outline-offset: 2px; }
.schritt.zusage .schritt-punkt { background: var(--gruen); border-color: var(--gruen); outline-color: var(--gruen); }
/* Absage bewusst grau statt rot: Eine Absage ist kein Fehler der Person. */
.schritt.absage .schritt-punkt { background: var(--tinte-40); border-color: var(--tinte-40); outline-color: var(--tinte-40); }
.schritt-name { font-weight: 700; }
.schritt-datum { font-size: .78rem; color: var(--tinte-40); font-variant-numeric: tabular-nums; }
/* Verbindungslinie zum nächsten Punkt – blau, sobald der nächste Schritt
   erreicht ist. Senkrecht: vom Punkt nach unten bis zum nächsten Punkt. */
.schritt:not(:last-child)::after {
  content: ''; position: absolute; left: 4.5px; width: 1px;
  top: calc(50% + 8px); bottom: calc(-50% - 2px); background: var(--linie);
}
.schritt.weiter::after { background: var(--blau); }
@media (min-width: 480px) {
  .schrittleiste { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .schritt { flex-direction: column; align-items: flex-start; gap: 5px; padding-right: 8px; }
  .schritt-datum { display: block; }
  .schritt:not(:last-child)::after { left: 17px; right: 6px; top: 4.5px; bottom: auto; width: auto; height: 1px; }
}

/* ---------- Profil: Merkliste ---------- */
.merk-zeile {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  padding: 13px 0; border-bottom: 1px solid var(--linie);
}
.merk-zeile:last-child { border-bottom: 0; }
.merk-info { flex: 1 1 220px; min-width: 0; }
.merk-titel { font-weight: 700; overflow-wrap: anywhere; }
.merk-meta { font-size: .9rem; color: var(--tinte-60); overflow-wrap: anywhere; }
.merk-unten { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 4px; }
.merk-datum { font-size: .82rem; color: var(--tinte-40); }
.merk-zeile .chip, .agent-zeile .chip { font-size: .78rem; padding: 3px 10px; }
.chip.grau { color: var(--tinte-60); }
.merk-aktionen { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* ---------- Profil: Suchagenten ---------- */
.agent-zaehler { font-size: .85rem; font-weight: 700; color: var(--tinte-40); margin-left: 6px; white-space: nowrap; }
.agent-hinweis { margin-bottom: 14px; }
.agent-zeile { display: grid; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--linie); }
.agent-zeile:last-child { border-bottom: 0; }
.agent-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.agent-name { font-weight: 700; overflow-wrap: anywhere; }
.agent-zeile .chips { margin: 0; gap: 6px; }
.agent-zeile .chips .chip { overflow-wrap: anywhere; }
.agent-aktionen { display: flex; flex-wrap: wrap; gap: 8px; }
.agent-loeschen { color: var(--rot); border-color: var(--rot); }

/* ---------- Reduzierte Bewegung ----------
   Bleibt der letzte Block dieser Datei – wie in styles.css: Was weiter oben
   bewegt wird, steht hier still. */
@media (prefers-reduced-motion: reduce) {
  .merk-stern, .merk-knopf .merk-symbol { transition: none; }
  .merk-stern:active { transform: none; }
  .woche-balken { animation: none; }
}