/* EDAIC Masterclass: ergänzende Bausteine auf Basis der Tokens aus assets/akn.css (Vigilo Design System).
   Keine eigenen Farben: nur Tokens. Eine Handlungsfarbe (.btn.primary), Vitalfarben nur mit Bedeutung. */

.ex{max-width:1120px; margin:0 auto; padding:0 clamp(16px,4vw,40px) 80px}
.ex-top{display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:20px 0 0}
.ex-top .crumbs{flex:1 1 auto; min-width:0}
.ex-lang{display:inline-flex; background:var(--surface-fill); border-radius:var(--radius-pill); padding:3px; gap:2px}
.ex-lang button{border:0; background:transparent; color:var(--ink); font:600 13px/1 var(--font-sans); padding:7px 12px; border-radius:var(--radius-pill); cursor:pointer; min-height:30px}
.ex-lang button[aria-pressed="true"]{background:var(--seg-on); box-shadow:0 1px 2px rgba(0,0,0,.12)}
.ex-search{flex:0 1 240px}
.ex-search input{width:100%; min-height:36px; border:0; border-radius:var(--radius-pill); background:var(--surface-fill); padding:0 14px; font-size:15px; color:var(--ink)}

.ex-hero{padding:56px 0 32px}
.ex-hero h1{font-size:clamp(34px,5.4vw,56px); line-height:1.07; letter-spacing:-.02em; margin:0 0 8px}
.ex-hero .ex-sub{font:600 clamp(22px,2.8vw,28px)/1.2 var(--font-display); color:var(--ink-secondary); margin:0 0 20px}
.ex-hero .lead{max-width:46rem; margin:0}
.ex-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
.ex-h2{font:600 clamp(28px,3.6vw,40px)/1.12 var(--font-display); letter-spacing:-.015em; margin:80px 0 20px}
.ex-h2:first-child{margin-top:32px}
.ex-h3{font:600 21px/1.25 var(--font-display); margin:32px 0 12px}
.ex-note{font-size:15px; color:var(--ink-secondary)}
.ex-note b{color:var(--ink)}
.ex-stand{display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-secondary); background:var(--surface-fill); border-radius:var(--radius-pill); padding:4px 12px; margin:8px 0}

.ex-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px}
.ex-grid.two{grid-template-columns:repeat(auto-fill,minmax(360px,1fr))}
.ex-card{background:var(--surface-card); border-radius:var(--radius-md); box-shadow:var(--shadow-card); padding:20px 22px; min-width:0}
.ex-card h3{font-size:19px; margin:0 0 6px}
.ex-card p{margin:6px 0}
.ex-card.lg{border-radius:var(--radius-lg); padding:28px}
a.ex-card{display:flex; flex-direction:column; color:var(--ink); text-decoration:none; transition:box-shadow .2s ease}
a.ex-card:hover{text-decoration:none; box-shadow:0 1px 2px rgba(0,0,0,.05), 0 14px 32px rgba(0,0,0,.10)}
a.ex-card .k{font-size:13px; color:var(--ink-secondary)}
a.ex-card .t{font:600 19px/1.25 var(--font-display); margin:2px 0 4px}
a.ex-card .x{font-size:15px; color:var(--ink-secondary); line-height:1.4}
a.ex-card .f{margin-top:auto; padding-top:12px; font-size:13px; color:var(--ink-secondary)}
.ex-icon{width:28px; height:28px; color:var(--ink); margin-bottom:10px}
.ex-icon svg{width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}

/* Roadmap */
.ex-road{list-style:none; margin:24px 0 0; padding:0; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; position:relative}
@media (max-width:1100px){ .ex-road{grid-template-columns:repeat(4,minmax(0,1fr))} }
.ex-road li{margin:0}
.ex-road button{display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; width:100%; height:100%; text-align:left; border:0; background:var(--surface-card); border-radius:var(--radius-md); box-shadow:var(--shadow-card); padding:12px 12px 14px; color:var(--ink); cursor:pointer; font:inherit}
.ex-road button[aria-expanded="true"]{outline:2px solid var(--accent); outline-offset:-2px}
.ex-road .n{display:inline-flex; width:26px; height:26px; border-radius:50%; align-items:center; justify-content:center; background:var(--surface-fill); font:600 13px/1 var(--font-rounded); margin-bottom:8px}
.ex-road .done .n{background:var(--ok-tint); color:var(--vital-ecg)}
.ex-road .now .n{background:var(--ink); color:var(--surface-card)}
.ex-road .t{display:block; font:600 14px/1.3 var(--font-display); hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word}
.ex-road-detail{margin-top:12px}
@media (max-width:900px){ .ex-road{grid-template-columns:1fr} .ex-road button{display:flex; gap:12px; align-items:center} .ex-road .n{margin:0; flex:none} }

/* Kennzahlen */
.ex-stats{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px}
.ex-stat{background:var(--surface-card); border-radius:var(--radius-md); box-shadow:var(--shadow-card); padding:16px 18px}
.ex-stat .l{font-size:13px; color:var(--ink-secondary)}
.ex-stat .v{font:600 34px/1.1 var(--font-rounded); letter-spacing:-.01em; margin-top:4px}
.ex-stat .v small{font-size:15px; color:var(--ink-secondary); font-weight:600; margin-left:3px}
.ex-stat .s{font-size:13px; color:var(--ink-secondary); margin-top:2px}
.ex-bar{height:6px; border-radius:3px; background:var(--surface-fill); overflow:hidden; margin-top:10px}
.ex-bar i{display:block; height:100%; background:var(--ink); border-radius:3px}

/* Abdeckungs- und Heatmap-Marken */
.ab{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; border-radius:var(--radius-pill); padding:3px 10px; white-space:nowrap}
.ab::before{content:""; width:8px; height:8px; border-radius:50%; background:currentColor}
.ab.voll{color:var(--vital-ecg); background:var(--ok-tint)}
.ab.teil{color:var(--vital-temp); background:var(--temp-tint)}
.ab.unzureichend{color:var(--vital-temp); background:var(--temp-tint)}
.ab.fehlt{color:var(--vital-abp); background:var(--alarm-tint)}
.heat{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(150px,calc(50% - 4px)),1fr)); gap:8px}
.heat a{display:block; border-radius:var(--radius-sm); padding:12px; color:var(--ink); text-decoration:none; background:var(--surface-fill); min-height:84px}
.heat a:hover{text-decoration:none; outline:2px solid var(--accent-ring)}
.heat a b{display:block; font:600 14px/1.25 var(--font-display); overflow-wrap:anywhere; hyphens:auto}
.heat a span{display:block; font:600 22px/1.2 var(--font-rounded); margin-top:6px}
.heat a small{font-size:12px; color:var(--ink-secondary)}
.heat .g{background:var(--ok-tint)} .heat .g span{color:var(--vital-ecg)}
.heat .y{background:var(--temp-tint)} .heat .y span{color:var(--vital-temp)}
.heat .r{background:var(--alarm-tint)} .heat .r span{color:var(--vital-abp)}

/* Deep-Link-Box */
.nl-box{background:var(--surface-fill); border-radius:var(--radius-md); padding:16px 18px; margin:12px 0}
.nl-box .h{font:600 15px/1.3 var(--font-display); margin:0 0 8px}
.nl-list{list-style:none; margin:0; padding:0}
.nl-list li{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:8px 0; border-top:1px solid var(--separator); margin:0}
.nl-list li:first-child{border-top:0}
.nl-list .nt{flex:1 1 220px; min-width:0}
.nl-list .nt b{display:block; font-weight:600}
.nl-list .nt small{color:var(--ink-secondary)}
.nl-list .np{font:600 13px/1 var(--font-rounded); color:var(--ink-secondary)}
.nl-gap{font-size:15px; color:var(--ink); background:var(--temp-tint); border-radius:var(--radius-sm); padding:10px 12px; margin:8px 0 0}

/* Fragen-Player */
.qp-bar{position:sticky; top:0; z-index:5; display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; background:var(--bar-bg); -webkit-backdrop-filter:var(--material-bar); backdrop-filter:var(--material-bar); padding:10px 0; margin:0 0 12px; border-bottom:1px solid var(--separator)}
.qp-bar .pos{font:600 15px/1 var(--font-rounded)}
.qp-bar .timer{font:600 17px/1 var(--font-rounded); margin-left:auto}
.qp-bar .timer.warn{color:var(--vital-abp)}
.qp-prog{flex:1 1 160px; height:4px; background:var(--surface-fill); border-radius:2px; overflow:hidden}
.qp-prog i{display:block; height:100%; background:var(--ink)}
.qp-stem{font:600 21px/1.35 var(--font-display); margin:8px 0 16px}
.qp-meta{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px}
.qp-items{list-style:none; margin:0; padding:0; counter-reset:it}
.qp-items li{display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:8px 12px; align-items:start; padding:14px 0; border-top:1px solid var(--separator); margin:0}
.qp-items li::before{counter-increment:it; content:counter(it,upper-alpha); font:600 15px/1.6 var(--font-rounded); color:var(--ink-secondary)}
.qp-items .st{line-height:1.45}
.tf{display:inline-flex; background:var(--surface-fill); border-radius:var(--radius-pill); padding:3px; gap:3px}
.tf button{border:0; min-width:74px; min-height:40px; border-radius:var(--radius-pill); background:transparent; color:var(--ink); font:600 15px/1 var(--font-sans); cursor:pointer; padding:0 12px}
.tf button[aria-pressed="true"]{background:var(--seg-on); box-shadow:0 1px 3px rgba(0,0,0,.14)}
.tf button:disabled{cursor:default}
.qp-items li.ok .tf button[aria-pressed="true"]{background:var(--ok-tint); color:var(--vital-ecg); box-shadow:none}
.qp-items li.bad .tf button[aria-pressed="true"]{background:var(--alarm-tint); color:var(--vital-abp); box-shadow:none}
.qp-items .ex{grid-column:2 / -1; font-size:15px; color:var(--ink); background:var(--surface-fill); border-radius:var(--radius-sm); padding:10px 12px; max-width:none; margin:0}
.qp-items .ex b{font-weight:600}
.qp-conf{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:20px 0 0}
.qp-conf .l{font-size:15px; color:var(--ink-secondary); margin-right:4px}
.chip{border:0; min-height:36px; padding:0 14px; border-radius:var(--radius-pill); background:var(--surface-fill); color:var(--ink); font:600 14px/1 var(--font-sans); cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink); color:var(--surface-card)}
.qp-foot{display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; align-items:center}
.qp-foot .sp{flex:1}
.qp-key{background:var(--ok-tint); border-radius:var(--radius-sm); padding:12px 14px; margin-top:16px}
.qp-key b{display:block; margin-bottom:2px}
.qp-src{font-size:13px; color:var(--ink-secondary); margin-top:10px}
.qp-flags{display:flex; flex-wrap:wrap; gap:6px; margin-top:16px}
.qp-note{width:100%; min-height:64px; margin-top:8px; border:1px solid var(--separator); border-radius:var(--radius-sm); background:var(--surface-card); color:var(--ink); padding:8px 10px; font-size:15px}
.qp-dots{display:flex; flex-wrap:wrap; gap:4px; margin:12px 0}
.qp-dots button{width:28px; height:28px; border-radius:8px; border:0; background:var(--surface-fill); color:var(--ink); font:600 12px/1 var(--font-rounded); cursor:pointer}
.qp-dots button.done{background:var(--ink); color:var(--surface-card)}
.qp-dots button.cur{outline:2px solid var(--accent); outline-offset:1px}
.qp-dots button.flag{box-shadow:inset 0 -3px 0 var(--vital-temp)}

/* Formulare */
.ex-form{display:grid; gap:12px; max-width:560px}
.ex-form label{display:grid; gap:6px; font-size:15px; color:var(--ink-secondary)}
.ex-form input,.ex-form select,.ex-textarea{min-height:44px; border:1px solid var(--separator); border-radius:var(--radius-sm); background:var(--surface-card); color:var(--ink); padding:0 12px; font-size:17px}
.ex-textarea{width:100%; min-height:160px; padding:12px; line-height:1.45}
.ex-seg{display:flex; flex-wrap:wrap; gap:6px}
.ex-filter{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:12px 0}
.ex-filter select{min-height:36px; border-radius:var(--radius-pill); border:0; background:var(--surface-fill); color:var(--ink); padding:0 12px; font-size:15px}

/* Tabellen */
.ex-tbl{overflow-x:auto; margin:12px 0}
.ex-tbl table{border-collapse:collapse; width:100%; font-size:15px}
.ex-tbl th,.ex-tbl td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--separator); vertical-align:top}
.ex-tbl th{font-weight:600; color:var(--ink-secondary); font-size:13px}

/* Akkordeon */
details.ex-acc{background:var(--surface-card); border-radius:var(--radius-md); box-shadow:var(--shadow-card); margin:8px 0; padding:0}
details.ex-acc > summary{cursor:pointer; list-style:none; padding:16px 20px; font:600 17px/1.35 var(--font-display); display:flex; justify-content:space-between; gap:12px}
details.ex-acc > summary::-webkit-details-marker{display:none}
details.ex-acc > summary::after{content:"+"; color:var(--ink-secondary); font-weight:400}
details.ex-acc[open] > summary::after{content:"−"}
details.ex-acc > div{padding:0 20px 18px}

/* Wizard */
.wz-q{font:600 24px/1.25 var(--font-display); margin:8px 0 16px}
.wz-opts{display:flex; flex-wrap:wrap; gap:8px}
.wz-opts .btn{min-width:88px}
.wz-steps{display:flex; gap:4px; margin:0 0 16px}
.wz-steps i{flex:1; height:4px; border-radius:2px; background:var(--surface-fill)}
.wz-steps i.on{background:var(--ink)}
.wz-res{margin-top:16px}

/* Viva */
.vv-lead{background:var(--surface-fill); border-radius:var(--radius-md); padding:18px 20px; margin:12px 0}
.vv-info{margin:8px 0 0; padding-left:1.2em}
.vv-q{font:600 21px/1.35 var(--font-display); margin:16px 0 10px}
.vv-follow{border-left:3px solid var(--separator); padding:4px 0 4px 14px; margin:10px 0; color:var(--ink)}
.vv-esc{background:var(--alarm-tint); border-radius:var(--radius-sm); padding:10px 14px; margin:12px 0}
.vv-kp{list-style:none; padding:0; margin:8px 0}
.vv-kp li{display:grid; grid-template-columns:24px minmax(0,1fr); gap:8px; padding:6px 0; margin:0; align-items:start}
.vv-kp li input{margin-top:5px; width:18px; height:18px}
.vv-kp li.crit span::after{content:" kritisch"; font-size:12px; font-weight:600; color:var(--vital-abp); margin-left:6px}
.vv-kp.en li.crit span::after{content:" critical"}
.vv-kp li.hit span{font-weight:600}
.vv-score{display:inline-flex; align-items:baseline; gap:6px; font:600 34px/1 var(--font-rounded)}
.vv-score small{font-size:15px; color:var(--ink-secondary)}
.mic{display:inline-flex; align-items:center; gap:6px}
.mic.on{background:var(--alarm-tint); color:var(--vital-abp)}

/* Graph Trainer */
.gt-wrap{position:relative; background:var(--surface-card); border-radius:var(--radius-md); box-shadow:var(--shadow-card); overflow:hidden}
.gt-wrap canvas{position:absolute; inset:0; width:100%; height:100%; touch-action:none; cursor:crosshair}
.gt-wrap .graph{display:block; width:100%; height:auto}
.gt-wrap.hide-sol .graph .g-c,.gt-wrap.hide-sol .graph .g-cl,.gt-wrap.hide-sol .graph .g-pt,.gt-wrap.hide-sol .graph .g-pl,.gt-wrap.hide-sol .graph .g-guide,.gt-wrap.hide-sol .graph .g-band{visibility:hidden}
svg.graph{font-family:var(--font-sans)}
svg.graph .g-ax{stroke:var(--ink-secondary); stroke-width:1.2}
svg.graph .g-tick{stroke:var(--ink-secondary); stroke-width:1}
svg.graph .g-tl{fill:var(--ink-secondary); font-size:12px}
svg.graph .g-al{fill:var(--ink); font-size:13px; font-weight:600}
svg.graph .g-c{fill:none; stroke:var(--ink); stroke-width:2.6; stroke-linejoin:round; stroke-linecap:round}
svg.graph .g-c.g-alt{stroke:var(--ink-secondary); stroke-dasharray:7 5; stroke-width:2.2}
svg.graph .g-c.g-alt2{stroke:var(--ink-secondary); stroke-dasharray:2 5; stroke-width:2.4}
svg.graph .g-c.g-spo2{stroke:var(--vital-spo2)}
svg.graph .g-c.g-co2{stroke:var(--vital-co2)}
svg.graph .g-c.g-abp{stroke:var(--vital-abp)}
svg.graph .g-c.g-guide,svg.graph .g-guide{stroke:var(--ink-secondary); stroke-width:1; stroke-dasharray:3 4; fill:none}
svg.graph .g-cl{font-size:12px; fill:var(--ink); font-weight:600}
svg.graph .g-pt{fill:var(--surface-card); stroke:var(--ink); stroke-width:2}
svg.graph .g-pl{font-size:12px; fill:var(--ink)}
svg.graph .g-note{fill:var(--ink-secondary); font-size:11px}
svg.graph .g-band{fill:var(--surface-fill)}

/* Radar */
svg.radar{width:100%; max-width:420px; height:auto; display:block}
svg.radar .ring{fill:none; stroke:var(--separator)}
svg.radar .axis{stroke:var(--separator)}
svg.radar .area{fill:var(--surface-fill-2); stroke:var(--ink); stroke-width:2}
svg.radar text{font-size:11px; fill:var(--ink-secondary)}

/* Bilder */
.ci-img{background:#000; border-radius:var(--radius-md); overflow:hidden}
.ci-img img{display:block; width:100%; height:auto}
.ci-flag{font-size:13px; color:var(--ink-secondary); margin:6px 0 0}
.ci-thumbs{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px}
.ci-thumbs a{display:block; border-radius:var(--radius-sm); overflow:hidden; background:#000; position:relative; aspect-ratio:4/3}
.ci-thumbs img{width:100%; height:100%; object-fit:cover; opacity:.92}
.ci-thumbs span{position:absolute; left:6px; bottom:6px; font:600 12px/1 var(--font-rounded); color:#fff; background:rgba(0,0,0,.6); border-radius:6px; padding:4px 6px}
.ci-thumbs a.done span::after{content:" ✓"}

/* Rückweg-Pille (auch in den Lerneinheiten, siehe assets/edaic-bruecke.js) */
.ex-list{padding-left:1.2em}
.ex-list li{margin:6px 0}
.ex-two{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px}
@media (max-width:820px){ .ex-two{grid-template-columns:1fr} .ex-grid.two{grid-template-columns:1fr} }
@media (max-width:560px){
  .qp-items li{grid-template-columns:22px minmax(0,1fr)}
  .qp-items .tf{grid-column:2}
  .tf button{min-width:64px}
  .ex-search{flex:1 1 100%}
  .qp-stem{font-size:19px}
}
/* Zertifikat und Druck */
.cert-page{background:var(--surface-card); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); padding:48px; text-align:center}
.cert-page h2{font-size:32px; margin:12px 0}
.cert-page .nm{font:600 28px/1.2 var(--font-display); margin:24px 0}
@media print{
  .gnav,.ex-top,.no-print,.sfoot{display:none!important}
  body{background:#fff}
  .cert-page{box-shadow:none}
}
svg.graph .g-leg{fill:var(--surface-card); opacity:.92}
svg.graph .g-c.g-remi{stroke:var(--ink); stroke-width:4; opacity:.45}
/* Schmale Bildschirme: nichts ragt über den Rand */
.ex{overflow-wrap:break-word}
.ex .btn{white-space:normal; max-width:100%; text-align:center; padding-top:10px; padding-bottom:10px}
.ex .ex-card,.ex .ex-grid>*,.ex li{min-width:0}
.ex a[href^="http"],.ex .ex-note{overflow-wrap:anywhere}