/* Anleitung: Knopf im Startmenü und Dialog mit einem Schritt zur Zeit. Neon-Look aus neon.css. */

#start-menu [data-anleitung]:not([hidden]){
  display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;min-height:48px;margin:.2rem 0 .6rem;padding:.6rem 1rem;
  border:2px solid var(--neon-gelb);border-radius:12px;background:transparent;color:var(--neon-gelb);
  font:700 14px/1.2 var(--neon-schrift);letter-spacing:.04em;cursor:pointer;box-shadow:0 4px 0 #6b5d00;overflow-wrap:anywhere
}
#start-menu [data-anleitung]:not([hidden]):hover{background:rgba(255,229,59,.12)}
#start-menu [data-anleitung]:not([hidden]):active{transform:translateY(3px);box-shadow:0 1px 0 #6b5d00}
@media (prefers-reduced-motion:no-preference){
  #start-menu [data-anleitung][data-neu=true]{animation:an-puls 2s ease-in-out infinite}
}
@keyframes an-puls{
  0%,100%{box-shadow:0 4px 0 #6b5d00,0 0 0 rgba(255,229,59,0)}
  50%{box-shadow:0 4px 0 #6b5d00,0 0 18px rgba(255,229,59,.6)}
}

dialog.anleitung[open]{
  display:flex;flex-direction:column;gap:clamp(.7rem,1.8vw,1.1rem);
  width:min(46rem,calc(100vw - 1.5rem));max-height:calc(100dvh - 1.5rem);margin:auto;padding:clamp(1rem,2.6vw,1.7rem);overflow-y:auto;overflow-x:hidden;
  border:2px solid var(--neon-pink);border-radius:18px;background:linear-gradient(160deg,#1f0f2c,#0f0718);color:var(--neon-text);color-scheme:dark;
  font-family:var(--neon-schrift);box-shadow:0 0 22px rgba(255,62,165,.45),inset 0 0 30px rgba(255,62,165,.08),0 30px 80px #000c;box-sizing:border-box
}
dialog.anleitung::backdrop{background:rgba(8,3,14,.76);backdrop-filter:blur(4px)}
dialog.anleitung *{box-sizing:border-box}
dialog.anleitung>*{flex-shrink:0}
dialog.anleitung :focus-visible{outline:none}
dialog.anleitung :is(button,a):focus-visible{filter:brightness(1.35) saturate(1.2)}

.an-kopf{position:relative;display:block;margin:0;padding:0 3.2rem 0 0;border:0;background:none;box-shadow:none;color:inherit;min-height:0}
.an-kopf small{display:block;font:10px/1.6 var(--neon-pixel);letter-spacing:.14em;color:var(--neon-cyan);text-shadow:0 0 8px var(--neon-cyan)}
.an-kopf h2{margin:.35rem 0 0;padding:0;background:none;font:clamp(.95rem,2.6vw,1.25rem)/1.5 var(--neon-pixel);letter-spacing:.06em;text-transform:uppercase;color:var(--neon-gelb);text-shadow:0 0 12px rgba(255,229,59,.55);overflow-wrap:anywhere}
.an-kurz{margin:.5rem 0 0;font:600 clamp(.95rem,2.2vw,1.05rem)/1.5 var(--neon-schrift);color:var(--neon-leise)}
.an-zu{position:absolute;top:0;right:0;width:44px;height:44px;padding:0;border:2px solid var(--neon-cyan);border-radius:12px;background:transparent;color:var(--neon-cyan);font:700 24px/1 var(--neon-schrift);cursor:pointer}
.an-zu:hover{background:rgba(44,241,255,.14)}

.an-buehne{display:grid;gap:clamp(.7rem,1.8vw,1rem);min-width:0}
.an-bild{position:relative;margin:0 auto;width:min(100%,calc(44dvh * 1.6));aspect-ratio:16/10;overflow:hidden;border:2px solid var(--neon-cyan);border-radius:12px;background:var(--neon-tafel);box-shadow:0 0 14px rgba(44,241,255,.25)}
.an-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.an-platz{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:1rem;text-align:center;font:clamp(.6rem,1.8vw,.8rem)/1.7 var(--neon-pixel);letter-spacing:.06em;text-transform:uppercase;color:var(--neon-aus);overflow-wrap:anywhere}
.an-text-box{min-width:0;align-self:center}
.an-zaehler{margin:0;font:11px/1.6 var(--neon-pixel);letter-spacing:.06em;text-transform:uppercase;color:var(--neon-cyan);text-shadow:0 0 8px rgba(44,241,255,.6)}
.an-titel{margin:.45rem 0 0;font:700 clamp(1.2rem,3vw,1.6rem)/1.2 var(--neon-schrift);letter-spacing:.02em;color:#fff;overflow-wrap:anywhere}
.an-text{margin:.5rem 0 0;font:500 clamp(1rem,2.3vw,1.1rem)/1.55 var(--neon-schrift);color:var(--neon-text);overflow-wrap:anywhere}

.an-leiste{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.6rem}
.an-leiste.an-nur{grid-template-columns:1fr;justify-items:end}
.an-punkte{display:flex;justify-content:center;flex-wrap:wrap;gap:0}
.an-punkt{position:relative;width:44px;height:44px;padding:0;border:0;background:transparent;cursor:pointer}
.an-punkt::before{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border:2px solid var(--neon-cyan);border-radius:50%;background:transparent}
.an-punkt[aria-current]::before{background:var(--neon-gelb);border-color:var(--neon-gelb);box-shadow:0 0 10px var(--neon-gelb)}
.an-punkt:hover::before{background:rgba(44,241,255,.45)}
.an-knopf{min-width:6.5rem;min-height:48px;padding:.5rem 1.1rem;border-radius:12px;font:700 14px/1.1 var(--neon-schrift);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.an-zurueck{border:2px solid var(--neon-cyan);background:transparent;color:var(--neon-cyan);box-shadow:0 4px 0 #0a5f66}
.an-zurueck:disabled{opacity:.4;cursor:default;box-shadow:none}
.an-zurueck:hover:enabled{background:rgba(44,241,255,.12)}
.an-weiter{min-width:9rem;border:0;background:var(--neon-gelb);color:#1a0d00;font:12px/1.3 var(--neon-pixel);box-shadow:0 5px 0 #b39a00,0 0 18px rgba(255,229,59,.45)}
.an-weiter:active{transform:translateY(3px);box-shadow:0 2px 0 #b39a00}
.an-zurueck:active:enabled{transform:translateY(3px);box-shadow:0 1px 0 #0a5f66}

.an-extras{display:grid;gap:.8rem}
dialog.anleitung.an-mit:not(.an-ende) .an-extras{display:none}
.an-steuerung{width:100%;border-collapse:collapse;border:2px solid var(--neon-linie);border-radius:12px;background:var(--neon-tafel)}
.an-steuerung caption{padding:0 0 .45rem;text-align:left;font:11px/1.5 var(--neon-pixel);letter-spacing:.08em;text-transform:uppercase;color:var(--neon-gelb)}
.an-steuerung :is(th,td){padding:.55rem .8rem;border-top:1px solid var(--neon-linie);text-align:left;vertical-align:middle;font:500 .98rem/1.4 var(--neon-schrift);color:var(--neon-text)}
.an-steuerung th{width:38%;font-weight:400;white-space:normal}
.an-steuerung td{color:var(--neon-leise)}
.an-steuerung kbd{display:inline-block;min-width:2rem;margin:.1rem 0;padding:.25rem .55rem;border:2px solid var(--neon-cyan);border-bottom-width:4px;border-radius:8px;background:var(--neon-kasten2);color:var(--neon-cyan);text-align:center;font:600 .95rem/1.2 var(--neon-schrift)}
.an-tipp{margin:0;padding:.8rem 1rem;border:2px solid var(--neon-gruen);border-radius:12px;background:var(--neon-tafel);box-shadow:0 0 14px rgba(70,255,138,.2);font:500 1rem/1.5 var(--neon-schrift);color:var(--neon-text)}
.an-tipp b{display:block;margin-bottom:.3rem;font:10px/1.6 var(--neon-pixel);letter-spacing:.12em;text-transform:uppercase;color:var(--neon-gruen)}

/* Schmal: Leiste in zwei Reihen, Punkte oben */
@media (max-width:30rem){
  .an-leiste{grid-template-columns:1fr 1fr}
  .an-punkte{grid-column:1/-1;grid-row:1}
  .an-knopf,.an-weiter{min-width:0;width:100%}
  .an-leiste.an-nur{grid-template-columns:1fr}
  .an-steuerung th{width:44%}
}

/* Querformat am Handy: Bild links, Text rechts */
@media (orientation:landscape) and (max-height:34rem){
  dialog.anleitung[open]{width:min(60rem,calc(100vw - 1rem));max-height:calc(100dvh - 1rem);gap:.5rem;padding:.7rem 1rem}
  .an-kopf{padding-right:3rem}
  .an-kopf h2{margin-top:.15rem;font-size:.85rem}
  .an-kurz{margin-top:.25rem;font-size:.9rem;line-height:1.35}
  .an-buehne{grid-template-columns:minmax(0,42%) minmax(0,1fr);align-items:center}
  .an-bild{width:100%}
  .an-titel{font-size:1.15rem}
  .an-text{font-size:.95rem;line-height:1.4}
  .an-leiste{grid-template-columns:auto minmax(0,1fr) auto}
  .an-punkte{grid-column:auto;grid-row:auto}
  .an-knopf{min-height:44px}
  .an-weiter{min-width:8rem}
}