/* ===========================================
   ITC-Tool
   Baut auf /style.css (pf-tool-main / pf-tool-frame) auf.
   Mobil zuerst; Farben wie Microteaching-Bibliothek.
   =========================================== */

.itc-body {
  --itc-primary: #3b22a3;
  --itc-primary-dark: #2a1880;
  --itc-primary-soft: #f3f0fb;
  --itc-primary-line: #ded8ee;
  --itc-accent: #ffd45a;
  --itc-ink: #17254d;
  --itc-text: #2c3552;
  --itc-muted: #5b6380;
  --itc-line: #e4e2ec;
  --itc-bg: #f7f7fb;
  --itc-ok: #1f7a4d;
  --itc-error: #b00020;

  /* Aufgabentypen (wie bisher: gelb = AI, blau = ITC, grün = IE) */
  --itc-ai: #e0b500;      --itc-ai-soft: #fffbe8;   --itc-ai-ink: #6b5400;
  --itc-itc: #1c9bc0;     --itc-itc-soft: #e8f7fc;  --itc-itc-ink: #0b566d;
  --itc-ie: #2e9d57;      --itc-ie-soft: #eaf8ee;   --itc-ie-ink: #19602f;

  --itc-radius: 16px;
  --itc-radius-sm: 10px;
  --itc-shadow: 0 1px 2px rgba(23, 37, 77, 0.06), 0 6px 20px rgba(23, 37, 77, 0.06);
  --itc-focus: 0 0 0 3px rgba(59, 34, 163, 0.3);
}

.itc-main.pf-tool-main { max-width: 1040px; }
.pf-tool-frame.itc-frame { max-width: none; padding: 0; background: transparent; box-shadow: none; }
.itc-frame, .itc-frame *, .itc-dialog, .itc-dialog * { box-sizing: border-box; }
.itc-frame { color: var(--itc-text); line-height: 1.55; }
.itc-frame p { margin: 0 0 0.7em; }
.itc-frame p:last-child { margin-bottom: 0; }
.itc-frame a { color: var(--itc-primary); }
.itc-icon { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.itc-muted { color: var(--itc-muted); font-size: 0.9rem; }

/* ---------- Buttons ---------- */
.itc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--itc-primary); border-radius: 999px;
  background: var(--itc-primary); color: #fff !important;
  font: inherit; font-size: 0.93rem; font-weight: 700; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.itc-btn:hover { background: var(--itc-primary-dark); border-color: var(--itc-primary-dark); }
.itc-btn:focus-visible { outline: none; box-shadow: var(--itc-focus); }
.itc-btn[disabled] { opacity: 0.6; cursor: progress; }
.itc-btn--small { padding: 8px 14px; font-size: 0.87rem; }
.itc-btn--ghost { background: #fff; color: var(--itc-primary) !important; border-color: var(--itc-primary-line); }
.itc-btn--ghost:hover { background: var(--itc-primary-soft); border-color: var(--itc-primary); }
.itc-btn--accent { background: var(--itc-accent); border-color: var(--itc-accent); color: var(--itc-ink) !important; }
.itc-btn--accent:hover { background: #ffe18a; border-color: #ffe18a; }
html.itc-js .itc-nojs { display: none; }

/* ---------- Kopf ---------- */
.itc-hero {
  position: relative; overflow: hidden;
  display: grid; gap: 20px;
  padding: 24px 20px;
  border-radius: 22px;
  background:
    radial-gradient(900px 300px at 100% 0%, rgba(255, 212, 90, 0.22), transparent 60%),
    linear-gradient(135deg, #3b22a3 0%, #2a1880 55%, #1c1460 100%);
  color: rgba(255, 255, 255, 0.88);
  box-shadow: 0 18px 40px rgba(42, 24, 128, 0.25);
}
.itc-eyebrow {
  display: inline-block; margin: 0 0 10px !important; padding: 5px 12px;
  border-radius: 999px; background: rgba(255, 255, 255, 0.12);
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #ffe8a3;
}
.itc-hero h1, .pf-tool-frame .itc-hero h1:first-of-type {
  margin: 0 0 14px; color: #fff; font-size: clamp(1.55rem, 4.2vw, 2.3rem); line-height: 1.15; font-weight: 800;
}
.itc-hero-text p { max-width: 64ch; font-size: 0.98rem; }

.itc-legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }

.itc-account {
  display: flex; flex-direction: column; gap: 12px; justify-content: center;
  padding: 18px; border-radius: var(--itc-radius);
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.92rem;
}
.itc-account p { margin: 0; }
.itc-account-title { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #fff; font-size: 1rem; }
.itc-account-who { display: flex; align-items: center; gap: 12px; }
.itc-avatar {
  display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%;
  background: var(--itc-accent); color: var(--itc-ink); font-weight: 800; font-size: 1.05rem;
}
.itc-account-label { font-size: 0.8rem; color: rgba(255, 255, 255, 0.7); }
.itc-account-name { font-weight: 700; color: #fff; overflow-wrap: anywhere; }
.itc-account-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.itc-frame .itc-account-link { color: #ffe8a3; font-weight: 600; }
.itc-account .itc-btn { align-self: flex-start; }

/* Selbst gewählter Name (pf_name_box, /shared/pf-name.js) */
.pf-name { margin-top: 4px; }
.pf-name > summary { cursor: pointer; color: #ffe8a3; font-size: 0.82rem; font-weight: 600; list-style: none; }
.pf-name > summary::-webkit-details-marker { display: none; }
.pf-name > summary::before { content: "✎ "; }
.pf-name[open] > summary { margin-bottom: 8px; }
.pf-name-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
.pf-name-form label { display: grid; gap: 4px; font-size: 0.78rem; color: rgba(255, 255, 255, 0.75); }
.pf-name-form input {
  width: 100%; min-width: 0; padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.35);
  background: #fff; color: var(--itc-ink); font: inherit; font-size: 0.92rem;
}
.pf-name-form button {
  padding: 8px 14px; border: 0; border-radius: 8px; background: var(--itc-accent); color: var(--itc-ink);
  font: inherit; font-weight: 700; font-size: 0.85rem; cursor: pointer;
}
.pf-name-hint, .pf-name-status { grid-column: 1 / -1; font-size: 0.76rem; color: rgba(255, 255, 255, 0.72); }
.pf-name-status:empty { display: none; }
.pf-name-status.is-error { color: #ffb4a8; }

/* ---------- Tags (AI / ITC / IE) ---------- */
.itc-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 0.74rem; font-weight: 800; letter-spacing: 0.03em; white-space: nowrap;
}
.itc-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.itc-tag--ai  { background: var(--itc-ai-soft);  color: var(--itc-ai-ink); }
.itc-tag--itc { background: var(--itc-itc-soft); color: var(--itc-itc-ink); }
.itc-tag--ie  { background: var(--itc-ie-soft);  color: var(--itc-ie-ink); }
.itc-tag--ai::before  { background: var(--itc-ai); }
.itc-tag--itc::before { background: var(--itc-itc); }
.itc-tag--ie::before  { background: var(--itc-ie); }

/* ---------- Phasenfarben ---------- */
.itc-dot-yellow { --itc-dot: #f4c542; }
.itc-dot-orange { --itc-dot: #f08c2e; }
.itc-dot-green  { --itc-dot: #2fa36b; }
.itc-dot-blue   { --itc-dot: #2f7fd1; }
.itc-dot-purple { --itc-dot: #7b4bd0; }
.itc-dot-red    { --itc-dot: #d94a4a; }
.itc-phase-num {
  display: grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--itc-dot); color: #fff; font-weight: 800; font-size: 0.9rem;
}
.itc-dot-yellow .itc-phase-num { color: var(--itc-ink); }

/* ---------- Phasen-Navigation ---------- */
.itc-phasenav { margin: 18px 0 14px; }
.itc-phasenav ol {
  display: flex; gap: 8px; margin: 0; padding: 2px 2px 8px; list-style: none;
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin;
}
.itc-phasenav a {
  display: flex; align-items: center; gap: 8px; white-space: nowrap; scroll-snap-align: start;
  padding: 6px 14px 6px 6px; border-radius: 999px;
  background: #fff; border: 1px solid var(--itc-line);
  color: var(--itc-ink); font-size: 0.87rem; font-weight: 600; text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.itc-phasenav a:hover { border-color: var(--itc-dot); box-shadow: var(--itc-shadow); }
.itc-phasenav a:focus-visible { outline: none; box-shadow: var(--itc-focus); }
.itc-phasenav .itc-phase-num { width: 24px; height: 24px; font-size: 0.78rem; }

/* ---------- Phasen (Akkordeon) ---------- */
.itc-phases { display: grid; gap: 12px; }
.itc-phase {
  border: 1px solid var(--itc-line); border-radius: var(--itc-radius);
  background: #fff; box-shadow: var(--itc-shadow);
  scroll-margin-top: 12px;
}
.itc-phase > summary {
  display: flex; align-items: center; gap: 14px;
  padding: 16px; cursor: pointer; list-style: none;
  border-radius: var(--itc-radius);
}
.itc-phase > summary::-webkit-details-marker { display: none; }
.itc-phase > summary:focus-visible { outline: none; box-shadow: var(--itc-focus); }
.itc-phase > summary:hover .itc-phase-name { color: var(--itc-primary); }
.itc-phase-title { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.itc-phase-name { font-size: 1.1rem; font-weight: 800; color: var(--itc-ink); line-height: 1.3; transition: color 0.15s ease; }
.itc-phase-meta { font-size: 0.82rem; color: var(--itc-muted); }
.itc-chevron { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--itc-bg); color: var(--itc-muted); transition: transform 0.2s ease; }
.itc-phase[open] > summary { border-bottom: 1px solid var(--itc-line); border-radius: var(--itc-radius) var(--itc-radius) 0 0; box-shadow: inset 4px 0 0 var(--itc-dot); }
.itc-phase[open] .itc-chevron { transform: rotate(180deg); }
.itc-phase-body { display: grid; gap: 14px; padding: 16px 14px 18px; background: var(--itc-bg); border-radius: 0 0 var(--itc-radius) var(--itc-radius); }
.itc-phase-intro { font-size: 0.97rem; }

/* ---------- Aufgaben ---------- */
.itc-task {
  display: grid; gap: 14px;
  padding: 18px 16px;
  border: 1px solid var(--itc-line); border-left: 4px solid var(--itc-primary-line);
  border-radius: var(--itc-radius-sm);
  background: #fff;
  scroll-margin-top: 12px;
}
.itc-task--ai  { border-left-color: var(--itc-ai);  background: linear-gradient(90deg, var(--itc-ai-soft), #fff 140px); }
.itc-task--itc { border-left-color: var(--itc-itc); background: linear-gradient(90deg, var(--itc-itc-soft), #fff 140px); }
.itc-task--ie  { border-left-color: var(--itc-ie);  background: linear-gradient(90deg, var(--itc-ie-soft), #fff 140px); }
.itc-task--sales { border: 1px solid #f0dd9a; border-left: 4px solid var(--itc-accent); background: linear-gradient(135deg, #fffaf0, #fff6d8); }
.itc-task-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.itc-task-head h3 { margin: 0; font-size: 1.12rem; line-height: 1.3; color: var(--itc-ink); flex: 1 1 auto; min-width: 0; }
.itc-task-text { font-size: 0.96rem; }
.itc-task > .itc-btn { justify-self: start; }
.itc-subhead { margin: 4px 0 -4px; font-size: 1rem; color: var(--itc-ink); }

/* ---------- Ressourcen ---------- */
.itc-resources { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.itc-resource {
  display: flex; gap: 12px; height: 100%;
  padding: 12px 14px; border: 1px solid var(--itc-line); border-radius: var(--itc-radius-sm);
  background: #fff; text-decoration: none; color: var(--itc-text) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.itc-resource:hover { border-color: var(--itc-primary-line); box-shadow: var(--itc-shadow); transform: translateY(-1px); }
.itc-resource:focus-visible { outline: none; box-shadow: var(--itc-focus); }
.itc-resource-icon { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 10px; background: var(--itc-primary-soft); color: var(--itc-primary); }
.itc-resource--video .itc-resource-icon { background: #fdecec; color: #c4302b; }
.itc-resource--library .itc-resource-icon { background: #fff4d6; color: #9a6b00; }
.itc-resource-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.itc-resource-body strong { color: var(--itc-ink); font-size: 0.97rem; line-height: 1.3; }
.itc-resource-desc { font-size: 0.87rem; color: var(--itc-muted); line-height: 1.4; }
.itc-resource-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 0.85rem; font-weight: 700; color: var(--itc-primary); overflow-wrap: anywhere; }
.itc-resource-link .itc-icon { width: 0.95em; height: 0.95em; }

.itc-calendar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: var(--itc-radius-sm);
  background: var(--itc-ink); color: #fff !important; font-weight: 700; text-decoration: none;
  box-shadow: var(--itc-shadow);
}
.itc-calendar span { flex: 1; }
.itc-calendar:hover { background: #0f1a3a; }
.itc-calendar:focus-visible { outline: none; box-shadow: var(--itc-focus); }

/* ---------- Formularelemente ---------- */
.itc-input {
  width: 100%; padding: 10px 12px;
  border: 1px solid #cfcbe0; border-radius: var(--itc-radius-sm);
  background: #fff; color: var(--itc-ink);
  font: inherit; font-size: 1rem; line-height: 1.45;
}
.itc-input:focus { outline: none; border-color: var(--itc-primary); box-shadow: var(--itc-focus); }
textarea.itc-input { resize: vertical; min-height: 96px; }
.itc-field { display: grid; gap: 6px; }
.itc-field > span { font-weight: 600; font-size: 0.9rem; color: var(--itc-ink); }
.itc-form-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; }
.itc-status { margin-right: auto; font-size: 0.87rem; color: var(--itc-muted); }
.itc-status.is-ok { color: var(--itc-ok); font-weight: 600; }
.itc-status.is-error { color: var(--itc-error); font-weight: 600; }
.itc-status.is-dirty { color: #9a6b00; }

.itc-locked {
  display: inline-flex; align-items: center; gap: 8px; justify-self: start;
  padding: 8px 14px; border-radius: 999px; border: 1px dashed var(--itc-primary-line);
  background: #fff; font-size: 0.88rem; font-weight: 600; text-decoration: none;
}
.itc-locked:hover { border-style: solid; background: var(--itc-primary-soft); }

/* ---------- Notiz + Antwort ---------- */
.itc-note { display: grid; gap: 10px; padding: 14px; border-radius: var(--itc-radius-sm); background: #fff; border: 1px solid var(--itc-line); }
.itc-note--locked { gap: 8px; }
.itc-note-form { display: grid; gap: 8px; }
.itc-note-prompt { display: block; margin: 0; font-weight: 700; color: var(--itc-ink); font-size: 0.95rem; }
.itc-reply { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 4px 14px 14px 14px; background: var(--itc-primary-soft); }
.itc-reply-avatar { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--itc-primary); color: #fff; }
.itc-reply-avatar .itc-icon { width: 16px; height: 16px; }
.itc-reply-label { margin: 0 0 2px !important; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: var(--itc-primary); }
.itc-reply-text { margin: 0; color: var(--itc-ink); font-size: 0.95rem; }
.itc-reply.is-empty { background: transparent; border: 1px dashed var(--itc-line); padding: 8px 12px; }
.itc-reply.is-empty .itc-reply-avatar { background: var(--itc-line); color: var(--itc-muted); width: 26px; height: 26px; }
.itc-reply.is-empty .itc-reply-text { color: var(--itc-muted); font-size: 0.87rem; font-style: italic; }

/* ---------- Checkliste ---------- */
.itc-checklist {
  display: grid; gap: 16px;
  padding: 16px; border-radius: var(--itc-radius-sm);
  background: #fff; border: 1px solid var(--itc-line);
}
.itc-checks { display: grid; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; }
.itc-check { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; cursor: pointer; transition: background 0.15s ease; }
.itc-check:hover { background: var(--itc-bg); }
.itc-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.itc-check-box {
  display: grid; place-items: center; flex: none; width: 24px; height: 24px;
  border: 2px solid #cfcbe0; border-radius: 7px; background: #fff; color: transparent;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.itc-check-box .itc-icon { width: 15px; height: 15px; stroke-width: 3; }
.itc-check input:checked + .itc-check-box { background: var(--itc-ok); border-color: var(--itc-ok); color: #fff; }
.itc-check input:focus-visible + .itc-check-box { box-shadow: var(--itc-focus); }
.itc-check input:disabled ~ span { color: var(--itc-muted); }
.itc-check input:disabled { cursor: default; }
.itc-checklist-card { display: grid; gap: 8px; justify-items: center; align-content: start; text-align: center; }
.itc-checklist-card img {
  width: 100%; max-width: 240px; border-radius: 12px;
  filter: grayscale(100%) brightness(0.75); opacity: 0.55;
  transition: filter 0.5s ease, opacity 0.5s ease, box-shadow 0.5s ease;
}
.itc-checklist.is-complete .itc-checklist-card img { filter: none; opacity: 1; box-shadow: 0 0 0 4px #c9ecd7, 0 10px 26px rgba(31, 122, 77, 0.25); }
.itc-checklist-progress { margin: 0; font-weight: 700; color: var(--itc-ink); font-size: 0.92rem; }
.itc-checklist.is-complete .itc-checklist-progress { color: var(--itc-ok); }
.itc-meter { display: block; width: 100%; max-width: 240px; height: 8px; border-radius: 999px; background: var(--itc-line); overflow: hidden; }
.itc-meter span { display: block; height: 100%; background: var(--itc-ok); border-radius: inherit; transition: width 0.3s ease; }

/* ---------- Taucherfahrung ---------- */
.itc-exp { display: grid; gap: 16px; padding: 16px; border-radius: var(--itc-radius-sm); background: #fff; border: 1px solid var(--itc-line); }
.itc-exp-grid { display: grid; gap: 18px; }
.itc-exp-inputs { display: grid; gap: 12px; }
.itc-num-group { margin: 0; padding: 0; border: 0; min-width: 0; }
.itc-num-group legend { padding: 0; margin-bottom: 6px; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: var(--itc-muted); }
.itc-num-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.itc-num-row--total { grid-template-columns: minmax(0, 1fr); }
.itc-num-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.itc-num { display: grid; gap: 4px; min-width: 0; }
.itc-num span { font-size: 0.82rem; color: var(--itc-muted); line-height: 1.25; }
.itc-num .itc-input { padding: 9px 10px; font-variant-numeric: tabular-nums; }
.itc-num-row--total .itc-input { font-size: 1.15rem; font-weight: 700; }

.itc-bars { margin: 0; padding: 14px; border-radius: var(--itc-radius-sm); background: var(--itc-bg); }
.itc-bars figcaption { margin-bottom: 10px; font-weight: 800; color: var(--itc-ink); font-size: 0.92rem; }
.itc-bars ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.itc-bar { display: grid; grid-template-columns: minmax(0, 11em) minmax(40px, 1fr) 3.2em; align-items: center; gap: 8px; font-size: 0.82rem; }
.itc-bar-label { color: var(--itc-muted); line-height: 1.25; }
.itc-bar-track { height: 10px; border-radius: 999px; background: #e7e5f0; overflow: hidden; }
.itc-bar-fill { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--itc-primary); transition: width 0.35s ease; }
.itc-bar--total_dives .itc-bar-label { color: var(--itc-ink); font-weight: 700; }
.itc-bar--dives_sea .itc-bar-fill  { background: #2f7fd1; }
.itc-bar--dives_lake .itc-bar-fill { background: #2fa36b; }
.itc-bar--dives_guide .itc-bar-fill  { background: #e0664f; }
.itc-bar--dives_assist .itc-bar-fill { background: #f08c2e; }
.itc-bar--dives_try .itc-bar-fill    { background: #e0b500; }
.itc-bar-value { text-align: right; font-weight: 700; color: var(--itc-ink); font-variant-numeric: tabular-nums; }

.itc-brevets { display: grid; gap: 10px; }
.itc-brevets-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.itc-brevets-title { margin: 0 !important; font-weight: 700; color: var(--itc-ink); font-size: 0.9rem; }
.itc-brevet-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.itc-brevet-list li:not(.is-empty) {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px 4px 4px; border-radius: 999px; border: 1px solid var(--itc-line); background: var(--itc-bg);
  font-size: 0.83rem; font-weight: 600; color: var(--itc-ink);
}
.itc-brevet-list img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: #fff; }

/* ---------- Kriterien / Selbsteinschätzung ---------- */
.itc-doc {
  display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 14px; align-items: start;
  padding: 14px; border-radius: var(--itc-radius-sm); background: #fff; border: 1px solid var(--itc-line);
}
.itc-doc--nothumb { grid-template-columns: minmax(0, 1fr); }
.itc-doc-thumb { display: block; border-radius: 8px; overflow: hidden; border: 1px solid var(--itc-line); box-shadow: 0 2px 8px rgba(23, 37, 77, 0.1); transition: transform 0.15s ease; }
.itc-doc-thumb:hover { transform: translateY(-2px); }
.itc-doc-thumb img { display: block; width: 100%; height: auto; }
.itc-doc-body { display: grid; gap: 8px; justify-items: start; min-width: 0; font-size: 0.93rem; }
.itc-doc-body h4 { margin: 0; font-size: 1rem; color: var(--itc-ink); }
.itc-doc-body p { margin: 0; }
.itc-self-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.itc-upload { display: grid; gap: 6px; width: 100%; padding-top: 10px; border-top: 1px solid var(--itc-line); }
.itc-upload-label { margin: 0; font-weight: 600; font-size: 0.88rem; color: var(--itc-ink); }
.itc-upload-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.itc-file {
  position: relative; display: inline-flex; align-items: center; gap: 8px; flex: 1 1 180px; min-width: 0;
  padding: 8px 14px; border: 1px dashed #cfcbe0; border-radius: 999px; background: var(--itc-bg);
  font-size: 0.87rem; color: var(--itc-muted); cursor: pointer;
}
.itc-file:hover, .itc-file:focus-within { border-color: var(--itc-primary); color: var(--itc-primary); }
.itc-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.itc-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Eigene Bewertung ---------- */
.itc-eval {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px; border-radius: var(--itc-radius-sm); background: #fff; border: 1px solid var(--itc-line);
}
.itc-eval-body { flex: 1 1 140px; min-width: 0; }
.itc-eval-label { margin: 0 !important; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: var(--itc-muted); }
.itc-eval-state { margin: 0; font-weight: 700; color: var(--itc-ink); font-size: 0.93rem; }
.itc-eval .itc-locked { margin-top: 2px; padding: 4px 10px; }
.itc-eval-thumb {
  position: relative; display: block; flex: none; width: 48px; aspect-ratio: 3 / 4;
  border-radius: 6px; border: 2px solid var(--itc-line); background: #fff;
}
.itc-eval-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 4px; display: block; }
.itc-eval.is-missing .itc-eval-thumb img { filter: grayscale(1); opacity: 0.45; }
.itc-eval.is-missing .itc-eval-state { color: var(--itc-muted); font-weight: 600; }
.itc-eval.is-unrated .itc-eval-state { color: #9a6b00; }
.itc-eval.is-failed { border-color: #f3c9bd; background: #fdf6f3; }
.itc-eval.is-failed .itc-eval-thumb { border-color: #e9a58f; }
.itc-eval.is-failed .itc-eval-state { color: #b4472a; }
.itc-eval-badge {
  position: absolute; right: -9px; bottom: -9px; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18); font-size: 0.9rem;
}
.is-level-1 .itc-eval-thumb, .itc-eval-thumb.is-level-1 { border-color: #7fc98f; box-shadow: 0 0 0 3px #e3f5e7; }
.is-level-2 .itc-eval-thumb, .itc-eval-thumb.is-level-2 { border-color: #d6a3ff; box-shadow: 0 0 10px rgba(214, 163, 255, 0.7); }
.is-level-3 .itc-eval-thumb, .itc-eval-thumb.is-level-3 {
  border: 3px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #ff5f6d, #ffc371, #f9f871, #4fd1a5, #4fa8ff, #b57bff) border-box;
  box-shadow: 0 0 14px rgba(181, 123, 255, 0.45);
}
.itc-eval.is-level-1 { border-color: #cdebd5; background: #f6fcf7; }
.itc-eval.is-level-2 { border-color: #ecd8ff; background: #fcf8ff; }
.itc-eval.is-level-3 { border-color: #e6dcff; background: linear-gradient(135deg, #fff8f5, #f5fbff 60%, #faf5ff); }
.itc-eval.is-level-1 .itc-eval-state { color: var(--itc-ok); }
.itc-eval.is-level-2 .itc-eval-state, .itc-eval.is-level-3 .itc-eval-state { color: var(--itc-primary); }

.itc-top { display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--itc-radius-sm); background: rgba(255, 255, 255, 0.7); border: 1px dashed var(--itc-line); }
.itc-top-title { margin: 0 !important; font-weight: 800; font-size: 0.85rem; color: var(--itc-ink); }
.itc-top-list { display: flex; gap: 16px; margin: 0; padding: 0 0 6px; list-style: none; }
.itc-top-list .itc-eval-thumb { width: 56px; }

/* ---------- Brevet-Auswahl (Dialog) ---------- */
.itc-dialog {
  width: min(760px, calc(100vw - 20px)); max-height: calc(100dvh - 20px);
  padding: 0; border: 0; border-radius: 18px;
  box-shadow: 0 24px 70px rgba(23, 37, 77, 0.35); color: var(--itc-ink);
}
.itc-dialog::backdrop { background: rgba(23, 20, 60, 0.5); }
.itc-dialog-form { display: flex; flex-direction: column; max-height: calc(100dvh - 20px); margin: 0; }
.itc-dialog-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; padding: 16px 18px; border-bottom: 1px solid var(--itc-line); }
.itc-dialog-head h2 { margin: 0; font-size: 1.15rem; color: var(--itc-primary); }
.itc-picker-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px;
  margin: 0; padding: 16px 18px; list-style: none; overflow-y: auto;
}
.itc-pick {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%;
  padding: 10px 8px; border: 2px solid var(--itc-line); border-radius: 12px; background: #fff;
  text-align: center; font-size: 0.8rem; font-weight: 600; line-height: 1.25; cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.itc-pick:hover { border-color: var(--itc-primary-line); }
.itc-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.itc-pick img { width: 64px; height: 64px; object-fit: contain; }
.itc-pick-mark {
  position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; border: 2px solid #cfcbe0; background: #fff; color: transparent;
}
.itc-pick-mark .itc-icon { width: 13px; height: 13px; stroke-width: 3; }
.itc-pick:has(input:checked) { border-color: var(--itc-primary); background: var(--itc-primary-soft); }
.itc-pick input:checked ~ .itc-pick-mark { background: var(--itc-primary); border-color: var(--itc-primary); color: #fff; }
.itc-pick input:focus-visible ~ .itc-pick-mark { box-shadow: var(--itc-focus); }
.itc-dialog-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--itc-line); background: var(--itc-bg); }

/* ---------- Toast ---------- */
.itc-toast {
  position: fixed; left: 50%; bottom: 20px; z-index: 1000;
  transform: translate(-50%, 10px); max-width: calc(100vw - 32px);
  padding: 11px 18px; border-radius: 12px;
  background: var(--itc-ink); color: #fff; font-weight: 600; font-size: 0.92rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease;
}
.itc-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Größere Bildschirme ---------- */
@media (min-width: 560px) {
  .itc-resources { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
  .itc-doc { grid-template-columns: 110px minmax(0, 1fr); }
  .itc-doc--nothumb { grid-template-columns: minmax(0, 1fr); }
  .itc-checklist { grid-template-columns: minmax(0, 1fr) 220px; align-items: start; }
}
@media (min-width: 760px) {
  .itc-hero { grid-template-columns: minmax(0, 1fr) 280px; padding: 34px 32px; }
  .itc-phase > summary { padding: 18px 20px; }
  .itc-phase-body { padding: 20px 22px 24px; gap: 16px; }
  .itc-task { padding: 20px 22px; }
  .itc-exp-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .itc-checklist { grid-template-columns: minmax(0, 1fr) 260px; }
}

/* ---------- Kleine Handys ---------- */
@media (max-width: 600px) {
  .itc-main.pf-tool-main { padding: 12px 10px 20px; }
  .itc-hero { border-radius: 18px; padding: 20px 16px; }
  .itc-hero-text p { font-size: 0.93rem; }
}
@media (max-width: 380px) {
  .itc-phase-body { padding-inline: 10px; }
  .itc-task { padding: 16px 12px; }
  .itc-doc { grid-template-columns: minmax(0, 1fr); }
  .itc-doc-thumb { max-width: 120px; }
}

/* ---------- Eingebettet (?minimal=true) ---------- */
html.pf-embed-minimal .itc-main.pf-tool-main { padding: 0 8px; }

@media (prefers-reduced-motion: reduce) {
  .itc-resource, .itc-btn, .itc-chevron, .itc-bar-fill, .itc-meter span, .itc-checklist-card img, .itc-toast, .itc-doc-thumb { transition: none; }
  .itc-resource:hover, .itc-doc-thumb:hover { transform: none; }
}

/* ===========================================
   Fahrplan-Übersicht (Okt. 2026):
   Schnellzugriff, „Als Nächstes“, Kurskarte, Status je Phase/Aufgabe
   =========================================== */

/* ---------- Schnellzugriff (bleibt beim Scrollen oben) ---------- */
.itc-quick {
  position: sticky; top: 0; z-index: 20;
  margin: 14px -4px 0; padding: 8px 4px;
  background: rgba(247, 247, 251, 0.92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.itc-quick ul {
  display: flex; gap: 8px; margin: 0; padding: 2px; list-style: none;
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
}
.itc-quick ul::-webkit-scrollbar { display: none; }
.itc-quick-link {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; scroll-snap-align: start;
  padding: 8px 14px; border-radius: 999px;
  background: #fff; border: 1px solid var(--itc-primary-line);
  color: var(--itc-primary) !important; font-size: 0.88rem; font-weight: 700; text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.itc-quick-link small { font-weight: 600; color: var(--itc-muted); font-size: 0.78rem; }
.itc-quick-link:hover { background: var(--itc-primary-soft); border-color: var(--itc-primary); }
.itc-quick-link:focus-visible { outline: none; box-shadow: var(--itc-focus); }

/* ---------- Karten oben: „Als Nächstes“ + Kurs ---------- */
.itc-dash { display: grid; gap: 12px; margin-top: 10px; }
.itc-card-eyebrow {
  display: flex; align-items: center; gap: 6px; margin: 0 0 6px !important;
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--itc-primary);
}
.itc-next, .itc-course {
  padding: 18px; border-radius: var(--itc-radius);
  background: #fff; border: 1px solid var(--itc-line); box-shadow: var(--itc-shadow);
}
.itc-next { display: flex; flex-direction: column; gap: 6px; border-top: 4px solid var(--itc-accent); }
.itc-next h2, .itc-course h2 { margin: 0; font-size: 1.2rem; line-height: 1.3; color: var(--itc-ink); }
.itc-next-phase { display: flex; align-items: center; gap: 8px; margin: 0 !important; font-size: 0.85rem; font-weight: 700; color: var(--itc-muted); }
.itc-next-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--itc-dot); }
.itc-next-text { font-size: 0.94rem; }
.itc-next-hint { font-size: 0.86rem; color: var(--itc-muted); }
.itc-next .itc-btn { align-self: flex-start; margin-top: 4px; }
.itc-next-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: auto; padding-top: 12px; }
.itc-next-progress .itc-meter { flex: 1 1 140px; }
.itc-next-count { font-size: 0.85rem; color: var(--itc-muted); }
.itc-next.is-complete { border-top-color: var(--itc-ok); }

.itc-courses { display: grid; gap: 12px; scroll-margin-top: 70px; }
.itc-course-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.itc-course-head p { margin: 0; }
.itc-course-icon {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px;
  background: var(--itc-primary-soft); color: var(--itc-primary);
}
.itc-course-sub { margin: 0 0 8px !important; font-size: 0.82rem; font-weight: 700; color: var(--itc-muted); }
.itc-events { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.itc-event { display: flex; gap: 12px; align-items: flex-start; }
.itc-event-date {
  display: grid; place-items: center; flex: none; width: 46px; padding: 5px 0; border-radius: 10px;
  background: var(--itc-bg); border: 1px solid var(--itc-line); line-height: 1.1; text-align: center;
}
.itc-event-date b { font-size: 1.1rem; color: var(--itc-ink); }
.itc-event-date span { font-size: 0.7rem; color: var(--itc-muted); text-transform: uppercase; }
.itc-event.is-today .itc-event-date { background: var(--itc-accent); border-color: var(--itc-accent); }
.itc-event-body { display: flex; flex-direction: column; min-width: 0; padding-top: 2px; }
.itc-event-body strong { color: var(--itc-ink); font-size: 0.95rem; overflow-wrap: anywhere; }
.itc-event-meta { display: inline-flex; align-items: center; gap: 4px; font-size: 0.83rem; color: var(--itc-muted); }
.itc-event-meta .itc-icon { width: 0.95em; height: 0.95em; }
.itc-events-all { margin-top: 12px; border-top: 1px solid var(--itc-line); padding-top: 10px; }
.itc-events-all > summary {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
  font-size: 0.88rem; font-weight: 700; color: var(--itc-primary);
}
.itc-events-all > summary::-webkit-details-marker { display: none; }
.itc-events-all[open] > summary .itc-icon { transform: rotate(180deg); }
.itc-events-all .itc-events { margin-top: 10px; max-height: 360px; overflow-y: auto; }
/* Eigener Kursplan: eigene Zuteilung, Vorbereitung, Abo-Link, Termin bei der Aufgabe */
.itc-event-mine { margin-top: 3px; padding: 3px 8px; border-radius: 8px; background: var(--itc-ai-soft); color: var(--itc-ai-ink); font-size: 0.83rem; }
.itc-event-mine b { color: var(--itc-ink); }
.itc-event-prep { margin-top: 3px; font-size: 0.8rem; color: var(--itc-muted); overflow-wrap: anywhere; }
.itc-feed { margin-top: 12px; border-top: 1px solid var(--itc-line); padding-top: 10px; }
.itc-feed > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; font-size: 0.88rem; font-weight: 700; color: var(--itc-primary); }
.itc-feed > summary::-webkit-details-marker { display: none; }
.itc-feed[open] > summary .itc-icon:last-child { transform: rotate(180deg); }
.itc-feed-body { display: grid; gap: 8px; margin-top: 10px; font-size: 0.88rem; }
.itc-feed-body p { margin: 0; }
.itc-feed-url { display: grid; gap: 4px; color: var(--itc-muted); font-size: 0.82rem; }
.itc-feed-url input { width: 100%; padding: 8px 10px; border: 1px solid var(--itc-line); border-radius: 8px; font: inherit; font-size: 0.8rem; color: var(--itc-text); background: var(--itc-bg); }
.itc-task-date { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 10px !important; padding: 8px 12px; border-radius: var(--itc-radius-sm);
  background: var(--itc-primary-soft); color: var(--itc-text); font-size: 0.9rem; }
.itc-task-date > .itc-icon { flex: none; margin-top: 3px; color: var(--itc-primary); }
.itc-task-date .itc-event-mine { display: block; margin-top: 4px; }

/* ---------- Status in Phasen-Navigation und Phasen ---------- */
.itc-phasenav a.is-done { color: var(--itc-muted); }
.itc-phasenav a.is-done .itc-phase-num, .itc-phase.is-done > summary .itc-phase-num { background: var(--itc-ok); color: #fff; }
.itc-phasenav a.is-current { border-color: var(--itc-dot); box-shadow: 0 0 0 2px var(--itc-dot) inset; }
.itc-phasenav-count { font-size: 0.75rem; font-weight: 700; color: var(--itc-muted); }
.itc-phase-num .itc-icon { width: 15px; height: 15px; stroke-width: 3; }
.itc-phase-meta { display: inline-flex; align-items: center; gap: 8px; }
.itc-meter--mini { width: 70px; height: 5px; }

/* ---------- Status je Aufgabe ---------- */
.itc-done-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  background: #e5f4ec; color: var(--itc-ok); font-size: 0.76rem; font-weight: 800;
}
.itc-done-pill[hidden] { display: none; }
.itc-done-pill .itc-icon { stroke-width: 3; width: 0.95em; height: 0.95em; }
.itc-task.is-done { border-left-color: var(--itc-ok); }
.itc-taskdone { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 4px; border-top: 1px dashed var(--itc-line); }
.itc-taskdone .itc-btn { margin-top: 10px; }
.itc-task.is-done .itc-taskdone .itc-btn { color: var(--itc-muted) !important; border-color: var(--itc-line); }

@media (min-width: 760px) {
  .itc-dash { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .itc-dash--single { grid-template-columns: minmax(0, 1fr); }
  .itc-next, .itc-course { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .itc-quick-link { transition: none; }
}
.itc-intro-more { margin-top: 4px; }
.itc-intro-more > summary {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
  color: #ffe8a3; font-weight: 700; font-size: 0.92rem;
}
.itc-intro-more > summary::-webkit-details-marker { display: none; }
.itc-intro-more[open] > summary { margin-bottom: 8px; }
.itc-intro-more[open] > summary .itc-icon { transform: rotate(180deg); }
.itc-hero-text .itc-intro-more p { max-width: 64ch; font-size: 0.98rem; }
/* Sprungziele nicht unter der festen Schnellzugriff-Leiste verstecken */
.itc-phase, .itc-task { scroll-margin-top: 64px; }

/* ===========================================
   Pflichtteile laut SSI Training Record
   Statusfarben: grau = offen, gelb = in Arbeit, grün = alles bestanden
   =========================================== */
.itc-body {
  --itc-req-open: #c9c6d8;
  --itc-req-progress: #f0b429;  --itc-req-progress-soft: #fff7e0;
  --itc-req-done: #1f9d5a;      --itc-req-done-soft: #e7f6ee;
}

/* ---------- Karte „Dein Weg zum Abschluss“ ---------- */
.itc-reqcard {
  margin-top: 12px; padding: 18px; border-radius: var(--itc-radius);
  background: #fff; border: 2px solid var(--itc-primary-line); box-shadow: var(--itc-shadow);
  scroll-margin-top: 70px;
}
.itc-reqcard.is-complete { border-color: var(--itc-req-done); background: linear-gradient(180deg, var(--itc-req-done-soft), #fff 160px); }
.itc-reqcard-head h2 { margin: 0 0 4px; font-size: 1.25rem; color: var(--itc-ink); }
.itc-reqcard-head p { margin: 0 0 4px !important; }
.itc-reqcard-head .itc-icon { vertical-align: -2px; }
.itc-reqcard-cols { display: grid; gap: 12px; margin-top: 14px; }
.itc-reqcol {
  padding: 14px; border-radius: var(--itc-radius-sm);
  border: 2px solid var(--itc-req-open); background: #fff;
}
.itc-reqcol.is-progress { border-color: var(--itc-req-progress); background: linear-gradient(180deg, var(--itc-req-progress-soft), #fff 90px); }
.itc-reqcol.is-complete { border-color: var(--itc-req-done); background: var(--itc-req-done-soft); }
.itc-reqcol > header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 10px; }
.itc-reqcol h3 { margin: 0; flex: 1 1 auto; font-size: 1.02rem; color: var(--itc-ink); }
.itc-reqcol--ai h3::before, .itc-reqcol--itc h3::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; }
.itc-reqcol--ai h3::before { background: var(--itc-ai); }
.itc-reqcol--itc h3::before { background: var(--itc-itc); }
.itc-reqcol-count { font-weight: 800; color: var(--itc-ink); font-size: 0.9rem; }
.itc-reqcol > header .itc-meter { flex: 1 1 100%; max-width: none; }
.itc-reqcol-done, .itc-req-banner {
  margin: 0 0 10px !important; padding: 10px 12px; border-radius: 10px;
  background: var(--itc-req-done); color: #fff; font-weight: 800; font-size: 0.98rem;
}

.itc-req-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.itc-req {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: baseline; gap: 2px 8px;
  padding: 6px 4px; border-bottom: 1px solid var(--itc-line); font-size: 0.92rem;
}
.itc-req:last-child { border-bottom: 0; }
.itc-req a { color: var(--itc-text) !important; text-decoration: none; }
.itc-req a:hover .itc-req-label { color: var(--itc-primary); text-decoration: underline; }
.itc-req-label b { color: var(--itc-ink); white-space: nowrap; }
.itc-req-mark { text-align: center; font-weight: 800; color: var(--itc-muted); }
.itc-req-state { font-size: 0.8rem; font-weight: 700; color: var(--itc-muted); text-align: right; }
.itc-req.is-done .itc-req-mark, .itc-req.is-done .itc-req-state { color: var(--itc-req-done); }
.itc-req.is-ait .itc-req-state, .itc-req.is-it .itc-req-state { color: #7b4bd0; }
.itc-req.is-failed .itc-req-state { color: #b06a00; }
@media (max-width: 460px) {
  .itc-req { grid-template-columns: 22px minmax(0, 1fr); }
  .itc-req-state { grid-column: 2; text-align: left; }
}

/* ---------- Phasen: Rahmen nach Pflicht-Stand ---------- */
.itc-phase.req-open     { border: 2px solid var(--itc-req-open); }
.itc-phase.req-progress { border: 2px solid var(--itc-req-progress); }
.itc-phase.req-done     { border: 3px solid var(--itc-req-done); }
.itc-phase.req-progress > summary { background: linear-gradient(90deg, var(--itc-req-progress-soft), #fff 60%); }
.itc-phase.req-done > summary { background: linear-gradient(90deg, var(--itc-req-done-soft), #fff 70%); }
.itc-phase-reqmeta { display: block; font-size: 0.82rem; font-weight: 800; color: var(--itc-ink); }
.itc-phase.req-progress .itc-phase-reqmeta { color: #8a5a00; }
.itc-phase.req-done .itc-phase-reqmeta { color: var(--itc-req-done); }
.itc-phasenav a.req-progress { border-color: var(--itc-req-progress); }
.itc-phasenav a.req-done { border-color: var(--itc-req-done); background: var(--itc-req-done-soft); }

.itc-phase-req {
  padding: 14px; border-radius: var(--itc-radius-sm);
  background: #fff; border: 2px dashed var(--itc-req-open);
}
.itc-phase.req-progress .itc-phase-req { border-color: var(--itc-req-progress); border-style: solid; }
.itc-phase-req.is-complete { border: 2px solid var(--itc-req-done); background: var(--itc-req-done-soft); }
.itc-phase-req-title { margin: 0 0 8px !important; font-weight: 800; color: var(--itc-ink); }
.itc-phase-req-title span { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--itc-bg); font-size: 0.82rem; }

/* ---------- Schilder an Aufgaben ---------- */
.itc-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 0.74rem; font-weight: 800; white-space: nowrap; }
.itc-badge--required { background: var(--itc-ink); color: #fff; }
.itc-badge--optional { background: var(--itc-bg); color: var(--itc-muted); border: 1px dashed var(--itc-line); }
.itc-confirm {
  display: flex; align-items: center; gap: 8px; margin: 0 !important; padding: 10px 12px; border-radius: 10px;
  background: var(--itc-bg); color: var(--itc-muted); font-size: 0.9rem; font-weight: 600;
}
.itc-confirm.is-done { background: var(--itc-req-done-soft); color: var(--itc-req-done); }
.itc-quick-link--req { background: var(--itc-primary); color: #fff !important; border-color: var(--itc-primary); }
.itc-quick-link--req small { color: #ffe8a3; }
.itc-quick-link--req:hover { background: var(--itc-primary-dark); }

@media (min-width: 760px) {
  .itc-reqcard { padding: 22px; }
  .itc-reqcard-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ===========================================
   Wunschliste 10.10.2026
   =========================================== */

/* Schnellzugriff: umbrechen statt aus dem Rahmen laufen (meist zwei Zeilen).
   Auf dem Handy nicht festgeklebt, sonst nähme die Leiste zu viel Platz weg. */
.itc-quick ul { flex-wrap: wrap; overflow: visible; justify-content: flex-start; gap: 6px 8px; }
.itc-quick-link { padding: 7px 12px; }
@media (max-width: 759px) {
  .itc-quick { position: static; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .itc-phase, .itc-task { scroll-margin-top: 12px; }
}

/* Quiz-Karte mit Ergebnis */
.itc-quiz {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 14px; align-items: center;
  padding: 14px 16px; border-radius: var(--itc-radius-sm);
  border: 2px solid var(--itc-primary-line); background: linear-gradient(135deg, var(--itc-primary-soft), #fff 70%);
}
.itc-quiz-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--itc-primary); color: #fff; }
.itc-quiz-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.itc-quiz-body strong { color: var(--itc-ink); font-size: 1rem; }
.itc-quiz-result { margin-top: 4px; font-size: 0.86rem; font-weight: 700; color: var(--itc-muted); }
.itc-quiz.is-started .itc-quiz-result { color: #8a5a00; }
.itc-quiz.is-done { border-color: var(--itc-req-done); }
.itc-quiz.is-done .itc-quiz-result { color: var(--itc-req-done); }
.itc-quiz > .itc-btn { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 560px) {
  .itc-quiz { grid-template-columns: auto minmax(0, 1fr) auto; }
  .itc-quiz > .itc-btn { grid-column: auto; }
}
.itc-phase-body > .itc-quiz { margin-bottom: 2px; }

/* Manual selbst abhaken */
.itc-selfconfirm { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.itc-selfconfirm form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.itc-check-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; text-align: left;
  border: 1px solid var(--itc-line); border-radius: 10px; background: #fff; color: var(--itc-text);
  font: inherit; font-size: 0.95rem; cursor: pointer;
}
.itc-check-btn:hover { border-color: var(--itc-primary); }
.itc-check-btn:focus-visible { outline: none; box-shadow: var(--itc-focus); }
.itc-check-btn .itc-check-box { flex: none; }
.itc-selfconfirm .itc-check-box {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px;
  border: 2px solid var(--itc-primary-line); background: #fff; color: transparent;
}
.itc-selfconfirm .itc-check-box .itc-icon { stroke-width: 3; width: 15px; height: 15px; }
.itc-selfconfirm .is-done .itc-check-btn { border-color: var(--itc-req-done); background: var(--itc-req-done-soft); }
.itc-selfconfirm .is-done .itc-check-box { background: var(--itc-req-done); border-color: var(--itc-req-done); color: #fff; }

/* Zusatztraining und Hinweis „Durchfallen ist eingeplant“ */
.itc-badge--training { background: #efe8fb; color: #5b2fb0; border: 1px dashed #b9a2e6; }
.itc-req-note { margin: 10px 0 0 !important; padding: 8px 12px; border-radius: 10px; background: #f3effc; color: #4a2a8f; font-size: 0.88rem; font-weight: 600; }
.itc-reqcard-head .itc-req-note { margin-top: 8px !important; }

/* Online-Bewertung: Hinweis „akzeptieren“ */
.itc-eval-accept { margin: 4px 0 0 !important; font-size: 0.85rem; font-weight: 700; color: #8a5a00; }
.itc-eval-accepted { display: flex; align-items: center; gap: 4px; margin: 4px 0 0 !important; font-size: 0.85rem; font-weight: 700; color: var(--itc-ok); }

/* ---------- ITC Prep: ITC Manual und Selbstcheck ---------- */
.itc-manual {
  margin: 14px 0; border: 1px solid var(--itc-primary-line); border-radius: var(--itc-radius-sm);
  background: var(--itc-primary-soft); overflow: hidden;
}
.itc-manual-ref {
  display: flex; align-items: center; gap: 8px; margin: 0; padding: 9px 14px;
  background: var(--itc-primary); color: #fff; font-weight: 700; font-size: 0.85rem;
}
.itc-manual-ref .itc-icon { width: 18px; height: 18px; }
.itc-manual-cols { display: grid; grid-template-columns: 1fr 1fr; }
.itc-manual-cols > div { padding: 12px 14px; }
.itc-manual-cols > div + div { border-left: 1px solid var(--itc-primary-line); background: #fff; }
.itc-manual h4 { margin: 0 0 6px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--itc-primary); }
.itc-manual-plus h4 { color: var(--itc-ok); }
.itc-manual p { margin: 0 0 6px; font-size: 0.93rem; }
.itc-manual p:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
  .itc-manual-cols { grid-template-columns: 1fr; }
  .itc-manual-cols > div + div { border-left: 0; border-top: 1px solid var(--itc-primary-line); }
}

.itc-check-q { margin: 14px 0; padding: 12px 14px; border: 1px dashed var(--itc-line); border-radius: var(--itc-radius-sm); background: #fff; }
.itc-check-q-title { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-weight: 700; color: var(--itc-ink); }
.itc-check-q-title .itc-icon { width: 18px; height: 18px; color: var(--itc-ok); }
.itc-check-q ul { margin: 0 0 8px; padding: 0; list-style: none; }
.itc-check-q li + li { border-top: 1px solid var(--itc-line); }
.itc-check-q summary {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
  padding: 8px 0; cursor: pointer; list-style: none; font-size: 0.94rem;
}
.itc-check-q summary::-webkit-details-marker { display: none; }
.itc-check-q summary .itc-icon { flex: none; width: 18px; height: 18px; transition: transform 0.2s; color: var(--itc-muted); }
.itc-check-q details[open] summary .itc-icon { transform: rotate(180deg); }
.itc-check-q details p { margin: 0 0 10px; padding: 6px 10px; border-radius: 8px; background: var(--itc-bg); font-size: 0.88rem; color: var(--itc-muted); }
.itc-check-q > .itc-muted { margin: 0; font-size: 0.82rem; }

/* ---------- SSI-Hinweis: „? mit SSI-Logo“ + Popover ---------- */
.itc-ssi-btn {
  display: inline-flex; align-items: center; gap: 3px; vertical-align: middle;
  padding: 2px 6px 2px 5px; border: 1px solid #f0c9c4; border-radius: 999px; background: #fff;
  color: #d8392b; font: inherit; font-size: 0.75rem; font-weight: 800; line-height: 1; cursor: pointer;
}
.itc-ssi-btn img { display: block; height: 11px; width: auto; }
.itc-ssi-btn:hover, .itc-ssi-btn:focus-visible { background: #fff3f1; border-color: #d8392b; outline: none; }
.itc-hero .itc-ssi-btn { border-color: rgba(255, 255, 255, 0.5); }
.itc-ssi-pop {
  max-width: min(440px, calc(100vw - 32px)); margin: auto; padding: 18px 20px;
  border: 0; border-radius: var(--itc-radius); background: #fff; color: var(--itc-text);
  box-shadow: 0 20px 60px rgba(23, 37, 77, 0.3); line-height: 1.5;
}
.itc-ssi-pop::backdrop { background: rgba(23, 37, 77, 0.35); }
.itc-ssi-pop p { margin: 0 0 10px; }
.itc-ssi-kind { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; }
.itc-ssi-kind img { height: 16px; width: auto; }
.itc-ssi-kind--standard { color: #b42318; }
.itc-ssi-kind--tip { color: var(--itc-itc-ink); }
.itc-ssi-src { font-size: 0.8rem; color: var(--itc-muted); }

/* ---------- Das Wichtigste / freiwillige Hilfsmittel ---------- */
.itc-essential { margin: 14px 0; padding: 12px 14px; border-left: 4px solid var(--itc-ok); border-radius: var(--itc-radius-sm); background: #eef8f2; }
.itc-essential-label { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-weight: 800; font-size: 0.85rem; color: var(--itc-ok); text-transform: uppercase; letter-spacing: 0.04em; }
.itc-essential-label .itc-icon { width: 18px; height: 18px; }
.itc-essential > p { margin: 0 0 6px; }
.itc-essential .itc-quiz, .itc-essential .itc-resources { margin-bottom: 0; }
.itc-optional { margin: 12px 0; border: 1px dashed var(--itc-line); border-radius: var(--itc-radius-sm); background: #fff; }
.itc-optional > summary {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; list-style: none;
  color: var(--itc-muted); font-weight: 600; font-size: 0.92rem;
}
.itc-optional > summary::-webkit-details-marker { display: none; }
.itc-optional > summary .itc-icon { margin-left: auto; width: 18px; height: 18px; transition: transform 0.2s; }
.itc-optional[open] > summary .itc-icon { transform: rotate(180deg); }
.itc-optional-body { padding: 0 14px 6px; }

/* ---------- SSI-Konto (ssi.js, Okt. 2026) ---------- */
.itc-myssi {
  margin: 0 0 14px; padding: 14px 16px; border-radius: var(--itc-radius-sm);
  background: var(--itc-primary-soft); border: 1px solid var(--itc-primary-line); border-left: 5px solid var(--itc-primary);
}
.itc-myssi-title { margin: 0 0 4px; font-size: 1.02rem; color: var(--itc-ink); }
.itc-myssi-intro { font-size: 0.92rem; }
.itc-myssi-linked { font-weight: 600; color: var(--itc-ink); font-size: 0.92rem; }
.itc-myssi-form { display: grid; gap: 12px; margin-top: 10px; }
.itc-myssi-fields { display: grid; gap: 12px; }
.itc-myssi-form .itc-btn { justify-self: start; }
.itc-myssi-form .itc-muted { margin: 0; }
.itc-myssi-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 0.88rem; line-height: 1.45; }
.itc-myssi-consent input { margin-top: 4px; flex: none; }
.itc-myssi-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.itc-myssi-unlink { background: none; border: 0; padding: 6px 4px; color: var(--itc-muted); text-decoration: underline; cursor: pointer; font: inherit; font-size: 0.87rem; }
.itc-myssi-msg { margin: 10px 0 0 !important; font-size: 0.9rem; }
.itc-myssi-msg:empty { display: none; }
.itc-myssi-msg.is-bad { color: var(--itc-error); font-weight: 600; }
.itc-myssi-note {
  margin: 2px 0 6px 46px !important; padding: 6px 10px; border-radius: 8px;
  background: var(--itc-bg); font-size: 0.85rem; line-height: 1.45; color: var(--itc-text);
}
.itc-myssi-note.is-ok { background: var(--itc-ie-soft); }
.itc-myssi-note.is-todo { background: var(--itc-ai-soft); }
.itc-exp > .itc-myssi-note { margin: 0 !important; }
/* Werte aus SSI: gesperrt (nicht selbst ankreuzbar/änderbar) */
.itc-checks li.is-ssi .itc-check { cursor: default; }
.itc-checks li.is-ssi .itc-check:hover { background: transparent; }
.itc-checks li.is-ssi .itc-check-box { opacity: 0.85; }
.itc-num.is-ssi .itc-input { background: var(--itc-bg); color: var(--itc-ink); cursor: default; }
.itc-myssi-badge {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--itc-primary); color: #fff; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.02em;
}
@media (min-width: 640px) {
  .itc-myssi-fields { grid-template-columns: repeat(2, minmax(0, 240px)); }
}


/* ---------- ITC Prep im ITC, Schaufenster, Erwartung (Okt. 2026) ---------- */
.itc-prepcard {
  margin-top: 12px; padding: 18px; border-radius: var(--itc-radius);
  background: #fff; border: 2px solid var(--itc-primary-line); box-shadow: var(--itc-shadow); scroll-margin-top: 70px;
}
.itc-prepcard-head { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; }
.itc-prepcard-head h2 { margin: 0 0 4px; font-size: 1.25rem; color: var(--itc-ink); }
.itc-prepcard-head p { margin: 0 !important; max-width: 60ch; }
.itc-prepmods { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; }
.itc-prepmods a { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--itc-radius-sm); border: 1px solid var(--itc-line); background: #fff; color: var(--itc-text); text-decoration: none; font-size: 0.88rem; }
.itc-prepmods a:hover { border-color: var(--itc-primary); }
.itc-prepmods small { margin-left: auto; color: var(--itc-muted); font-variant-numeric: tabular-nums; }
.itc-prepmods-mark { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--itc-dot, var(--itc-line)); color: #fff; }
.itc-prepmods-mark .itc-icon { width: 12px; height: 12px; }
.itc-prepmods .is-done .itc-prepmods-mark { background: var(--itc-ok); border-color: var(--itc-ok); }
.itc-prepmods .is-progress .itc-prepmods-mark { background: var(--itc-dot, var(--itc-primary-soft)); }
.itc-prepcard-sub { margin: 14px 0 6px !important; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--itc-muted); }
.itc-prepquiz { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.itc-prepquiz li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 0.9rem; }
.itc-prepquiz li.is-done [data-pf-quiz-result] { color: var(--itc-ok); font-weight: 600; }
.itc-showcase {
  display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between;
  margin-top: 12px; padding: 16px 18px; border-radius: var(--itc-radius); background: var(--itc-ai-soft); border: 2px solid var(--itc-accent);
}
.itc-showcase h2 { margin: 0 0 4px; font-size: 1.1rem; color: var(--itc-ink); }
.itc-showcase p { margin: 0 !important; max-width: 62ch; }
.itc-locked--course { cursor: default; border-style: dashed; color: var(--itc-muted); margin: 8px 0 0 !important; }
.itc-locked--course:hover { border-style: dashed; background: #fff; }
.itc-expect { margin: 0 0 14px; padding: 12px 14px; border-radius: var(--itc-radius-sm); background: var(--itc-itc-soft); border-left: 4px solid var(--itc-itc); }
.itc-expect-title { display: flex; align-items: center; gap: 8px; margin: 0 0 4px !important; font-weight: 800; color: var(--itc-itc-ink); }
.itc-expect p { margin: 0 0 4px; }