/* App glue on top of the jusnode design system: layout of the page, the Lernstand bar, transcript turns, tables. Tokens only. */
html,body{height:100%}
.jn-stack>*+*{margin-top:var(--space-3)}
.jn-section{margin-top:var(--space-5)}
.jn-section>h2{margin-bottom:var(--space-2)}
.jn-lead{margin-top:var(--space-1)}
.jn-bar__sicher{background:var(--green)}
.jn-bar__wackelig{background:var(--yellow)}
.jn-bar__schwach{background:var(--red)}
.jn-legend{display:flex;flex-wrap:wrap;gap:var(--space-3);margin:var(--space-3) 0 0;padding:0;list-style:none;font:var(--type-meta);color:var(--fg-2)}
.jn-dot{display:inline-block;width:var(--space-2);height:var(--space-2);margin-right:var(--space-1);border-radius:50%;background:var(--border-rule)}
.jn-dot--sicher{background:var(--green)}.jn-dot--wackelig{background:var(--yellow)}.jn-dot--schwach{background:var(--red)}
.jn-row--learn{align-items:flex-start;padding-block:var(--space-3)}
.jn-row--learn .jn-row__end{align-self:center}
.jn-fc__a ul{margin:0;padding-left:var(--space-4)}
.jn-fc__a li+li{margin-top:var(--space-1)}
.jn-table{width:100%;border-collapse:collapse;font:var(--type-meta);font-family:var(--font-sans)}
.jn-table th,.jn-table td{padding:var(--space-2);border-bottom:var(--bw) solid var(--border-rule);text-align:left;vertical-align:top}
.jn-table th{font-weight:600;border-bottom-color:var(--border-strong)}
.jn-tablewrap{overflow-x:auto}
.jn-q>h2{margin-bottom:var(--space-2);max-width:var(--measure)}
.jn-q__chips{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-bottom:var(--space-3)}
.jn-details{margin-top:var(--space-3)}
.jn-details>summary{min-height:var(--tap);display:flex;align-items:center;cursor:pointer;font-weight:600}
.jn-law p{margin:0}.jn-law p+p{margin-top:var(--space-3)}
.jn-dist{display:grid;grid-template-columns:5em minmax(0,1fr);align-items:center;gap:var(--space-2) var(--space-3);margin-top:var(--space-3)}
.jn-dist>.jn-progress{min-width:0}
.jn-form>*+*{margin-top:var(--space-3)}
.jn-inline{display:flex;gap:var(--space-2);flex-wrap:wrap}
.jn-title-top{margin-top:var(--space-3)}
.jn-toc{margin-top:var(--space-2)}
.jn-toc .jn-row{min-height:72px}
.jn-settings{display:flex;flex-direction:column;gap:var(--space-5)}
.jn-settings .jn-quota-selector{margin-top:var(--space-1)}
.jn-counts{display:flex;flex-wrap:wrap;gap:0 var(--space-3)}
.jn-counts>span{white-space:nowrap}
.jn-fc__q.jn-prompt--long{font-size:21px;line-height:30px}

/* Anki status colors and badges */
.jn-bar__faellig{background:var(--yellow)}
.jn-bar__nochmal{background:var(--red)}
.jn-bar__neu{background:var(--blue)}
.jn-bar__gelernt{background:var(--green)}
.jn-dot--faellig{background:var(--yellow)}
.jn-dot--nochmal{background:var(--red)}
.jn-dot--neu{background:var(--blue)}
.jn-dot--gelernt{background:var(--green)}
.jn-badge-faellig{color:var(--yellow);font-weight:600}
.jn-badge-nochmal{color:var(--red);font-weight:600}
.jn-badge-neu{color:var(--blue);font-weight:600}
.jn-badge-gelernt{color:var(--green);font-weight:600}

/* Examiner profile cards */

/* Dashboard and quota cards */
.jn-quota-title{margin:0 0 var(--space-1)}
.jn-quota-selector{display:flex;align-items:center;gap:var(--space-1);flex-wrap:wrap}
.jn-quota-selector button{cursor:pointer;border:none;font:inherit}
.jn-counts--large{font-size:1.05rem}
.jn-section-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:var(--space-2)}
.jn-link-subtle{font:var(--type-meta);color:var(--fg-2);text-decoration:none}
.jn-link-subtle:hover{text-decoration:underline}


/* Startseite: Tagesziel und die zwei Wege (Lernen, Simulation) */
.jn-bar__gelernt{background:var(--green)}
.jn-row--learn .jn-bar{height:6px}
.jn-row--learn .jn-counts{gap:0 var(--space-3)}

/* Einstellungen: Sheet unten am Handy, zentrierter Dialog am Desktop; geschlossen (hidden) nimmt es keinen Platz ein */
.jn-sheet-root[hidden]{display:none}
.jn-sheet-root[data-settings]{position:fixed;inset:0;z-index:var(--z-toast);display:flex;grid-area:auto;border-left:0}
.jn-sheet-root[data-settings][hidden]{display:none}
.jn-sheet-root[data-settings] .jn-sheet-scrim{display:block}
@media (min-width:1024px){
.jn-sheet-root[data-settings]{align-items:center;justify-content:center}
.jn-sheet-root[data-settings] .jn-sheet{width:min(480px,calc(100% - var(--space-5)));height:auto;max-height:85%;border:var(--bw) solid var(--border-rule);border-radius:var(--radius-sheet)}
.jn-sheet-root[data-settings] .jn-sheet__grab{display:none}
.jn-sheet-root[data-settings] .jn-sheet__head{padding:var(--space-3) var(--space-2) var(--space-2) var(--space-4)}
.jn-sheet-root[data-settings] .jn-sheet__body{padding:var(--space-2) var(--space-4) var(--space-4)}
}
.jn-bar__neu{background:var(--border-control)}
.jn-dot--neu{background:var(--border-control)}
.jn-badge-neu{color:var(--fg-2);font-weight:400}


/* --- subsum Überarbeitung: Startseite, Wege, Prüferkarten, Gesprächsverlauf --- */
.jn-bar{display:flex;width:100%;height:6px;margin-top:var(--space-2);overflow:hidden;border-radius:var(--space-1);background:var(--border-rule)}
.jn-bar>span{display:block;height:100%}
.jn-home{padding-top:var(--space-2);padding-bottom:var(--space-4)}
.jn-home__title{font:var(--type-display);font-size:40px;line-height:44px;letter-spacing:-.015em;color:var(--heading)}
.jn-home__sub{margin-top:var(--space-2);max-width:32em;color:var(--fg-2);font:var(--type-body)}
.jn-today{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3) var(--space-4);background:var(--bg-card);border:var(--bw) solid var(--border-rule);border-radius:var(--radius-card)}
.jn-today__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3)}
.jn-today__title{font:var(--type-title)}
.jn-today__count{font:var(--type-meta);color:var(--fg-2);font-variant-numeric:tabular-nums}
.jn-today__count strong{color:var(--fg-1);font:var(--type-title)}
.jn-today .jn-progress__track{height:6px;border-radius:var(--space-1)}
.jn-today .jn-progress__fill{border-radius:var(--space-1)}
.jn-choices{display:grid;gap:var(--space-3);margin-top:var(--space-3)}
.jn-choice{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label go" "text go";column-gap:var(--space-3);row-gap:var(--space-1);align-items:center;min-height:88px;padding:var(--space-3) var(--space-4);border:var(--bw) solid var(--brand);border-radius:var(--radius-card);color:var(--brand);text-decoration:none;transition:background-color var(--dur) var(--ease)}
.jn-choice:hover{background:var(--bg-surface);text-decoration:none}
.jn-choice:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.jn-choice__label{grid-area:label;font-family:var(--font-serif);font-weight:600;font-size:22px;line-height:28px}
.jn-choice__text{grid-area:text;font:var(--type-meta);color:inherit;opacity:.88}
.jn-choice__go{grid-area:go;display:flex}
.jn-choice--primary{background:var(--action-bg);border-color:var(--action-bg);color:var(--action-fg)}
.jn-choice--primary:hover{background:var(--action-bg);filter:brightness(1.12)}
@media (min-width:640px){.jn-choices{grid-template-columns:1fr 1fr}.jn-choice{min-height:120px;grid-template-areas:"label go" "text text";align-content:space-between}}
.jn-turn{margin-top:var(--space-3);padding:var(--space-3);background:var(--bg-card);border:var(--bw) solid var(--border-rule);border-radius:var(--radius-card)}
.jn-turn--du{margin-left:var(--space-4);background:var(--green-tint);border-color:transparent}
.jn-turn__who{font:var(--type-meta);font-weight:600;color:var(--brand)}
.jn-turn__text{max-width:var(--measure);white-space:pre-wrap;overflow-wrap:anywhere}
.jn-prompt{margin-top:var(--space-3);max-width:var(--measure)}
.jn-q{margin-top:var(--space-5);padding-top:var(--space-4);border-top:var(--bw) solid var(--border-rule)}
.jn-note{margin-top:var(--space-3)}
.jn-pcards{display:grid;gap:var(--space-3);margin-top:var(--space-4)}
.jn-pcard{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--bg-card);border:var(--bw) solid var(--border-rule);border-radius:var(--radius-card);color:var(--fg-1);text-decoration:none;transition:border-color var(--dur) var(--ease)}
.jn-pcard:hover{border-color:var(--brand);text-decoration:none}
.jn-pcard:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.jn-pcard__main{flex:1;min-width:0;display:flex;flex-direction:column}
.jn-pcard__name{font:var(--type-title)}
.jn-pcard__meta{font:var(--type-meta);color:var(--fg-2)}
@media (min-width:640px){.jn-pcards{grid-template-columns:1fr 1fr}}
.jn-profile-grid{display:flex;flex-direction:column;gap:var(--space-3);margin-top:var(--space-3)}
.jn-profile-card{padding:var(--space-3) var(--space-4);border:var(--bw) solid var(--border-rule);border-radius:var(--radius-card);background:var(--bg-card)}
.jn-profile-card__header{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-bottom:var(--space-2)}
.jn-profile-card__header h3{margin:0}
.jn-profile-card__text{margin:0;max-width:var(--measure);font:var(--type-law);font-size:16px;line-height:26px}
.jn-profile-card--highlight{border-color:var(--brand);background:var(--green-tint)}
.jn-next-step{padding:var(--space-3) var(--space-4);border:var(--bw) solid var(--brand);border-radius:var(--radius-card);background:var(--green-tint)}
.jn-next-step h3{margin:var(--space-1) 0 0}
.jn-quota-card,.jn-mix-card{padding:var(--space-3) var(--space-4);border:var(--bw) solid var(--border-rule);border-radius:var(--radius-card);background:var(--bg-card)}
.jn-mix-card{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-3)}
.jn-mix-card__content{flex:1 1 20em}
.jn-mix-card__content h2{margin:var(--space-1) 0}

/* --- Ocker-Akzente, durchgehender Header, Lernstand-Grafik, Lernen-Auswahl --- */
.jn-progress__fill{background:var(--fill-progress)}
.jn-top{position:sticky;top:calc(-1 * var(--space-3));z-index:5;background:var(--bg-page);border-bottom:var(--bw) solid var(--border-rule)}
@container jn (min-width:1024px){.jn-top{top:calc(-1 * var(--space-5))}}
.jn-home__title::after{content:'';display:block;width:44px;height:3px;margin-top:var(--space-2);border-radius:2px;background:var(--ochre)}
.jn-stand{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-2)}
.jn-stand__row{display:grid;grid-template-columns:3.6em minmax(0,1fr) 5.4em;align-items:center;gap:var(--space-3)}
.jn-stand__name{font:var(--type-meta);font-weight:600;color:var(--fg-1)}
.jn-stand__row .jn-bar{margin-top:0;height:8px}
.jn-stand__num{font:var(--type-meta);font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.jn-stand__num span{font-weight:400;color:var(--fg-2)}
.jn-legend--compact{margin-top:var(--space-3);gap:var(--space-3)}
.jn-mixcard{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-4);padding:var(--space-4);background:var(--action-bg);color:var(--action-fg);border-radius:var(--radius-card);text-decoration:none}
.jn-mixcard:hover{text-decoration:none;filter:brightness(1.1)}
.jn-mixcard:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.jn-mixcard__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-1)}
.jn-mixcard__label{font-family:var(--font-serif);font-weight:600;font-size:22px;line-height:28px}
.jn-mixcard__text{font:var(--type-meta);opacity:.92;max-width:var(--measure)}
.jn-mixcard__meta{font:var(--type-meta);font-weight:600}
.jn-pcard--area .jn-pcard__main{gap:var(--space-1)}
.jn-pcard--area .jn-bar{margin-top:var(--space-1)}
.jn-dock .jn-actions{gap:var(--space-2)}
.jn-top__actions{display:flex;align-items:center}
.jn-korrektur-eingabe{margin-top:var(--space-3);border:var(--bw) solid var(--border-rule);border-radius:var(--radius-control);background:var(--bg-card)}
.jn-korrektur-eingabe>summary{min-height:var(--tap);display:flex;align-items:center;padding:0 var(--space-3);cursor:pointer;font:var(--type-ui)}
.jn-korrektur-eingabe .jn-field{padding:0 var(--space-3) var(--space-3)}
.jn-modus{display:inline-flex;gap:var(--space-1);margin:var(--space-2) 0 var(--space-3)}
.jn-modus__opt{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 var(--space-3);border-radius:var(--radius-control);font:var(--type-ui);color:var(--fg-2);text-decoration:none;white-space:nowrap}
.jn-modus__opt:hover{background:var(--bg-surface);color:var(--fg-1);text-decoration:none}
.jn-modus__opt:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.jn-modus__opt.is-aktiv{background:var(--action-bg);color:var(--action-fg)}
.jn-korrektur{margin-top:var(--space-4);padding:var(--space-3);border:var(--bw) solid var(--border-rule);border-radius:var(--radius-control);background:var(--bg-card)}
.jn-korrektur h2{font:var(--type-title);margin:0 0 var(--space-2)}
.jn-korrektur h3{font:var(--type-ui);font-weight:600;margin:var(--space-3) 0 var(--space-1)}
.jn-korrektur__antwort{white-space:pre-wrap;color:var(--fg-2)}
.jn-korrektur ul{margin:0;padding-left:var(--space-4)}
.jn-korrektur__falsch{color:var(--danger)}
.jn-rate.is-vorschlag{outline:2px solid var(--focus-ring);outline-offset:2px}
.jn-typing .jn-turn__text{color:var(--fg-2)}
.jn-dots{display:inline-flex;gap:4px;margin-left:6px;vertical-align:middle}
.jn-dots i{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.3;animation:jn-dot 1.2s infinite ease-in-out}
.jn-dots i:nth-child(2){animation-delay:.2s}
.jn-dots i:nth-child(3){animation-delay:.4s}
@keyframes jn-dot{0%,80%,100%{opacity:.3}40%{opacity:1}}
@media (prefers-reduced-motion:reduce){.jn-dots i{animation:none;opacity:.6}}
.jn-q__helps{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin:var(--space-2) 0}
.jn-kw__details>summary{list-style:none;cursor:pointer}
.jn-kw__details>summary::-webkit-details-marker{display:none}
.jn-kw__details>summary .jn-icon{flex:none;color:var(--fg-2);transition:transform var(--dur) var(--ease)}
.jn-kw__details[open]>summary .jn-icon{transform:rotate(180deg)}
.jn-kw__body{padding:var(--space-1) var(--space-2) var(--space-3) calc(12px + var(--space-3))}
.jn-kw__quote{margin:var(--space-1) 0 var(--space-3);padding-left:var(--space-3);border-left:3px solid var(--border-rule);color:var(--fg-1)}
.jn-kw__quote mark{background:var(--found-bg, var(--bg-surface));color:inherit;font-weight:600;border-radius:2px}

/* Nachschlagen: Themenseiten und eigene Schaubilder */
.jn-suche{margin:var(--space-3) 0}
.jn-suche__zeile{display:flex;gap:var(--space-2);align-items:stretch}
.jn-suche__zeile .jn-input{flex:1;min-width:0}
.jn-kurz,.jn-lehre{margin-top:var(--space-4)}
.jn-kurz{padding:var(--space-3) var(--space-4);border:var(--bw) solid var(--border-rule);border-left:3px solid var(--ochre);border-radius:var(--radius-card);background:var(--bg-card)}
.jn-kurz h2,.jn-lehre h2{margin-top:0}
.jn-kurz ul,.jn-lehre ul{margin:var(--space-2) 0 0;padding-left:var(--space-4)}
.jn-kurz li,.jn-lehre li{margin-bottom:var(--space-1)}
.jn-lehre p{margin:var(--space-2) 0}
.jn-lehre--merk{padding:var(--space-3) var(--space-4);border-radius:var(--radius-card);background:var(--bg-surface)}
.jn-lehre__tipp{padding:var(--space-3) var(--space-4);border:var(--bw) solid var(--border-rule);border-radius:var(--radius-card);background:var(--bg-card)}
.jn-lehre__tipp p{margin:var(--space-1) 0 0}
.jn-lehre__ende{margin:var(--space-5) 0 var(--space-4)}
.jn-grafik{margin:var(--space-4) 0;padding:var(--space-3);border:var(--bw) solid var(--border-rule);border-radius:var(--radius-card);background:var(--bg-card)}
.jn-grafik__titel{margin-bottom:var(--space-3);font-family:var(--font-serif);font-weight:600;font-size:18px;line-height:24px}
.jn-grafik__hinweis{margin:var(--space-3) 0 0}
.jn-ablauf,.jn-stufen,.jn-baum,.jn-baum__kinder{list-style:none;margin:0;padding:0}
.jn-ablauf__schritt{position:relative;padding-bottom:var(--space-3)}
.jn-ablauf__schritt:not(:last-child)::after{content:"";position:absolute;left:15px;top:34px;bottom:2px;width:2px;background:var(--border-strong)}
.jn-ablauf__box{display:flex;gap:var(--space-3);align-items:flex-start}
.jn-ablauf__box strong,.jn-stufen__stufe strong,.jn-baum__box strong{display:block;font:var(--type-ui);font-weight:600}
.jn-ablauf__box span:not(.jn-ablauf__nr),.jn-stufen__stufe span,.jn-baum__box span{display:block;font:var(--type-meta);color:var(--fg-2)}
.jn-ablauf__nr{flex:0 0 32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--action-bg);color:var(--action-fg);font:var(--type-ui);font-weight:600}
.jn-ablauf__nein{margin:var(--space-1) 0 0 calc(32px + var(--space-3));font:var(--type-meta);color:var(--fg-2)}
.jn-stufen__stufe{margin:0 0 var(--space-2) calc(var(--stufe) * var(--space-3));padding:var(--space-2) var(--space-3);border-left:3px solid var(--ochre);border-radius:var(--radius-control);background:var(--bg-surface)}
.jn-baum__box{display:block;padding:var(--space-2) var(--space-3);border:var(--bw) solid var(--border-strong);border-radius:var(--radius-control);background:var(--bg-page)}
.jn-baum__kinder{margin:var(--space-2) 0 0 var(--space-3);padding-left:var(--space-3);border-left:2px solid var(--border-strong)}
.jn-baum__knoten{margin-bottom:var(--space-2)}
.jn-kurz li,.jn-lehre p,.jn-lehre li,.jn-lehre__tipp p{text-align:left;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
@media (min-width:700px){.jn-kurz li,.jn-lehre p,.jn-lehre li,.jn-lehre__tipp p{text-align:justify}}

/* Bewegung: dezent und kurz; wer Bewegung im System reduziert hat, sieht nichts davon */
@media (prefers-reduced-motion:no-preference){
  @keyframes jn-einblenden{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  @keyframes jn-fuellen{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  @keyframes jn-aufbauen{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.16s}
  .jn-top{view-transition-name:jn-top}
  .jn-nav{view-transition-name:jn-nav}
  /* Seiteninhalt blendet nacheinander ein */
  .jn-main .jn-col>*:not(.jn-top):not(.jn-kurz):not(.jn-lehre):not(.jn-grafik):not(.jn-lehre__tipp):not(.jn-stack){animation:jn-einblenden .34s cubic-bezier(.22,1,.36,1) backwards}
  .jn-main .jn-col>:nth-child(3){animation-delay:.04s}
  .jn-main .jn-col>:nth-child(4){animation-delay:.08s}
  .jn-main .jn-col>:nth-child(5){animation-delay:.12s}
  .jn-main .jn-col>:nth-child(n+6){animation-delay:.16s}
  /* Fortschrittsbalken füllen sich bis zum aktuellen Stand */
  .jn-today .jn-progress__fill,.jn-dist .jn-progress__fill,.jn-stand .jn-bar>span,.jn-pcard .jn-bar>span{transform-origin:left center;animation:jn-fuellen .9s cubic-bezier(.22,1,.36,1) .2s both}
  .jn-stand .jn-bar>span:nth-child(2),.jn-pcard .jn-bar>span:nth-child(2){animation-delay:.32s}
  .jn-stand .jn-bar>span:nth-child(3),.jn-pcard .jn-bar>span:nth-child(3){animation-delay:.44s}
  .jn-dist .jn-progress:nth-of-type(2) .jn-progress__fill{animation-delay:0.27s}
  .jn-dist .jn-progress:nth-of-type(3) .jn-progress__fill{animation-delay:0.34s}
  .jn-dist .jn-progress:nth-of-type(4) .jn-progress__fill{animation-delay:0.41s}
  .jn-dist .jn-progress:nth-of-type(5) .jn-progress__fill{animation-delay:0.48s}
  .jn-dist .jn-progress:nth-of-type(6) .jn-progress__fill{animation-delay:0.55s}
  .jn-dist .jn-progress:nth-of-type(7) .jn-progress__fill{animation-delay:0.62s}
  /* Druckfeedback */
  .jn-btn,.jn-choice,.jn-pcard,.jn-mixcard,.jn-rate,.jn-chip-btn,.jn-modus__opt,.jn-iconbtn,.jn-nav__item{transition:transform .14s cubic-bezier(.22,1,.36,1),background-color var(--dur) var(--ease),filter var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
  .jn-btn:active,.jn-rate:active,.jn-chip-btn:active,.jn-modus__opt:active,.jn-iconbtn:active{transform:scale(.96)}
  .jn-choice:active,.jn-pcard:active,.jn-mixcard:active{transform:scale(.985)}
  .jn-nav__item:active{transform:scale(.94)}
  /* Nachschlagen: Abschnitte und Schaubilder erscheinen beim Scrollen */
  .jn-js .jn-reveal{opacity:0;transform:translateY(14px);transition:opacity .4s cubic-bezier(.22,1,.36,1),transform .4s cubic-bezier(.22,1,.36,1)}
  .jn-js .jn-reveal.is-sichtbar{opacity:1;transform:none}
  .jn-js .jn-grafik:not(.is-sichtbar) :is(.jn-ablauf__schritt,.jn-stufen__stufe,.jn-baum__knoten){opacity:0}
  .jn-grafik.is-sichtbar :is(.jn-ablauf__schritt,.jn-stufen__stufe,.jn-baum__knoten){animation:jn-aufbauen .45s cubic-bezier(.22,1,.36,1) both}
  .jn-grafik.is-sichtbar :is(.jn-ablauf__schritt,.jn-stufen__stufe):nth-child(2){animation-delay:.12s}
  .jn-grafik.is-sichtbar :is(.jn-ablauf__schritt,.jn-stufen__stufe):nth-child(3){animation-delay:.24s}
  .jn-grafik.is-sichtbar :is(.jn-ablauf__schritt,.jn-stufen__stufe):nth-child(4){animation-delay:.36s}
  .jn-grafik.is-sichtbar :is(.jn-ablauf__schritt,.jn-stufen__stufe):nth-child(5){animation-delay:.48s}
  .jn-grafik.is-sichtbar :is(.jn-ablauf__schritt,.jn-stufen__stufe):nth-child(n+6){animation-delay:.6s}
  .jn-grafik.is-sichtbar .jn-baum__knoten{animation-delay:.1s}
  .jn-grafik.is-sichtbar .jn-baum__kinder .jn-baum__knoten{animation-delay:.3s}
}

/* Installationsanleitung: einfache Handy-Zeichnungen aus Token-Farben */
.jn-anl{list-style:none;margin:var(--space-4) 0;padding:0;display:grid;gap:var(--space-4)}
.jn-anl__schritt{display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);gap:var(--space-4);align-items:center;padding:var(--space-3);border:var(--bw) solid var(--border-rule);border-radius:var(--radius-card);background:var(--bg-card)}
.jn-anl__schritt h3{margin:0 0 var(--space-2)}
.jn-anl__schritt p{margin:0}
.jn-anl__bild{width:100%;height:auto;display:block}
.jn-anl__nr{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin-right:var(--space-2);border-radius:50%;background:var(--action-bg);color:var(--action-fg);font:600 14px/1 var(--font-sans,inherit)}
.jn-anl .a-phone{fill:var(--bg-surface);stroke:var(--border-control);stroke-width:2}
.jn-anl .a-seite,.jn-anl .a-blatt{fill:var(--bg-page);stroke:var(--border-rule);stroke-width:1.5}
.jn-anl .a-leiste{fill:var(--bg-card);stroke:var(--border-control);stroke-width:1.5}
.jn-anl .a-zeile{fill:var(--border-rule)}
.jn-anl .a-trenn{stroke:var(--border-rule);stroke-width:1.5}
.jn-anl .a-titel{fill:var(--heading);font:600 22px/1 var(--font-serif,serif)}
.jn-anl .a-text{fill:var(--fg-1);font:14px/1 var(--font-sans,sans-serif)}
.jn-anl .a-text--fett{font-weight:600}
.jn-anl .a-icon{fill:none;stroke:var(--fg-2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.jn-anl .a-treffer{fill:var(--found-bg)}
.jn-anl .a-ring{fill:none;stroke:var(--ochre);stroke-width:3}
.jn-anl .a-app{fill:var(--brand)}
.jn-anl .a-app-s{fill:var(--action-fg);font:600 34px/1 var(--font-serif,serif)}
.jn-anl .a-feld{fill:var(--bg-card);stroke:var(--border-control);stroke-width:1.5}
@media (max-width:420px){.jn-anl__schritt{grid-template-columns:minmax(0,1fr)}.jn-anl__bild{max-width:200px;margin:0 auto}}

/* Nichts darf die Seite seitlich verschiebbar machen: lange Etiketten umbrechen, der Hauptbereich scrollt nur senkrecht. */
.jn-main{overflow-x:hidden}
.jn-fc__meta{min-width:0}
.jn-fc__meta .jn-chip{white-space:normal;max-width:100%;text-align:left}
.jn-anl .a-punkt{fill:var(--fg-2)}
.jn-appbtn{display:inline-flex;align-items:center;justify-content:center;min-height:32px;margin-right:var(--space-1);padding:0 var(--space-3);border:var(--bw) solid var(--border-control);border-radius:var(--radius-chip);font:var(--type-ui);font-weight:600;color:var(--brand);text-decoration:none;white-space:nowrap}
.jn-appbtn:hover{background:var(--bg-surface);text-decoration:none}
.jn-appbtn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
@media (display-mode:standalone){.jn-appbtn{display:none}}
.jn-standalone .jn-appbtn{display:none}

/* Anleitung: der Ring pulsiert, ein Finger tippt auf die Stelle, die Liste wischt nach oben */
.jn-anl .a-finger{fill:var(--ochre);opacity:0;transform-box:fill-box;transform-origin:center;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  @keyframes jn-tipp{0%{opacity:0;transform:translate(34px,48px) scale(1)}22%{opacity:.85;transform:translate(0,0) scale(1)}34%{opacity:.85;transform:translate(0,0) scale(.7)}46%{opacity:.85;transform:translate(0,0) scale(1)}78%{opacity:.85;transform:translate(0,0) scale(1)}92%,100%{opacity:0;transform:translate(0,0) scale(1)}}
  @keyframes jn-puls{0%,100%{stroke-width:3;opacity:1}50%{stroke-width:5;opacity:.7}}
  @keyframes jn-wischen{0%,12%{transform:translateY(84px)}55%,100%{transform:translateY(0)}}
  @keyframes jn-finger-hoch{0%{opacity:0;transform:translateY(0)}8%{opacity:.85;transform:translateY(0)}48%{opacity:.85;transform:translateY(-84px)}58%,100%{opacity:0;transform:translateY(-84px)}}
  @keyframes jn-tipp-spaet{0%,56%{opacity:0;transform:scale(1)}64%{opacity:.85;transform:scale(1)}72%{opacity:.85;transform:scale(.7)}80%{opacity:.85;transform:scale(1)}94%,100%{opacity:0;transform:scale(1)}}
  @keyframes jn-ring-spaet{0%,52%{opacity:0}62%,100%{opacity:1}}
  .jn-anl .a-ring{animation:jn-puls 1.6s ease-in-out infinite}
  .jn-anl .a-finger--tippen{animation:jn-tipp 3.2s ease-in-out infinite}
  .jn-anl .a-scroll{animation:jn-wischen 4.4s cubic-bezier(.45,0,.2,1) infinite}
  .jn-anl .a-finger--wischen{animation:jn-finger-hoch 4.4s ease-in-out infinite}
  .jn-anl .a-ring--spaet{animation:jn-ring-spaet 4.4s ease-in-out infinite}
  .jn-anl .a-ring--spaet~.a-finger--tippen{animation:jn-tipp-spaet 4.4s ease-in-out infinite}
}
@media (prefers-reduced-motion:reduce){.jn-anl .a-finger{display:none}}

.jn-quota-selector .jn-chip{min-width:44px;min-height:44px;justify-content:center}
.jn-textlinks{display:flex;justify-content:center;gap:var(--space-4);margin:var(--space-2) 0 0;font:var(--type-meta)}
.jn-textlinks a{padding:var(--space-2) var(--space-1);color:var(--fg-2)}
@media (max-width:600px){.jn-fc:has(.jn-fc__a) .jn-fc__q{font-size:19px;line-height:27px}}
html.jn-laedt::before{content:"";position:fixed;top:0;left:0;z-index:9999;width:38%;height:3px;background:var(--brand)}
html.jn-laedt .jn-main{opacity:.6;transition:opacity .2s}
html.jn-laedt{cursor:progress}
a[aria-busy="true"]{opacity:.6}
@media (prefers-reduced-motion:no-preference){
  @keyframes jn-lade{0%{transform:translateX(-100%)}100%{transform:translateX(280%)}}
  html.jn-laedt::before{animation:jn-lade 1.05s cubic-bezier(.4,0,.2,1) infinite}
}
@media (prefers-reduced-motion:reduce){html.jn-laedt::before{width:100%;opacity:.5}}

/* Versuch gegen den Glas-Effekt von iOS 26: In der installierten App sitzt die Kopfzeile im Ruhezustand etwas tiefer,
   damit das Logo nicht direkt an der oberen Kante liegt, wo das System einen weichen Schleier darüberlegt.
   Das Band über der Kopfzeile deckt den Abstand ab, damit beim Scrollen kein Text darin durchläuft.
   Rückgängig machen: diesen Block löschen. */
@media (max-width:700px){
  .jn-standalone .jn-main{padding-top:calc(var(--space-3) + 14px)}
  .jn-standalone .jn-top::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:400px;background:var(--bg-page)}
}
@media (display-mode:standalone) and (max-width:700px){
  .jn-main{padding-top:calc(var(--space-3) + 14px)}
  .jn-top::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:400px;background:var(--bg-page)}
}

/* Tester-Liste: Stift und Mülltonne rechts neben dem Namen */
.jn-tester{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.jn-tester__act{display:flex;gap:var(--space-1);flex:none}
.jn-tester .jn-pcard__meta{overflow-wrap:anywhere}