/* GENIEVERSUM · Die Wortwerkstatt (27.10.2026) — baut auf mechaniken.css auf. Silben tragen Bögen, nie allein Farbe. */
.wortwerkstatt .wort-zurueck{margin:0 0 12px;font-size:.9rem;padding:8px 14px}
.wort-stationen{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:16px 0}
.wort-station{display:flex;flex-direction:column;align-items:center;gap:4px;min-height:96px;padding:14px 10px;border:1px solid #c8903a;border-radius:16px;background:#1e2c24;color:#f4e4c1;font:600 1rem/1.25 'Helvetica Neue',Helvetica,Arial,sans-serif;cursor:pointer;text-align:center;touch-action:manipulation}
.wort-station:hover,.wort-station:focus-visible{background:#2d3423;outline:3px solid #f4e4c1;outline-offset:2px}
.wort-station .wort-emoji{font-size:2rem;line-height:1}
.wort-station .wort-ziel{font-weight:normal;font-size:.82rem;color:#b7c5bd}
.wort-schon{border-color:#e8b65d;box-shadow:0 0 0 2px #e8b65d55 inset}
.wort-schon::after{content:'✦';color:#e8b65d;font-size:.9rem}
.wort-begleit,.wort-leise{font:italic .9rem/1.5 Georgia,serif;color:#b7c5bd;margin:10px 0 0}
.wort-name{margin:6px 0 4px}
.wort-buehne{display:flex;flex-direction:column;gap:12px;margin-top:6px}
/* Silben: jede Silbe trägt einen Bogen darunter (Form statt Farbe) */
.wort-silben{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;font-family:Georgia,serif;font-size:clamp(1.6rem,6vw,2.6rem);line-height:1.4}
.wort-silben.wort-klein{font-size:1.25rem;justify-content:flex-start}
.wort-silbe{position:relative;padding:0 .12em .28em;color:#f4e4c1;transition:color .3s,text-shadow .3s}
.wort-silbe::after{content:'';position:absolute;left:8%;right:8%;bottom:0;height:.32em;border:2px solid #7b704e;border-top:none;border-radius:0 0 999px 999px}
.wort-silbe.an{color:#ffe7a8;text-shadow:0 0 14px #e8b65d}
.wort-silbe.an::after{border-color:#e8b65d}
.wort-vokal{font-weight:normal}
.wort-silbe.kern .wort-vokal,.wort-satzsilbe .wort-vokal{font-weight:700;color:#e8b65d}
.wort-figur{text-align:center;transition:transform .5s ease;transform:translateX(calc((var(--schritt,0) - 1.5) * 36px))}
.wort-figur img{image-rendering:pixelated;width:64px;height:auto}
.wort-klatschen{min-height:64px;font-size:1.25rem;flex:1 1 180px;background:#65502c}
/* Bildwahl */
.wort-wahl{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.wort-bild{display:flex;flex-direction:column;align-items:center;gap:4px;min-height:96px}
.wort-bild .wort-emoji{font-size:2.4rem;line-height:1.1}
.wort-bild .wort-wort{font-size:1rem}
.wort-ziel-bild{display:flex;align-items:center;justify-content:center;gap:14px;padding:14px;border:1px solid #c8903a;border-radius:16px;background:#1e2c24;font-size:1.4rem}
.wort-ziel-bild .wort-emoji{font-size:3rem}
.wort-ziel-bild img{image-rendering:pixelated}
.wort-bluehen{background:#6e7f52!important;border-color:#f4e4c1!important;animation:wort-bluehen .6s ease}
@keyframes wort-bluehen{50%{transform:scale(1.08)}}
.wort-zeichen{display:flex;align-items:center;justify-content:center;gap:16px;padding:12px;border-radius:16px;background:#14221d;color:#f4e4c1;font-size:1.05rem}
.wort-buchstabe{font:700 clamp(3rem,12vw,5rem)/1 'Helvetica Neue',Arial,sans-serif;color:#e8b65d}
.wort-hinweis{outline:3px solid #e8b65d;outline-offset:3px}
/* Silbenbrücke */
.wort-plaetze{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;transition:gap .6s ease}
.wort-platz{display:grid;place-items:center;min-width:64px;min-height:56px;padding:0 10px;border:2px dashed #7b704e;border-radius:12px;font:1.6rem Georgia,serif;color:#f4e4c1}
.wort-platz.voll{border-style:solid;border-color:#e8b65d;background:#2d3423}
.wort-plaetze.verschmolzen{gap:0}
.wort-plaetze.verschmolzen .wort-platz{border-radius:0;border-left-width:0;border-right-width:0}
.wort-silbenkarte{font:1.5rem Georgia,serif}
/* Buchstabenspur */
.wort-spurfeld{max-width:320px;aspect-ratio:1;margin:0 auto}
/* Klangkreis für Lied und Tönen */
.wort-kreis{display:grid;place-items:center;width:110px;height:110px;margin:8px auto;border-radius:50%;background:#7d632d;color:#f4e4c1;font-size:2.4rem;box-shadow:0 0 calc(10px + var(--pegel,0) * 40px) #e8b65d;transform:scale(calc(var(--groesse,1) * (1 + var(--pegel,0) * .25)));transition:transform .25s ease,box-shadow .2s ease}
.wort-kreis.an{background:#c8903a}
.wort-toenen{font:700 3rem 'Helvetica Neue',Arial,sans-serif}
.wort-toenen.wachsen{animation:wort-toenen 4s ease-in-out forwards}
@keyframes wort-toenen{to{transform:scale(1.7);box-shadow:0 0 60px #e8b65d;background:#c8903a}}
/* Lesen und Erzählen */
.wort-satz{font:clamp(1.3rem,4.6vw,1.9rem)/1.9 Georgia,serif;text-align:center;color:#f4e4c1;margin:6px 0}
.wort-satzwort{display:inline-block;margin:0 .22em;padding:0 .1em;border-radius:8px;transition:background .2s}
.wort-satzwort.an{background:#65502c}
.wort-satzsilbe{position:relative;padding-bottom:.18em}
.wort-satzsilbe+.wort-satzsilbe::before{content:'';position:absolute;left:-1px;bottom:.1em;height:.35em;border-left:1px solid #7b704e}
.wort-geschichte{padding:16px 18px;border:1px solid #c8903a;border-radius:16px;background:#14221d;font:1.15rem/1.7 Georgia,serif}
.wort-geschichte p{margin:0 0 6px}
.wort-schreibfeld{width:100%;padding:12px;border:1px solid #c8903a;border-radius:12px;background:#0f1a16;color:#f4e4c1;font:1.05rem/1.5 Georgia,serif}
@media (max-width:430px){.wort-stationen{grid-template-columns:repeat(2,minmax(0,1fr))}.wort-wahl{grid-template-columns:repeat(2,minmax(0,1fr))}.wort-platz{min-width:52px}}
@media (prefers-reduced-motion:reduce){.wortwerkstatt *{animation:none!important;transition:none!important}}
.mechanik-ruhig.wortwerkstatt *{animation:none!important;transition:none!important}