/* =========================================================================
   KPJ-Planer - Stylesheet
   Ruhige, klinisch-klare Optik: viel Weissraum, ein Blau als Akzent.
   ========================================================================= */

:root {
  --bg: #f4f6fb;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --surface-3: #eef2f7;
  --border: #e3e8f0;
  --border-strong: #cbd5e1;
  --text: #0f172a;
  --text-muted: #64748b;
  --text-faint: #94a3b8;
  --accent: #1d4ed8;
  --accent-soft: #e8efff;
  --accent-text: #1e40af;
  --ok: #047857;
  --ok-soft: #dcfce7;
  --warn: #b45309;
  --warn-soft: #fef3c7;
  --danger: #b91c1c;
  --danger-soft: #fee2e2;
  --violet: #6d28d9;
  --violet-soft: #ede9fe;
  --teal: #0f766e;
  --teal-soft: #ccfbf1;

  --radius: 14px;
  --radius-sm: 9px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow: 0 6px 20px -8px rgba(15, 23, 42, .18), 0 1px 3px rgba(15, 23, 42, .05);
  --shadow-lg: 0 24px 60px -20px rgba(15, 23, 42, .35);
  --sidebar-w: 250px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1220;
    --surface: #121a2b;
    --surface-2: #0f1728;
    --surface-3: #1b2438;
    --border: #22304a;
    --border-strong: #33415c;
    --text: #e8eefb;
    --text-muted: #97a4bd;
    --text-faint: #6b7a95;
    --accent: #6f9dff;
    --accent-soft: #16254a;
    --accent-text: #a9c4ff;
    --ok: #4ade80;
    --ok-soft: #10331f;
    --warn: #fbbf24;
    --warn-soft: #3a2c0c;
    --danger: #fca5a5;
    --danger-soft: #3d1616;
    --violet: #c4b5fd;
    --violet-soft: #2a1f4d;
    --teal: #5eead4;
    --teal-soft: #0d3330;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow: 0 8px 24px -10px rgba(0, 0, 0, .7);
    --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, .8);
  }
}

/* -------------------------------------------------- Basisausbildung ------
   Der zweite Bewerbungslauf bekommt eine eigene Farbwelt: warmes Bernstein
   statt Blau, dazu ein anderer Seitenhintergrund. So ist auf einen Blick
   klar, in welchem Lauf man gerade schreibt. Ueberschrieben werden nur die
   Farbtokens - alle Bausteine erben automatisch. */
body[data-track="basis"] {
  --bg: #fbf7ef;
  --surface-3: #f6efe2;
  --border: #ece2d1;
  --border-strong: #d8c8ad;
  --accent: #a1620a;
  --accent-soft: #fdf1dd;
  --accent-text: #8a5209;
  --teal: #0f766e;
  --violet: #6d28d9;
  background-image:
    radial-gradient(1100px 520px at 100% -10%, rgba(161, 98, 10, .10), transparent 62%),
    radial-gradient(760px 460px at -10% 105%, rgba(180, 83, 9, .07), transparent 60%);
  background-attachment: fixed;
}

body[data-track="kpj"] {
  background-image:
    radial-gradient(1100px 520px at 100% -10%, rgba(29, 78, 216, .07), transparent 62%),
    radial-gradient(760px 460px at -10% 105%, rgba(15, 118, 110, .05), transparent 60%);
  background-attachment: fixed;
}

@media (prefers-color-scheme: dark) {
  body[data-track="basis"] {
    --bg: #17130c;
    --surface: #221b12;
    --surface-2: #1c160e;
    --surface-3: #2b2217;
    --border: #3a2e1e;
    --border-strong: #4e3d27;
    --text: #f6eede;
    --text-muted: #bda887;
    --text-faint: #8d7c60;
    --accent: #f0b45e;
    --accent-soft: #3a2a10;
    --accent-text: #f7d5a2;
    background-image:
      radial-gradient(1100px 520px at 100% -10%, rgba(240, 180, 94, .10), transparent 62%),
      radial-gradient(760px 460px at -10% 105%, rgba(240, 180, 94, .05), transparent 60%);
  }
}

* { box-sizing: border-box; }

/* Wichtig: .modal-root und .scrim bringen eigene display-Regeln mit, die das
   hidden-Attribut aushebeln wuerden. Ohne diese Zeile liegt der leere
   Modal-Container unsichtbar ueber der Seite und schluckt jeden Klick. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.01em; line-height: 1.25; }
p { margin: 0 0 .6em; }
a { color: var(--accent); }

/* ------------------------------------------------------------------ Login */

.login-body {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: 24px;
  background:
    radial-gradient(1100px 500px at 15% -10%, var(--accent-soft), transparent 60%),
    radial-gradient(900px 500px at 110% 110%, var(--surface-3), transparent 55%),
    var(--bg);
}

.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  padding: 34px 30px 26px;
  text-align: center;
}

.login-mark {
  width: 52px; height: 52px;
  margin: 0 auto 16px;
  display: grid; place-items: center;
  border-radius: 15px;
  background: var(--accent);
  color: #fff;
}

.login-card h1 { font-size: 21px; }
.login-sub { color: var(--text-muted); font-size: 14px; margin-bottom: 22px; }
.login-card form { text-align: left; }
.login-card label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 6px; color: var(--text-muted); }
.login-foot { margin: 20px 0 0; font-size: 12px; color: var(--text-faint); }

.alert {
  border-radius: var(--radius-sm);
  padding: 10px 13px;
  font-size: 13.5px;
  text-align: left;
  margin-bottom: 6px;
}
.alert-error { background: var(--danger-soft); color: var(--danger); }
.alert-info  { background: var(--accent-soft); color: var(--accent-text); }

/* ------------------------------------------------------- Formular-Elemente */

input[type=text], input[type=password], input[type=email], input[type=date],
input[type=number], input[type=url], input[type=search], input[type=tel],
select, textarea {
  width: 100%;
  padding: 9px 12px;
  font: inherit;
  font-size: 14.5px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  transition: border-color .15s, box-shadow .15s;
  appearance: none;
}
textarea { min-height: 120px; resize: vertical; line-height: 1.6; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
input::placeholder, textarea::placeholder { color: var(--text-faint); }

/* Sichtbarer Fokusring fuer alles, was per Tastatur angesteuert wird.
   :focus-visible statt :focus - beim Mausklick bleibt es ruhig. */
.btn:focus-visible,
.icon-btn:focus-visible,
.chip:focus-visible,
.nav-item:focus-visible,
a:focus-visible,
tr[tabindex]:focus-visible,
.board-card:focus-visible,
[role="button"]:focus-visible,
.timeline-block:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5 10 4.5' fill='none' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  padding-right: 30px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 15px;
  font: inherit;
  font-size: 14px;
  font-weight: 570;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s, transform .06s, color .15s;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn svg { flex: none; }

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover:not(:disabled) { filter: brightness(1.07); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover:not(:disabled) { background: var(--surface-3); }
.btn-ghost { background: transparent; color: var(--text-muted); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-3); color: var(--text); }
.btn-danger { background: transparent; color: var(--danger); border-color: transparent; }
.btn-danger:hover:not(:disabled) { background: var(--danger-soft); }
.btn-block { width: 100%; margin-top: 18px; }
.btn-sm { padding: 6px 11px; font-size: 13px; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.icon-btn:hover { background: var(--surface-3); color: var(--text); }

/* ---------------------------------------------------------- Ausbildungsweg */

.path { display: flex; flex-direction: column; gap: 10px; }

.path-step {
  display: flex;
  gap: 13px;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.path-step.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.path-step.is-future { opacity: .72; }

.path-mark {
  width: 40px; height: 40px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--surface-3);
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
}
.path-step.active .path-mark { background: var(--accent); color: #fff; }

.path-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.path-body .sub { color: var(--text-muted); font-size: 13px; }
.path-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.path-meta .btn { margin: -4px 0; }

/* ------------------------------------------------------------------ Shell */

.app-shell { display: flex; min-height: 100dvh; }

.sidebar {
  width: var(--sidebar-w);
  flex: none;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 0;
  height: 100dvh;
}

.brand { display: flex; align-items: center; gap: 11px; padding: 0 6px; }
.brand-mark {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--accent);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-text strong { font-size: 15px; }
.brand-text small { color: var(--text-faint); font-size: 11.5px; }

/* Umschalter zwischen KPJ und Basisausbildung */
.track-switch {
  display: flex;
  gap: 3px;
  padding: 3px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.track-btn {
  flex: 1;
  min-width: 0;
  padding: 7px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.track-btn:hover { color: var(--text); }
.track-btn.active {
  background: var(--surface);
  color: var(--accent-text);
  box-shadow: var(--shadow-sm);
}
.track-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }
.nav-group-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-faint);
  font-weight: 650;
  padding: 14px 10px 5px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 10px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 520;
}
.nav-item:hover { background: var(--surface-3); color: var(--text); }
.nav-item.active { background: var(--accent-soft); color: var(--accent-text); font-weight: 620; }
.nav-item .nav-count {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 650;
  color: var(--text-faint);
  background: var(--surface-3);
  border-radius: 999px;
  padding: 1px 7px;
}
.nav-item.active .nav-count { background: var(--surface); color: var(--accent-text); }
.nav-sub { padding-left: 30px; font-size: 14px; }
.sidebar-foot { border-top: 1px solid var(--border); padding-top: 12px; }
.sidebar-foot .btn-block { margin-top: 0; }

.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 26px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar-title { font-size: 17px; }
.topbar-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.content { padding: 26px; max-width: 1240px; width: 100%; outline: none; }
.content > section + section { margin-top: 26px; }

/* ------------------------------------------------------------------ Karten */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--border);
}
.card-head h2 { font-size: 15px; }
.card-head .card-actions { margin-left: auto; display: flex; gap: 6px; }
.card-body { padding: 18px; }
.card-body.tight { padding: 10px 12px; }

.grid { display: grid; gap: 16px; }
.grid-kpi { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.kpi { padding: 16px 18px; }
.kpi-label { font-size: 12.5px; color: var(--text-muted); font-weight: 560; }
.kpi-value { font-size: 30px; font-weight: 680; letter-spacing: -.02em; margin-top: 2px; }
.kpi-hint { font-size: 12.5px; color: var(--text-faint); }
.kpi-value.tone-ok { color: var(--ok); }
.kpi-value.tone-warn { color: var(--warn); }
.kpi-value.tone-accent { color: var(--accent); }

.page-intro { margin-bottom: 22px; }
.page-intro h2 { font-size: 22px; }
.page-intro p { color: var(--text-muted); margin: 4px 0 0; font-size: 14px; }

/* ------------------------------------------------------------- Zeitstrahl */

.timeline { padding: 6px 2px 2px; }
.timeline-months {
  display: flex;
  font-size: 11px;
  color: var(--text-faint);
  margin-bottom: 5px;
  border-bottom: 1px dashed var(--border);
  padding-bottom: 4px;
}
.timeline-month { flex: none; padding-left: 4px; border-left: 1px solid var(--border); overflow: hidden; white-space: nowrap; }
.timeline-track {
  position: relative;
  height: 46px;
  background: repeating-linear-gradient(90deg, var(--surface-2) 0, var(--surface-2) calc(100% / 48), var(--surface-3) calc(100% / 48), var(--surface-3) calc(200% / 48));
  border-radius: 10px;
  border: 1px solid var(--border);
  overflow: hidden;
}
.timeline-track + .timeline-track { margin-top: 8px; }
.timeline-block {
  position: absolute;
  top: 5px;
  bottom: 5px;
  border-radius: 8px;
  padding: 0 9px;
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 620;
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  font-family: inherit;
}
.timeline-block.cat-chirurgie { background: var(--accent); }
.timeline-block.cat-innere { background: var(--teal); }
.timeline-block.cat-wahlfach { background: var(--violet); }
.timeline-block.is-planned { opacity: .55; border: 1px dashed rgba(255,255,255,.7); }
.timeline-today {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--danger);
}
.timeline-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: 12.5px; color: var(--text-muted); }
.legend-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 6px; vertical-align: -1px; }

.progress-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.progress-row + .progress-row { border-top: 1px solid var(--border); }
.progress-label { width: 108px; flex: none; font-size: 13.5px; font-weight: 570; }
.progress-bar-wrap { flex: 1; position: relative; min-width: 0; }
.progress-bar { height: 9px; border-radius: 999px; background: var(--surface-3); overflow: hidden; display: flex; }
.progress-fill { height: 100%; }
.progress-fill.cat-chirurgie { background: var(--accent); }
.progress-fill.cat-innere { background: var(--teal); }
.progress-fill.cat-wahlfach { background: var(--violet); }
.progress-fill.is-planned { opacity: .4; }
.progress-num { width: 82px; flex: none; text-align: right; font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------- Gold-Balken
   Ist ein Fach komplett fix zugesagt, wird sein Balken golden. Beim ersten
   Anzeigen laeuft er sichtbar voll (in der Fachfarbe), blitzt auf und
   wechselt dann auf Gold. Alle Animationen setzen nur den Startzustand -
   der Ruhezustand ist das fertige Gold, damit "reduced motion" (siehe unten)
   direkt das Ergebnis zeigt. */
:root {
  --gold-1: #9a6b00;
  --gold-2: #d4a017;
  --gold-3: #f7d86a;
  --gold-4: #fff6c9;
  --gold-text: #9a6b00;
  --gold-glow: rgba(234, 179, 8, .45);
}
@media (prefers-color-scheme: dark) {
  :root { --gold-text: #f7d86a; --gold-glow: rgba(250, 204, 21, .35); }
}

.progress-bar.is-full {
  height: 11px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(212, 160, 23, .35), 0 0 14px var(--gold-glow);
}
.progress-fill.is-gold { position: relative; }
.progress-fill.is-gold::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, var(--gold-1) 0%, var(--gold-2) 18%, var(--gold-3) 34%, var(--gold-4) 44%, var(--gold-3) 54%, var(--gold-2) 72%, var(--gold-1) 100%);
  background-size: 260% 100%;
  animation: gold-shimmer 5s linear infinite;
}
.progress-row.is-full .progress-num { color: var(--gold-text); font-weight: 650; }
.progress-row.is-full .progress-num { width: 96px; }
.gold-star {
  display: inline-block;
  margin-right: 5px;
  color: var(--gold-2);
  text-shadow: 0 0 8px var(--gold-glow);
}

/* Der grosse Auftritt beim ersten Anzeigen */
.progress-bar.gold-anim .progress-fill.is-gold {
  transform-origin: left center;
  animation: gold-fill-up 1.25s cubic-bezier(.3, .7, .2, 1) both;
}
.progress-bar.gold-anim .progress-fill.is-gold::after {
  animation: gold-turn .7s ease-out 1.2s both, gold-shimmer 5s linear 1.9s infinite;
}
.progress-bar.gold-anim { animation: gold-pop .6s ease-out 1.2s both; }
.progress-row.is-full .gold-star { animation: star-pop .6s cubic-bezier(.3, 1.6, .5, 1) 1.35s both; }

.sparkles { position: absolute; inset: 0; pointer-events: none; }
.sparkle {
  position: absolute;
  left: var(--x);
  top: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--gold-3);
  box-shadow: 0 0 6px 1px var(--gold-2);
  color: var(--gold-2);
  font-size: 11px;
  line-height: 6px;
  text-align: center;
  opacity: 0;
  animation: sparkle-burst .9s ease-out calc(1.2s + var(--d)) both;
}
.sparkle:not(:empty) { background: none; box-shadow: none; }

@keyframes gold-fill-up { from { transform: scaleX(0); } }
@keyframes gold-turn {
  0%   { opacity: 0; filter: brightness(1); }
  35%  { opacity: 1; filter: brightness(2.2); }
  100% { opacity: 1; filter: brightness(1); }
}
@keyframes gold-shimmer {
  0%   { background-position: 130% 0; }
  100% { background-position: -130% 0; }
}
@keyframes gold-pop {
  0%   { transform: scaleY(1); box-shadow: 0 0 0 1px rgba(212, 160, 23, .35), 0 0 0 var(--gold-glow); }
  40%  { transform: scaleY(1.7); box-shadow: 0 0 0 2px rgba(212, 160, 23, .6), 0 0 26px var(--gold-glow); }
}
@keyframes star-pop {
  from { transform: scale(0) rotate(-120deg); opacity: 0; }
}
@keyframes sparkle-burst {
  0%   { opacity: 0; transform: translate(0, 0) scale(.3); }
  25%  { opacity: 1; transform: translate(calc(var(--dx) * .4), calc(var(--dy) * .4)) scale(1.2); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.4); }
}

.btn-gold {
  background: linear-gradient(135deg, var(--gold-2), var(--gold-3));
  color: #4a3300;
  border: 1px solid rgba(154, 107, 0, .35);
  font-weight: 650;
}
.btn-gold:hover { filter: brightness(1.06); }
.page-intro .btn-gold { margin-top: 10px; }

/* -------------------------------------------- Doppelzusagen im Zeitstrahl
   Ueberlappen zwei Stellen, liegen sie auf versetzten Ebenen halb
   uebereinander. Beim Drueberfahren kommt die untere nach vorne. */
.timeline-track.has-overlap .timeline-block {
  align-items: flex-start;
  padding-top: 3px;
  box-shadow: 0 0 0 2px var(--surface), 0 4px 10px -4px rgba(15, 23, 42, .45);
  transition: transform .15s ease;
}
.timeline-track.has-overlap .timeline-block:hover,
.timeline-track.has-overlap .timeline-block:focus-visible {
  z-index: 20 !important;
  transform: translateY(-2px);
}
.timeline-block.is-double { padding-right: 28px; }
.timeline-block.is-double::before {
  content: '2×';
  position: absolute;
  right: 5px;
  top: 3px;
  font-size: 10px;
  font-weight: 700;
  padding: 0 4px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .28);
}
@media (max-width: 640px) {
  /* Auf dem Handy sind die Bloecke zu schmal fuer Name und Schild. */
  .timeline-block.is-double { padding-right: 9px; }
  .timeline-block.is-double::before { display: none; }
}
.double-hint { color: var(--text-muted); font-style: italic; }
.badge-double { background: var(--warn-soft); color: var(--warn); }
.double-note {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--warn);
  background: var(--warn-soft);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
}

/* ---------------------------------------------------------------- Finale
   Alle Wochen fix: Herzregen, ein handgezeichnetes Bussi und ein paar
   liebe Worte. */
.finale {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 16px;
  background: radial-gradient(circle at 50% 40%, rgba(255, 228, 236, .92), rgba(136, 19, 55, .78));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  overflow: hidden;
  animation: finale-in .45s ease-out both;
}
.finale.is-leaving { animation: finale-out .35s ease-in both; }
.finale-rain { position: absolute; inset: 0; pointer-events: none; }
.finale-bit {
  position: absolute;
  top: -40px;
  left: var(--x);
  color: var(--c);
  font-size: calc(22px * var(--s));
  text-shadow: 0 2px 6px rgba(0, 0, 0, .15);
  animation: finale-fall var(--t) linear var(--d) infinite;
  opacity: 0;
}
.finale-card {
  position: relative;
  width: min(440px, 100%);
  background: #fffdfd;
  color: #3b0a1c;
  border-radius: 26px;
  padding: 28px 24px 24px;
  text-align: center;
  box-shadow: 0 30px 80px -20px rgba(136, 19, 55, .6), 0 0 0 6px rgba(255, 255, 255, .5);
  animation: finale-card-in .7s cubic-bezier(.3, 1.5, .5, 1) .15s both;
}
.finale-title {
  font-size: clamp(34px, 9vw, 50px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.05;
  color: #be123c;
}
.finale-title span {
  background: linear-gradient(90deg, #e11d48, #f59e0b, #ec4899, #e11d48);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gold-shimmer 4s linear infinite;
}
.finale-kiss { position: relative; width: min(260px, 80%); margin: 10px auto 0; }
.kiss { display: block; width: 100%; height: auto; overflow: visible; }
.kiss-line {
  fill: none;
  stroke: #9f1239;
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 600;
  animation: kiss-draw 1.5s ease-in-out .7s both;
}
.kiss-line-2 { stroke-width: 2; opacity: .55; animation-delay: 1s; }
.kiss-mid { stroke-dasharray: 220; animation: kiss-draw-mid .6s ease-out 2s both; }
.kiss-fill {
  fill: #e11d48;
  transform-origin: 110px 72px;
  animation: kiss-fill .6s ease-out 2.2s both, kiss-smooch 1.6s ease-in-out 3s infinite;
}
.kiss-shine {
  fill: none;
  stroke: rgba(255, 255, 255, .75);
  stroke-width: 4;
  stroke-linecap: round;
  animation: finale-fade .4s ease-out 2.6s both;
}
.kiss-shine-2 { stroke-width: 3; }
.kiss-heart {
  position: absolute;
  left: var(--x);
  top: 45%;
  color: #f43f5e;
  font-size: 18px;
  opacity: 0;
  animation: kiss-heart-rise 2.4s ease-out var(--d) infinite;
}
.finale-bussi {
  font-family: "Bradley Hand", "Snell Roundhand", "Segoe Script", "Comic Sans MS", cursive;
  font-size: 30px;
  font-weight: 700;
  color: #e11d48;
  transform: rotate(-6deg);
  margin: -6px 0 6px;
  animation: finale-pop .5s cubic-bezier(.3, 1.6, .5, 1) 2.5s both;
}
.finale-line { margin: 6px 0 0; font-size: 19px; font-weight: 650; }
.finale-line-1 { animation: finale-rise .6s ease-out 3s both; }
.finale-line-2 {
  font-family: "Bradley Hand", "Snell Roundhand", "Segoe Script", cursive;
  font-size: 24px;
  color: #be123c;
  animation: finale-rise .6s ease-out 3.6s both;
}
.finale-close { margin-top: 18px; padding-left: 22px; padding-right: 22px; animation: finale-fade .5s ease-out 4.2s both; }

@keyframes finale-in { from { opacity: 0; } }
@keyframes finale-out { to { opacity: 0; } }
@keyframes finale-card-in { from { opacity: 0; transform: scale(.6) translateY(30px); } }
@keyframes finale-fall {
  0%   { opacity: 0; transform: translateY(0) rotate(0); }
  10%  { opacity: 1; }
  100% { opacity: .9; transform: translateY(calc(100vh + 80px)) rotate(var(--r)); }
}
@keyframes kiss-draw { from { stroke-dashoffset: 600; } }
@keyframes kiss-draw-mid { from { stroke-dashoffset: 220; } }
@keyframes kiss-fill { from { opacity: 0; transform: scale(.85); } }
@keyframes kiss-smooch {
  0%, 100% { transform: scale(1); }
  20%      { transform: scale(1.08, .94); }
  40%      { transform: scale(.96, 1.05); }
}
@keyframes kiss-heart-rise {
  0%   { opacity: 0; transform: translateY(0) scale(.5); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-110px) scale(1.2); }
}
@keyframes finale-pop { from { opacity: 0; transform: rotate(-6deg) scale(0); } }
@keyframes finale-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes finale-fade { from { opacity: 0; } }

/* ------------------------------------------------------------------ Listen */

.list { display: flex; flex-direction: column; }
.list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  border-top: 1px solid var(--border);
  font-size: 14px;
}
.list-row:first-child { border-top: none; }
.list-row .grow { flex: 1; min-width: 0; }
.list-row strong { font-weight: 600; display: block; }
.list-row .sub { color: var(--text-muted); font-size: 12.5px; }
.list-row .right { margin-left: auto; text-align: right; flex: none; }

.empty {
  padding: 34px 18px;
  text-align: center;
  color: var(--text-muted);
}
.empty svg { color: var(--text-faint); margin-bottom: 8px; }
.empty p { font-size: 14px; }

/* ------------------------------------------------------------- Tabelle */

.table-wrap { overflow-x: auto; }
/* Lange Auswahllisten im Dialog scrollen fuer sich, damit die Knoepfe
   darunter erreichbar bleiben. */
.table-scroll { max-height: 45vh; overflow-y: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th {
  text-align: left;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-faint);
  font-weight: 650;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  background: var(--surface-2);
  position: sticky;
  top: 0;
}
table.data th.sortable { cursor: pointer; user-select: none; }
table.data th.sortable:hover { color: var(--text); }
table.data td { padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.data tbody tr:hover { background: var(--surface-2); }
table.data tbody tr:last-child td { border-bottom: none; }
.cell-main { font-weight: 600; }
.cell-sub { color: var(--text-muted); font-size: 12.5px; }
.row-actions { display: flex; gap: 4px; justify-content: flex-end; }
.col-actions { width: 1%; white-space: nowrap; }

/* -------------------------------------------------------------- Abzeichen */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.badge-offen { background: var(--surface-3); color: var(--text-muted); }
.badge-angeschrieben { background: var(--accent-soft); color: var(--accent-text); }
.badge-nachgefasst { background: var(--warn-soft); color: var(--warn); }
.badge-gespraech { background: var(--violet-soft); color: var(--violet); }
.badge-zusage { background: var(--ok-soft); color: var(--ok); }
.badge-absage { background: var(--danger-soft); color: var(--danger); }
.badge-warteliste { background: var(--warn-soft); color: var(--warn); }
.badge-zurueckgezogen { background: var(--surface-3); color: var(--text-faint); }
.badge-cat { background: var(--surface-3); color: var(--text-muted); }
.badge-cat.cat-chirurgie { background: var(--accent-soft); color: var(--accent-text); }
.badge-cat.cat-innere { background: var(--teal-soft); color: var(--teal); }
.badge-cat.cat-wahlfach { background: var(--violet-soft); color: var(--violet); }

.prio { letter-spacing: 1px; color: var(--warn); font-size: 12px; }
.due { color: var(--warn); font-weight: 600; }
.overdue { color: var(--danger); font-weight: 600; }

/* --------------------------------------------------------------- Toolbar */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  margin-bottom: 16px;
}
.toolbar .search { flex: 1; min-width: 190px; max-width: 340px; }
.toolbar select { width: auto; min-width: 130px; }
.toolbar .spacer { flex: 1; }
.result-count { font-size: 13px; color: var(--text-muted); }

/* ----------------------------------------------------------------- Board */

.board { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 10px; align-items: flex-start; }
.board-col {
  flex: 0 0 264px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
  min-height: 120px;
}
.board-col.drag-over { border-color: var(--accent); background: var(--accent-soft); }
.board-col-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 2px 4px 10px;
  font-size: 13px;
  font-weight: 650;
}
.board-col-head .count { margin-left: auto; color: var(--text-faint); font-weight: 600; }
.board-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 10px 12px;
  margin-bottom: 8px;
  box-shadow: var(--shadow-sm);
  cursor: grab;
}
.board-card:active { cursor: grabbing; }
.board-card.dragging { opacity: .4; }
.board-card strong { font-size: 13.5px; display: block; }
.board-card .sub { font-size: 12px; color: var(--text-muted); }
.board-card .meta { display: flex; gap: 6px; align-items: center; margin-top: 7px; flex-wrap: wrap; }

/* -------------------------------------------------------------- Zusagen */

.placement-card { display: flex; flex-direction: column; gap: 0; overflow: hidden; }
.placement-stripe { height: 4px; }
.placement-stripe.cat-chirurgie { background: var(--accent); }
.placement-stripe.cat-innere { background: var(--teal); }
.placement-stripe.cat-wahlfach { background: var(--violet); }
.placement-body { padding: 16px 18px; }
.placement-body h3 { font-size: 15.5px; }
.placement-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
.placement-dates { font-size: 13.5px; color: var(--text-muted); margin-top: 6px; font-variant-numeric: tabular-nums; }
.placement-foot { display: flex; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--border); background: var(--surface-2); }

/* --------------------------------------------------------------- Verlauf */

.timeline-log { list-style: none; margin: 0; padding: 0; }
.timeline-log li { position: relative; padding: 0 0 16px 22px; border-left: 2px solid var(--border); }
.timeline-log li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline-log li::before {
  content: "";
  position: absolute;
  left: -6px; top: 4px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--surface);
}
.timeline-log li.type-notiz::before { background: var(--text-faint); }
.timeline-log li.type-antwort::before { background: var(--ok); }
.timeline-log li.type-nachfassen::before { background: var(--warn); }
.log-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.log-date { font-size: 12px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.log-subject { font-weight: 600; font-size: 13.5px; }
.log-note { font-size: 13px; color: var(--text-muted); white-space: pre-wrap; margin-top: 2px; }

/* ----------------------------------------------------------------- Modal */

.scrim {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .45);
  backdrop-filter: blur(2px);
  z-index: 40;
}
.modal-root {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
}
.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 620px;
  margin: auto;
}
.modal.wide { max-width: 780px; }
.modal-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 17px 20px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--surface);
  border-radius: 18px 18px 0 0;
  z-index: 1;
}
.modal-head h2 { font-size: 16px; flex: 1; }
.modal-body { padding: 20px; }
.modal-foot {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 0 0 18px 18px;
  flex-wrap: wrap;
}
.modal-foot .left { margin-right: auto; }
/* Der kleine Zweitweg-Knopf soll neben dem Hauptknopf auch wirklich kleiner
   aussehen - ohne align-items zieht Flexbox ihn auf dessen Hoehe. */
.modal-foot, .modal-foot .inline-actions { align-items: center; }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12.5px; font-weight: 620; color: var(--text-muted); margin-bottom: 5px; }
.field .hint { font-size: 12px; color: var(--text-faint); margin-top: 4px; }
.field-row { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.field-row.three { grid-template-columns: 1fr 1fr 1fr; }
.section-title {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-faint);
  font-weight: 650;
  margin: 22px 0 10px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.section-title:first-child { margin-top: 0; padding-top: 0; border-top: none; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 3px 7px;
  cursor: pointer;
  color: var(--text-muted);
}
.chip:hover { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent); }

.mail-preview {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  font-size: 13.5px;
  white-space: pre-wrap;
  max-height: 320px;
  overflow-y: auto;
  line-height: 1.6;
}
.mail-to { font-size: 13px; color: var(--text-muted); margin-bottom: 10px; }
.mail-to strong { color: var(--text); }

/* ----------------------------------------------------------------- Toast */

.toast-root {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}
.toast {
  background: var(--text);
  color: var(--bg);
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 550;
  box-shadow: var(--shadow-lg);
  animation: toast-in .18s ease-out;
  max-width: 88vw;
}
.toast.err { background: var(--danger); color: #fff; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* --------------------------------------------------------------- Diverses */

.only-mobile { display: none; }
.muted { color: var(--text-muted); }
.nowrap { white-space: nowrap; }
.stack-sm { display: flex; flex-direction: column; gap: 4px; }
.inline-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.skeleton { padding: 60px; text-align: center; color: var(--text-faint); }

/* ------------------------------------------------------------- Responsive */

@media (max-width: 900px) {
  .sidebar {
    position: fixed;
    z-index: 60;
    left: 0; top: 0;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: var(--shadow-lg);
  }
  .sidebar.open { transform: none; }
  .only-mobile { display: inline-grid; }
  .content { padding: 16px; }
  .topbar { padding: 10px 14px; }
  .field-row, .field-row.three { grid-template-columns: 1fr; }
  .modal-root { padding: 0; align-items: stretch; }
  .modal { border-radius: 0; min-height: 100dvh; max-width: none; }
  .modal-head, .modal-foot { border-radius: 0; }
  .modal-foot { position: sticky; bottom: 0; }
  .toolbar .search { max-width: none; }
  .status-select { min-width: 118px; font-size: 12px; }
  .prio-select { min-width: 84px; }
  .content > section + section { margin-top: 18px; }
}

/* Schmale Handys: Titel und Aktionsknoepfe passen nicht in eine Zeile -
   die Knoepfe rutschen darum in eine zweite Reihe, statt seitlich
   herauszuragen (sonst laesst sich die ganze Seite quer schieben). */
@media (max-width: 640px) {
  .topbar { flex-wrap: wrap; row-gap: 8px; }
  .topbar-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topbar-actions {
    margin-left: 0;
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
}

/* ------------------------------------------------- Status direkt in der Zeile */

.status-select {
  height: 30px;
  padding: 0 26px 0 10px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid transparent;
  background-position: right 8px center;
  background-size: 11px;
  cursor: pointer;
  min-width: 130px;
  max-width: 100%;
}
.status-select:hover { border-color: var(--border-strong); }

/* Farbe je Status - dieselbe Sprache wie die Badges */
.status-select.st-offen          { background-color: var(--surface-3); color: var(--text-muted); }
.status-select.st-angeschrieben  { background-color: var(--accent-soft); color: var(--accent-text); }
.status-select.st-nachgefasst    { background-color: var(--warn-soft); color: var(--warn); }
.status-select.st-gespraech      { background-color: var(--violet-soft); color: var(--violet); }
.status-select.st-warteliste     { background-color: var(--surface-3); color: var(--text-muted); }
.status-select.st-zusage         { background-color: var(--ok-soft); color: var(--ok); }
.status-select.st-absage         { background-color: var(--danger-soft); color: var(--danger); }
.status-select.st-zurueckgezogen { background-color: var(--surface-3); color: var(--text-faint); }

/* Haken in der Zeile: erledigt ist gruen und gefuellt */
.check-btn { color: var(--text-faint); }
.check-btn:hover { color: var(--accent); background: var(--accent-soft); }
.check-btn.is-done { color: var(--ok); }
.check-btn.is-done:hover { color: var(--ok); background: var(--ok-soft); }

/* Beschriftungszeile mit Kopier-Knopf */
.field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}
.field-label-row label { margin-bottom: 0; }
.copy-btn { width: 28px; height: 28px; color: var(--text-faint); }
.copy-btn:hover { color: var(--accent); background: var(--accent-soft); }
.mail-to .copy-btn { margin-left: 6px; vertical-align: middle; }

/* Prioritaet als Sterne-Auswahl in der Zeile */
.prio-select {
  height: 30px;
  padding: 0 24px 0 8px;
  font-size: 13px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background-color: transparent;
  background-position: right 6px center;
  background-size: 11px;
  color: var(--warn);
  letter-spacing: .5px;
  cursor: pointer;
  min-width: 92px;
}
.prio-select:hover { border-color: var(--border-strong); background-color: var(--surface-2); }
.prio-select.is-muted { color: var(--text-faint); }

/* Ausgeblendete einblenden */
.toggle-hidden {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
}
.toggle-hidden input { width: auto; height: auto; margin: 0; }
.toggle-hidden.is-empty { display: none; }

/* --------------------------------------------------------- Bewerbungslauf */

.campaign-bar {
  height: 4px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
  margin-bottom: 16px;
}
.campaign-fill {
  height: 100%;
  background: var(--accent);
  transition: width .25s ease;
}
.campaign-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}
.campaign-head .grow { flex: 1; min-width: 0; }
.campaign-head strong { display: block; font-size: 16px; }
.campaign-head .sub { display: block; font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.campaign-count {
  flex: none;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--text-muted);
  background: var(--surface-3);
  border-radius: 999px;
  padding: 3px 10px;
}
.campaign textarea { min-height: 210px; }
.campaign-pdf {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  margin-top: 4px;
}
.campaign-pdf input { width: auto; height: auto; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ------------------------------------------------------------ PDF-Modul */

.section-heading { margin: 26px 0 12px; }
.section-heading h3 { font-size: 16px; }
.section-heading p { margin: 2px 0 0; font-size: 13.5px; }
.section-heading:first-child { margin-top: 0; }

.pdf-block {
  margin-top: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: 13px 14px;
}
.pdf-block-head { display: flex; align-items: center; gap: 8px; font-size: 13.5px; margin-bottom: 10px; }
.pdf-block-head svg { color: var(--accent); }
.pdf-block-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pdf-block-row select { width: auto; min-width: 170px; flex: 1; }
.pdf-block .hint { margin-top: 9px; }

.pdf-frame {
  width: 100%;
  height: 58vh;
  min-height: 340px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  margin: 6px 0 10px;
}

label.btn { position: relative; overflow: hidden; }
label.btn input[type=file] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
}

@media (max-width: 900px) {
  .pdf-frame { height: 44vh; }
  .pdf-block-row select { width: 100%; flex: none; }
}