/* =========================================================================
   KuRS-Care – interaktive Bausteine (Startseite, Gütesiegel, Weiterbildung)
   Ergänzt site.css. Gleiche Farben und Schriften; drei Bausteine:
   1. Umschalter „Was heißt das in Ihrer Einrichtung?“ im Startbereich
   2. Der Weg zum Siegel als Scroll-Geschichte (der eine große Moment der Seite)
   3. Kursplan zum Antippen
   ========================================================================= */
:root{
  --gold:#B8862B;
}

/* ---------- 1. Umschalter im Startbereich ---------- */
.settings{margin-top:40px; padding-top:26px; border-top:1px solid var(--line)}
.settings--wide{
  grid-column:1 / -1; margin-top:clamp(8px, 2vw, 24px); padding-top:clamp(28px, 3.5vw, 44px);
  display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); grid-template-rows:auto 1fr; column-gap:clamp(32px, 5vw, 72px); align-items:start;
}
.settings--wide > .settings__ask, .settings--wide > .settings__tabs{grid-column:1}
.settings--wide > .settings__panel{grid-column:2; grid-row:1 / span 2; margin-top:0}
.settings--wide .settings__ask{font-size:clamp(24px, 2.4vw, 30px); margin-bottom:18px}
.settings__ask{font-family:var(--f-display); font-size:22px; line-height:1.2; color:var(--ink); margin-bottom:14px}
.settings__tabs{display:flex; flex-wrap:wrap; gap:8px}
.settings__tab{
  appearance:none; font:600 14.5px/1.2 var(--f-body); color:var(--ink-2); background:var(--white);
  border:1.5px solid var(--line-strong); border-radius:999px; padding:9px 16px; cursor:pointer;
  transition:background .18s, color .18s, border-color .18s;
}
.settings__tab:hover{border-color:var(--plum-700); color:var(--plum-700)}
.settings__tab[aria-selected="true"]{background:var(--plum-700); border-color:var(--plum-700); color:#fff}
.settings__tab:focus-visible{outline:3px solid color-mix(in srgb, var(--magenta) 45%, transparent); outline-offset:2px}
.settings__panel{margin-top:18px; animation:kc-swap .35s cubic-bezier(.2,.7,.2,1)}
.settings__qs{display:grid; gap:10px; margin-bottom:18px}
.settings__qs li{
  position:relative; padding:12px 16px 12px 46px; border-radius:12px; background:var(--white);
  border:1px solid var(--line); color:var(--ink-2); font-size:15.5px; line-height:1.45;
}
.settings__qs li::before{
  content:""; position:absolute; left:15px; top:13px; width:20px; height:20px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B80E6B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5A1.5 1.5 0 0 1 5.5 4h13A1.5 1.5 0 0 1 20 5.5v9a1.5 1.5 0 0 1-1.5 1.5H10l-4.2 3.6a.5.5 0 0 1-.8-.4V16h0a1 1 0 0 1-1-1V5.5z'/%3E%3C/svg%3E") center/contain no-repeat;
}
@keyframes kc-swap{from{opacity:.001; transform:translateY(6px)} to{opacity:1; transform:none}}

/* ---------- 2. Der Weg zum Siegel ---------- */
.path__grid{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:clamp(32px, 6vw, 96px); align-items:start}
/* Der Ring steht genau auf der Lesemitte des sichtbaren Bereichs, dort wechselt auch der Schritt.
   --path-oben = Unterkante von Kopfzeile (und auf Unterseiten der Abschnitts-Navigation), setzt das Skript */
.path{--path-oben:calc(env(safe-area-inset-top, 0px) + var(--header-h)); --ring:min(460px, 44vw, calc((100vh - var(--path-oben)) * .8))}
.path__stage{position:sticky; top:max(calc(var(--path-oben) + 24px), calc(var(--path-oben) + (100vh - var(--path-oben)) / 2 - var(--ring) / 2))}
.path__ring{position:relative; width:min(100%, var(--ring)); aspect-ratio:1; margin-inline:auto}
.path__svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.path__track{fill:none; stroke:var(--paper-2); stroke-width:16; stroke-linecap:round}
.path__arc{fill:none; stroke:var(--magenta); stroke-width:16; stroke-linecap:round; stroke-dasharray:100 100; stroke-dashoffset:100; opacity:0; transition:stroke-dashoffset .9s cubic-bezier(.65,0,.35,1), opacity .15s}
.path__arc.is-done{stroke-dashoffset:0; opacity:1}
.path__arc[data-arc="4"]{stroke:var(--gold)}
.path__node{
  position:absolute; width:56px; height:56px; margin:-28px 0 0 -28px; border-radius:50%; display:grid; place-items:center;
  background:var(--white); color:var(--ink-3); border:1.5px solid var(--line); box-shadow:var(--shadow-1);
  transition:background .4s, color .4s, border-color .4s, transform .4s;
}
.path__node svg{width:24px; height:24px}
/* Lage der vier Stationen auf dem Ring (auch ohne Skript richtig) */
.path__node[data-node="1"]{left:78.28%; top:21.72%}
.path__node[data-node="2"]{left:78.28%; top:78.28%}
.path__node[data-node="3"]{left:21.72%; top:78.28%}
.path__node[data-node="4"]{left:21.72%; top:21.72%}
.path__node.is-done{background:var(--plum-700); border-color:var(--plum-700); color:#fff}
.path__node.is-now{transform:scale(1.14)}
.path__node[data-node="4"].is-done{background:var(--gold); border-color:var(--gold)}
.path__center{position:absolute; inset:22%; display:grid; place-items:center; align-content:center; text-align:center; gap:6px}
.path__num{font-family:var(--f-display); font-size:clamp(84px, 9vw, 128px); line-height:.9; color:var(--plum-700); font-variant-numeric:lining-nums; transition:opacity .35s, transform .35s}
.path__label{font-weight:700; font-size:17px; line-height:1.3; color:var(--ink); max-width:16ch; transition:opacity .35s}
.path__medal{position:absolute; inset:0; margin:auto; width:96%; height:auto; opacity:0; transform:scale(.6) rotate(-12deg); transition:opacity .6s, transform .8s cubic-bezier(.2,1.3,.4,1); filter:drop-shadow(0 18px 26px rgba(36,10,29,.28)); pointer-events:none}
.path[data-active="4"] .path__medal{opacity:1; transform:none}
.path[data-active="4"] .path__num, .path[data-active="4"] .path__label{opacity:0}
.path__num.is-swap{opacity:0; transform:translateY(8px)}

.path__steps{display:grid}
.path__step{min-height:68vh; display:flex; align-items:center; padding-block:24px}
.path__step:first-child{min-height:52vh; align-items:flex-start; padding-top:clamp(24px, 6vh, 64px)}
.path__step:last-child{min-height:56vh}
.path--subnav .path__step:last-child{min-height:64vh}
.path--static .path__stage{position:static}
.path--static .path__step{min-height:0}
.js-path.path--static .path__step:not(.is-active) .path__card{opacity:1}
.path__card{display:grid; gap:12px; max-width:52ch; transition:opacity .45s}
.js-path .path__step:not(.is-active) .path__card{opacity:.32}
.path__icon{display:none}
.path__count{font-size:14px; font-weight:700; color:var(--magenta); font-variant-numeric:tabular-nums}
.path__card h3{font-size:clamp(28px, 3vw, 40px)}
.path__card p{font-size:18px; color:var(--ink-2)}
.path__tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px}
.path__tags li{font-size:14px; font-weight:600; color:var(--plum-700); background:var(--magenta-soft); padding:6px 12px; border-radius:999px}
.path__step[data-step="4"] .path__tags li{background:#F6ECD6; color:#6B4C10}
.path__card .path__proof{display:flex; gap:10px; align-items:flex-start; margin-top:6px; padding-top:14px; border-top:1px dashed var(--line-strong); font-size:15px; color:var(--ink-2)}
.path__proof svg{width:18px; height:18px; flex:none; margin-top:2px; color:var(--ink-3)}
.path__proof b{color:var(--ink)}
.path__link{justify-self:start; margin-top:4px}
.path__medal-inline{display:none}
.path__medal--grafik{aspect-ratio:1}
.path__medal.path__medal--grafik{display:block}
.path__medal--grafik svg{display:block; width:100%; height:100%}
.path__bar{display:none}
.path__more{display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(16px, 3vw, 32px)}

/* ---------- 3. Kursplan zum Antippen ---------- */
.modbar__seg{cursor:pointer}
.modbar__seg.is-picked{box-shadow:0 0 0 3px var(--white), 0 0 0 5px var(--ink); transform:translateY(-3px)}
.section--dark .modbar__seg.is-picked{box-shadow:0 0 0 3px var(--plum-950), 0 0 0 5px #fff}
.modbar__seg.is-picked .modbar__tip{display:none!important} /* steht schon im Infofeld */
/* Weiterbildungsseite: die schmale letzte Gruppe (Spezialisierung, 8 UE) rechtsbündig, damit nichts über den Rand ragt */
@media (min-width: 601px){
  .plan .modbar__group:last-child{display:flex; flex-direction:column; align-items:flex-end; text-align:right}
  .plan .modbar__group:last-child b, .plan .modbar__group:last-child span{white-space:nowrap}
}
.modinfo{margin-top:18px; min-height:84px; padding:16px 18px; border-radius:14px; background:rgba(255,255,255,.06); border:1px solid var(--on-dark-line); display:grid; gap:4px}
.modinfo__hint{color:var(--on-dark-2); font-size:15px; align-self:center}
.modinfo__top{font-size:13.5px; font-weight:700; color:#FF8FC4; font-variant-numeric:tabular-nums}
.modinfo__name{font-family:var(--f-display); font-size:22px; line-height:1.2; color:#fff}
.modinfo__meta{font-size:14.5px; color:var(--on-dark-2)}

/* Weiterbildungsseite: helles Infofeld mit Blättern, Modultabelle zeigt das gewählte Modul */
.plan{margin-top:8px}
.modinfo--light{margin-top:24px; padding:clamp(18px, 2.4vw, 26px) clamp(20px, 2.6vw, 30px); background:var(--paper); border-color:var(--line); grid-template-columns:minmax(0, 1fr) auto; gap:16px 28px; align-items:center}
.modinfo--light .modinfo__hint{color:var(--ink-3)}
.modinfo--light .modinfo__top{color:var(--magenta)}
.modinfo--light .modinfo__name{color:var(--ink); font-size:clamp(22px, 2.2vw, 28px)}
.modinfo--light .modinfo__meta{color:var(--ink-2); font-size:15.5px}
.modinfo__main{display:grid; gap:4px; min-width:0}
.modinfo__side{display:grid; gap:10px; justify-items:end}
.modinfo__nav{display:flex; gap:8px}
.modinfo__nav button{
  appearance:none; width:44px; height:44px; border-radius:50%; border:1.5px solid var(--line-strong); background:var(--white); color:var(--ink);
  display:grid; place-items:center; cursor:pointer; transition:border-color .15s, color .15s;
}
.modinfo__nav button:hover:not(:disabled){border-color:var(--plum-700); color:var(--plum-700)}
.modinfo__nav button:focus-visible{outline:3px solid color-mix(in srgb, var(--magenta) 45%, transparent); outline-offset:2px}
.modinfo__nav button:disabled{opacity:.35; cursor:default}
.modinfo__nav svg{width:20px; height:20px}
.modinfo__ue{font-size:14px; font-weight:700; color:var(--plum-700); background:var(--magenta-soft); padding:6px 12px; border-radius:999px; white-space:nowrap; font-variant-numeric:tabular-nums}
.plan__table{margin-top:32px}
table.modules--nr tr[data-type="grund"]{--c:var(--plum-600)}
table.modules--nr tr[data-type="fach"]{--c:var(--magenta)}
table.modules--nr tr[data-type="spezial"]{--c:var(--teal)}
.modules__thema{display:flex; gap:14px; align-items:flex-start}
.modules__nr{flex:none; display:inline-grid; place-items:center; width:26px; height:26px; margin-top:-2px; border-radius:7px; background:var(--c); color:#fff; font-size:12.5px; font-weight:800; font-variant-numeric:tabular-nums}
table.modules--nr td{transition:background .25s}
table.modules--nr tr.is-picked td{background:color-mix(in srgb, var(--c) 9%, var(--white)); color:var(--ink)}
table.modules--nr tr.is-picked td:first-child{box-shadow:inset 3px 0 0 var(--c)}

/* ---------- Tablet & Handy ---------- */
@media (max-width: 960px){
  .settings--wide{grid-template-columns:1fr}
  .settings--wide > .settings__panel{grid-column:1; grid-row:auto; margin-top:18px}
  .path__grid{grid-template-columns:1fr; gap:0}
  .path__stage{display:none}
  .path__bar{
    display:flex; align-items:center; gap:14px; position:sticky; z-index:5; top:var(--path-oben);
    margin-inline:calc(-1 * var(--gutter)); padding:12px var(--gutter); background:var(--white); border-bottom:1px solid var(--line);
    font-size:14px; color:var(--ink-2);
  }
  .path__bar b{color:var(--magenta); font-variant-numeric:tabular-nums}
  .path__bar-track{flex:1; display:grid; grid-template-columns:repeat(4, 1fr); gap:5px}
  .path__bar-track i{height:6px; border-radius:3px; background:var(--paper-2); transition:background .4s}
  .path__bar-track i.is-done{background:var(--magenta)}
  .path__bar-track i:last-child.is-done{background:var(--gold)}
  .path__step, .path__step:first-child, .path__step:last-child{min-height:0; padding-block:28px; align-items:flex-start}
  .path__step + .path__step{border-top:1px solid var(--line)}
  .path__icon{display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:var(--magenta-soft); color:var(--plum-700)}
  .path__icon svg{width:22px; height:22px}
  .path__card p{font-size:16.5px}
  .path__medal-inline{display:block; width:min(220px, 60%); margin-top:8px; filter:drop-shadow(0 14px 20px rgba(36,10,29,.25))}
  .js-path .path__step:not(.is-active) .path__card{opacity:1}
  /* Unterseiten: Die Abschnitts-Navigation klebt schon oben, eine zweite Leiste wäre zu viel */
  .path--subnav .path__bar{display:none}
  .path--subnav .path__steps{border-top:1px solid var(--line); margin-top:8px}
}
@media (max-width: 600px){
  .settings__ask{font-size:20px}
  .settings__tab{font-size:14px; padding:8px 13px}
  .settings__qs li{font-size:15px}
  .modinfo__name{font-size:19px}
  .modinfo--light{grid-template-columns:1fr}
  .modinfo--light .modinfo__name{font-size:21px}
  .modinfo__side{grid-auto-flow:column; justify-content:space-between; align-items:center; justify-items:start}
  table.modules--nr tbody tr td:first-child::before{display:none}
  .modules__thema{gap:12px}
}

/* Kurzinfo am Balken nur mit Maus; auf Touch-Geräten übernimmt das Infofeld darunter */
@media (hover: none), (max-width: 960px){
  .modbar__seg .modbar__tip{display:none!important}
}