/* WYDA-Übungsbegleiter – im Silbermuschel-Aussehen, überall Comic Sans MS. */

.smw-w{
  --w-creme:#faf4e6; --w-perg:#fffdf8; --w-moos:#4f6f52; --w-moos-tief:#2f4434;
  --w-gold:#bfa24f; --w-gold-hell:#e6cf8d; --w-tinte:#33402f; --w-rand:#e3d7bd;
  --w-leise:#5f6f5c; --w-feld:#bfa24f;
  position:relative; overflow:hidden; isolation:isolate;
  max-width:980px; margin:24px auto; border-radius:22px;
  border:1px solid var(--w-rand);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(230,207,141,.35) 0%, rgba(230,207,141,0) 60%),
    radial-gradient(90% 70% at 50% 100%, rgba(79,111,82,.18) 0%, rgba(79,111,82,0) 70%),
    linear-gradient(180deg,#fffaf0 0%,#f6efdc 55%,#eef0df 100%);
  box-shadow:0 18px 40px -24px rgba(47,68,52,.55), inset 0 0 0 4px rgba(255,255,255,.6);
  color:var(--w-tinte);
}
.smw-w, .smw-w *{
  font-family:"Comic Sans MS","Comic Neue","Comic Sans","Chalkboard SE","Segoe Print",cursive !important;
  box-sizing:border-box;
}
.smw-w-licht{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none}
.smw-w-buehne{position:relative; z-index:1; min-height:560px; padding:30px 34px 28px}

/* Szenen: weich ein- und ausblenden. */
.smw-szene{animation:smwRein .7s cubic-bezier(.2,.7,.2,1) both}
.smw-szene.raus{animation:smwRaus .35s ease both}
@keyframes smwRein{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes smwRaus{to{opacity:0;transform:translateY(-10px)}}

.smw-w h2,.smw-w h3,.smw-w h4{color:var(--w-moos-tief); margin:0 0 .4em; line-height:1.25; letter-spacing:.01em}
.smw-w h2:focus,.smw-w h3:focus{outline:none}
.smw-w h2{font-size:clamp(1.7rem,3.6vw,2.4rem); text-align:center}
.smw-w h3{font-size:1.35rem}
.smw-w p{margin:0 0 .8em; line-height:1.6}
.smw-unter{text-align:center; color:var(--w-leise); max-width:560px; margin:0 auto 18px !important}
.smw-zier{display:block; text-align:center; color:var(--w-gold); letter-spacing:.5em; font-size:.85rem; margin:0 0 6px}

/* Knöpfe wie die übrigen Silbermuschel-Knöpfe. */
.smw-w button{cursor:pointer}
.smw-knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-size:1rem; letter-spacing:.03em; padding:10px 22px; min-height:44px;
  border:1px solid #b79a48; border-radius:999px;
  background:linear-gradient(180deg,#fdf8ec 0%,#f0e5c9 100%); color:#23361f;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.7), 0 4px 10px -6px rgba(47,68,52,.5);
  transition:background .25s, color .25s, transform .2s, box-shadow .25s}
.smw-knopf:hover,.smw-knopf:focus-visible{background:var(--w-moos); color:#f3efe2; border-color:var(--w-moos-tief); transform:translateY(-1px)}
.smw-knopf.haupt{background:var(--w-moos); color:#f6f1e3; border-color:var(--w-moos-tief)}
.smw-knopf.haupt:hover{background:var(--w-moos-tief)}
.smw-knopf::before,.smw-knopf::after,.smw-w button::before,.smw-w button::after{content:none !important; display:none !important}
.smw-zurueck{background:none; border:0; color:var(--w-leise); font-size:.95rem; padding:6px 0; margin:0 0 10px}
.smw-zurueck:hover{color:var(--w-moos-tief); text-decoration:underline}

/* --- Start: die Figur mit den drei Feldern -------------------------- */
.smw-start{display:grid; grid-template-columns:1fr 280px 1fr; gap:18px; align-items:center; margin-top:8px}
.smw-start-figur{position:relative; aspect-ratio:2/3; width:100%}
.smw-start-figur svg{position:absolute; inset:0}
.smw-3d-leinwand{position:absolute; inset:0; width:100% !important; height:100% !important; display:block; touch-action:pan-y; cursor:grab}
.smw-3d-leinwand:active{cursor:grabbing}
.smw-start-figur svg{width:100%; height:auto; display:block}
.smw-feldwahl{display:flex; flex-direction:column; gap:14px}
.smw-feldwahl.rechts{align-items:flex-start}
.smw-feldwahl.links{align-items:flex-end; text-align:right}
.smw-feld-knopf{
  position:relative; width:100%; max-width:250px; text-align:left;
  padding:14px 16px 14px 54px; border-radius:18px;
  border:1px solid var(--w-rand); background:rgba(255,253,248,.85);
  color:var(--w-tinte); font-size:1rem; line-height:1.35;
  box-shadow:0 6px 18px -12px rgba(47,68,52,.55);
  transition:transform .25s, box-shadow .25s, border-color .25s, background .25s}
.smw-feld-knopf b{display:block; font-size:1.08rem; color:var(--w-moos-tief)}
.smw-feld-knopf small{display:block; color:var(--w-leise); font-size:.82rem}
.smw-feld-knopf .punkt{
  position:absolute; left:14px; top:50%; width:26px; height:26px; margin-top:-13px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fff 0%, var(--f) 55%, transparent 72%);
  box-shadow:0 0 14px 2px var(--f)}
.smw-feld-knopf:hover,.smw-feld-knopf:focus-visible,.smw-feld-knopf.an{
  transform:translateY(-2px); border-color:var(--f); background:#fffdf8;
  box-shadow:0 10px 26px -12px var(--f)}
.smw-alle{grid-column:1 / -1; text-align:center; margin-top:6px}

/* Die Felder an der Figur leuchten. */
.smw-glut{transition:opacity .6s, transform .6s; transform-box:fill-box; transform-origin:center}
.smw-glut.puls{animation:smwPuls 3.2s ease-in-out infinite}
@keyframes smwPuls{0%,100%{opacity:.45; transform:scale(.9)}50%{opacity:1; transform:scale(1.12)}}
.smw-glut.aus{opacity:.12; animation:none}
.smw-glut.an{opacity:1; animation:smwPuls 2.4s ease-in-out infinite}
.smw-glut-ort{cursor:pointer}

/* --- Zeit und Auswahl ------------------------------------------------ */
.smw-wahl-reihe{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin:18px 0}
.smw-zeit{
  width:150px; padding:18px 10px; border-radius:20px; text-align:center;
  border:1px solid var(--w-rand); background:rgba(255,253,248,.88); color:var(--w-tinte);
  box-shadow:0 8px 20px -14px rgba(47,68,52,.6); transition:transform .25s, border-color .25s, box-shadow .25s}
.smw-zeit b{display:block; font-size:2rem; color:var(--w-moos); line-height:1.1}
.smw-zeit span{font-size:.9rem; color:var(--w-leise)}
.smw-zeit:hover,.smw-zeit:focus-visible{transform:translateY(-3px); border-color:var(--w-gold); box-shadow:0 14px 26px -14px rgba(191,162,79,.9)}

.smw-karten{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px; margin:16px 0}
.smw-karte{
  display:flex; flex-direction:column; text-align:left; padding:16px 18px; border-radius:18px;
  border:1px solid var(--w-rand); border-top:5px solid var(--f, var(--w-gold));
  background:rgba(255,253,248,.92); color:var(--w-tinte);
  box-shadow:0 8px 22px -16px rgba(47,68,52,.6); transition:transform .25s, box-shadow .25s}
.smw-karte:hover,.smw-karte:focus-visible{transform:translateY(-3px); box-shadow:0 16px 30px -16px var(--f)}
.smw-karte h4{font-size:1.1rem; margin-bottom:4px}
.smw-karte .meta{font-size:.82rem; color:var(--w-leise); margin-bottom:8px}
.smw-karte p{font-size:.92rem; margin:0 0 10px}
.smw-karte .los{margin-top:auto; color:var(--w-moos); font-weight:700}
.smw-mitte{text-align:center}
.smw-leer{text-align:center; color:var(--w-leise); padding:30px}

/* --- Der Begleiter --------------------------------------------------- */
.smw-kopf{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px}
.smw-kopf-titel{font-size:1.15rem; color:var(--w-moos-tief); font-weight:700}
.smw-kopf-titel small{display:block; font-weight:400; font-size:.85rem; color:var(--w-leise)}
.smw-schalter{display:flex; gap:8px; flex-wrap:wrap}
.smw-schalt{
  padding:7px 13px; border-radius:999px; font-size:.85rem; min-height:36px;
  border:1px solid var(--w-rand); background:rgba(255,253,248,.85); color:var(--w-leise)}
.smw-schalt[aria-pressed="true"]{background:var(--w-moos); color:#f6f1e3; border-color:var(--w-moos-tief)}

.smw-fortschritt{height:10px; border-radius:99px; background:rgba(79,111,82,.13); overflow:hidden; margin:4px 0 6px}
.smw-fortschritt i{display:block; height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg,var(--w-gold-hell),var(--w-gold),var(--w-moos)); transition:width .4s linear}
.smw-fort-text{display:flex; justify-content:space-between; font-size:.82rem; color:var(--w-leise); margin-bottom:14px}

.smw-begleiter{display:grid; grid-template-columns:minmax(220px,330px) 1fr; gap:26px; align-items:center}
.smw-buehne-figur{position:relative; aspect-ratio:2/3; border-radius:22px;
  background:radial-gradient(70% 60% at 50% 40%, rgba(255,255,255,.95), rgba(250,244,230,.6) 70%, rgba(230,207,141,.18));
  border:1px solid var(--w-rand); overflow:hidden}
.smw-atem-ansage{position:absolute; left:50%; top:12px; transform:translateX(-50%); z-index:3; white-space:nowrap;
  padding:6px 16px; border-radius:999px; font-weight:700; font-size:1rem; color:#fff;
  background:var(--w-feld); box-shadow:0 6px 16px -8px var(--w-feld); transition:background .6s}
.smw-atem-ansage.aus{background:var(--w-moos)}
.smw-atem-ansage.halten{background:rgba(95,111,92,.75)}
.smw-atem-ansage:empty{display:none}
.smw-buehne-figur svg, .smw-buehne-figur img{position:absolute; inset:0; width:100%; height:100%}
.smw-buehne-figur img{object-fit:contain; padding:10px; opacity:0; transition:opacity .6s}
.smw-buehne-figur.mit-bild img{opacity:1}
.smw-buehne-figur.mit-bild svg,.smw-buehne-figur.mit-bild .smw-3d-leinwand{opacity:0; transition:opacity .6s}
.smw-3d-hinweis{position:absolute; bottom:8px; left:0; right:0; text-align:center; font-size:.75rem; color:var(--w-leise); z-index:2; pointer-events:none}

.smw-schritt-inhalt{min-height:300px; display:flex; flex-direction:column; gap:14px}
.smw-atem-zeile{display:flex; align-items:center; gap:22px; flex-wrap:wrap}
.smw-atemkreis{position:relative; width:150px; height:150px; flex:0 0 auto}
.smw-atemkreis .ring{position:absolute; inset:0; border-radius:50%; border:2px dashed rgba(79,111,82,.25)}
.smw-atemkreis .ball{position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 38% 34%, #fff 0%, var(--w-feld) 62%, rgba(0,0,0,0) 74%);
  box-shadow:0 0 34px 4px var(--w-feld); opacity:.85; transform:scale(.55); will-change:transform}
.smw-atemkreis .wort{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:var(--w-moos-tief); font-weight:700; font-size:1rem; line-height:1.2; text-shadow:0 1px 0 rgba(255,255,255,.9)}
.smw-atemkreis .wort span{font-size:1.9rem; font-weight:700}
.smw-laut{font-size:2.6rem; color:var(--w-feld); font-weight:700; text-shadow:0 2px 12px rgba(255,255,255,.9); min-width:60px}
.smw-schritt-titel{font-size:.9rem; color:var(--w-leise); letter-spacing:.04em}
.smw-schritt-text{font-size:1.25rem; line-height:1.55; color:var(--w-tinte); min-height:3.2em}
.smw-schritt-text.wechsel{animation:smwText .6s ease both}
@keyframes smwText{from{opacity:0; transform:translateX(12px)}to{opacity:1; transform:none}}

.smw-steuer{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:20px}
.smw-steuer .smw-knopf{min-width:54px; padding:10px 18px}
.smw-steuer .gross{min-width:150px}

.smw-ende{text-align:center; padding:20px 0}
.smw-ende .smw-atemkreis{margin:16px auto}
.smw-musik-name{font-size:.75rem; color:var(--w-leise); text-align:center; margin-top:12px}

@media (max-width:820px){
  .smw-w-buehne{padding:22px 16px 20px; min-height:0}
  .smw-start{grid-template-columns:1fr; gap:10px}
  .smw-start-figur{max-width:240px; margin:0 auto; order:-1}
  .smw-start{display:flex; flex-direction:column}
  .smw-feldwahl.links,.smw-feldwahl.rechts{display:contents}
  .smw-feld-knopf.feld-mental{order:1} .smw-feld-knopf.feld-gefuehl{order:2} .smw-feld-knopf.feld-vital{order:3}
  .smw-alle{order:4}
  .smw-feld-knopf{max-width:none}
  .smw-begleiter{grid-template-columns:1fr; gap:14px}
  .smw-buehne-figur{max-width:220px; margin:0 auto; width:100%}
  .smw-atemkreis{width:118px; height:118px}
  .smw-schritt-text{font-size:1.08rem}
  .smw-schritt-inhalt{min-height:0}
  .smw-steuer .gross{min-width:120px}
}
@media (prefers-reduced-motion:reduce){
  .smw-szene,.smw-glut,.smw-schritt-text.wechsel{animation:none !important}
}

/* So geht WYDA */
.smw-info{margin:22px auto 0; max-width:880px; border:1px solid var(--w-rand); border-radius:18px; background:rgba(255,253,248,.85); padding:4px 18px}
.smw-info summary{cursor:pointer; padding:12px 0; font-weight:700; color:var(--w-moos-tief); font-size:1.05rem; list-style:none; text-align:center}
.smw-info summary::-webkit-details-marker{display:none}
.smw-info summary::after{content:" ▾"; color:var(--w-gold)}
.smw-info[open] summary::after{content:" ▴"}
.smw-info-raster{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px 22px; padding:4px 0 10px}
.smw-info h4{font-size:1rem; margin:0 0 4px}
.smw-info p{font-size:.92rem; margin:0}
.smw-info-fuss{font-size:.8rem !important; color:var(--w-leise); border-top:1px solid var(--w-rand); padding:10px 0 12px; margin-top:6px !important}
.smw-alle .smw-knopf{margin:4px 6px}
/* Teaser-Box [wyda-box] */
.smw-box{display:flex; gap:18px; align-items:center; max-width:760px; margin:20px auto; padding:18px 22px; border-radius:20px;
  border:1px solid #e3d7bd; background:linear-gradient(135deg,#fffaf0,#f1ecd8); box-shadow:0 12px 28px -20px rgba(47,68,52,.6); color:#33402f}
.smw-box, .smw-box *{font-family:"Comic Sans MS","Comic Neue","Comic Sans","Chalkboard SE",cursive !important}
.smw-box-zeichen{flex:0 0 74px; height:74px; border-radius:50%;
  background:radial-gradient(circle at 50% 78%,rgba(217,140,79,.9),transparent 30%),radial-gradient(circle at 50% 52%,rgba(210,122,140,.9),transparent 30%),radial-gradient(circle at 50% 24%,rgba(138,134,196,.9),transparent 30%),#fffdf8;
  box-shadow:inset 0 0 0 2px #e6cf8d}
.smw-box h3{margin:0 0 4px; color:#2f4434; font-size:1.25rem}
.smw-box p{margin:0 0 10px; line-height:1.5}
.smw-box a.smw-knopf{text-decoration:none}
@media (max-width:560px){ .smw-box{flex-direction:column; text-align:center} }

/* ---- 1.0.1: Aufräumen nach dem ersten Live-Test ---------------------- */
/* Das Theme trennt Wörter und macht Knöpfe zu Flex-Zeilen – hier nicht. */
.smw-w, .smw-w *{hyphens:manual !important; -webkit-hyphens:manual !important; word-break:normal !important; overflow-wrap:break-word}
/* Start: Figur in der Mitte, die drei Felder darunter in einer Reihe –
   so passt es in jede Breite und nichts läuft aus dem Kasten. */
.smw-start{display:flex !important; flex-direction:column; align-items:center; gap:16px}
.smw-start-figur{width:min(320px,80%); order:0}
.smw-feldwahl{display:contents !important}
.smw-feldwahl-reihe{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; width:100%; max-width:760px; order:1}
.smw-feld-knopf{display:block !important; width:100% !important; max-width:none !important; text-align:left !important; white-space:normal !important;
  padding:14px 14px 14px 52px !important; line-height:1.35 !important; font-size:.98rem !important}
.smw-feld-knopf b,.smw-feld-knopf small{display:block !important}
.smw-alle{order:2}
@media (max-width:640px){ .smw-feldwahl-reihe{grid-template-columns:1fr} }
/* Die Atemansage gehört unter die Figur, nicht auf den Kopf. */
.smw-atem-ansage{top:auto !important; bottom:14px}
/* Knopf in der Box: immer lesbar, egal was das Theme mit Links macht. */
a.smw-knopf,a.smw-knopf:visited{color:#23361f !important; text-decoration:none !important; opacity:1 !important; filter:none !important}
a.smw-knopf.haupt,a.smw-knopf.haupt:visited{background:#4f6f52 !important; color:#f6f1e3 !important; border-color:#2f4434 !important}
a.smw-knopf.haupt:hover,a.smw-knopf.haupt:focus{background:#2f4434 !important; color:#fff !important}

/* Musik-Knopf oben rechts im Begleiter */
.smw-musik-knopf{position:absolute; top:14px; left:16px; z-index:5; padding:6px 14px; min-height:34px; border-radius:999px; font-size:.85rem !important;
  border:1px solid #b79a48; background:rgba(255,253,248,.9); color:#5f6f5c; cursor:pointer; display:inline-block !important}
.smw-musik-knopf[aria-pressed="true"]{background:#4f6f52; color:#f6f1e3; border-color:#2f4434}
.smw-musik-knopf::before,.smw-musik-knopf::after{content:none !important}

/* Platz für den Musik-Knopf: eine eigene Zeile oben, nichts liegt darunter. */
/* Musik-Knopf unten in der Mitte, unter den Bedienknöpfen – dort, wo
   vorher der Name der Musik stand. Der Platz ist freigehalten. */
.smw-w.mit-musik .smw-w-buehne{padding-bottom:70px !important}
.smw-w.mit-musik .smw-musik-knopf{top:auto !important; bottom:18px; left:50% !important; right:auto; transform:translateX(-50%)}

/* Schritttext immer kräftig und lesbar – das Theme hellt Text sonst auf. */
.smw-w .smw-schritt-text{color:#2f3b2b !important; opacity:1 !important}
.smw-w .smw-schritt-titel{color:#5f6f5c !important; opacity:1 !important}

/* ======================================================================
   1.0.6 – EIN BILDSCHIRM, KEIN SCROLLEN
   Gordon am 11.10.2026: "Welcher Mensch fängt an, hin und her zu
   scrollen, um alles zu sehen?" Der Begleiter ist so hoch wie das
   Fenster und teilt sich den Platz selbst ein.
   ====================================================================== */
.smw-w{height:calc(100vh - 24px); height:calc(100svh - 24px); max-height:860px; min-height:520px;
  display:flex; flex-direction:column; margin:12px auto !important}
.smw-w-buehne{flex:1 1 auto; min-height:0 !important; display:flex; flex-direction:column; overflow:auto; padding:20px 26px 16px !important}
.smw-w.mit-musik .smw-w-buehne{padding-bottom:62px !important}
.smw-szene{flex:1 1 auto; min-height:0; display:flex; flex-direction:column}
.smw-w h2:first-child,.smw-w .smw-zurueck:first-child{margin-top:0}

/* Start: links die Figur, rechts die Wahl */
.smw-start2{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:20px; flex:1 1 auto; min-height:0; align-items:stretch}
.smw-start2 .smw-start-figur{position:relative; width:100% !important; height:100%; min-height:0; aspect-ratio:auto !important; margin:0 !important}
.smw-panel{display:flex; flex-direction:column; justify-content:center; gap:10px; min-height:0}
.smw-panel h2{text-align:left !important; margin:0 !important; font-size:clamp(1.8rem,3.4vw,2.6rem) !important}
.smw-panel .smw-zier{text-align:left}
.smw-panel .smw-unter{text-align:left !important; margin:0 0 4px !important; max-width:none}
.smw-feldliste{display:flex; flex-direction:column; gap:8px}
.smw-feldliste .smw-feld-knopf{position:relative; padding:11px 40px 11px 50px !important; border-radius:14px}
.smw-feldliste .smw-feld-knopf b{font-size:1.05rem}
.smw-feldliste .smw-feld-knopf .pfeil{position:absolute; right:16px; top:50%; transform:translateY(-50%); font-style:normal; font-size:1.4rem; color:var(--f)}
.smw-aktionen{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:4px}
.smw-aktionen .smw-knopf{padding:9px 18px; min-height:40px}
.smw-link{background:none !important; border:0 !important; color:var(--w-moos) !important; text-decoration:underline; padding:6px 4px; font-size:.95rem; box-shadow:none !important}

/* So geht WYDA als Fenster im Begleiter */
.smw-overlay{position:absolute; inset:0; z-index:20; background:rgba(47,68,52,.35); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:16px; animation:smwRein .4s both}
.smw-overlay-kasten{position:relative; max-width:820px; width:100%; max-height:100%; overflow:auto; background:#fffdf8; border-radius:18px; border:1px solid var(--w-rand); padding:20px 24px; box-shadow:0 20px 40px -20px rgba(0,0,0,.5)}
.smw-overlay-zu{position:absolute; top:8px; right:10px; width:38px; height:38px; border-radius:50%; border:1px solid var(--w-rand); background:#fff; font-size:1.4rem; line-height:1; color:var(--w-moos-tief)}

/* Zeit und Auswahl kompakt */
.smw-wahl-reihe{margin:10px 0}
.smw-karten{margin:10px 0; overflow:auto}

/* Begleiter: alles in einem Bildschirm */
.smw-kopf{margin-bottom:6px}
.smw-fort-text{margin-bottom:8px}
.smw-begleiter{flex:1 1 auto; min-height:0; align-items:stretch !important}
.smw-buehne-figur{aspect-ratio:auto !important; height:100%; min-height:0}
.smw-schritt-inhalt{min-height:0 !important; justify-content:center; overflow:auto}
.smw-steuer{margin-top:10px}
.smw-w.mit-musik .smw-musik-knopf{bottom:14px}

@media (max-width:760px){
  .smw-w{max-height:none}
  .smw-w-buehne{padding:14px 14px 12px !important}
  .smw-start2{grid-template-columns:1fr; grid-template-rows:minmax(150px,34%) auto; gap:8px}
  .smw-panel{justify-content:flex-start; gap:7px}
  .smw-panel h2,.smw-panel .smw-zier,.smw-panel .smw-unter{text-align:center !important}
  .smw-panel .smw-unter{font-size:.9rem}
  .smw-feldliste .smw-feld-knopf{padding:8px 34px 8px 46px !important}
  .smw-aktionen{justify-content:center}
  .smw-begleiter{grid-template-columns:1fr !important; grid-template-rows:minmax(160px,42%) auto; gap:8px}
  .smw-buehne-figur{max-width:none !important; width:100%}
  .smw-atem-zeile{gap:12px}
  .smw-atemkreis{width:84px !important; height:84px !important}
  .smw-atemkreis .wort{font-size:.8rem}
  .smw-atemkreis .wort span{font-size:1.3rem}
  .smw-schritt-text{font-size:1rem !important; min-height:0}
  .smw-kopf-titel{font-size:1rem}
  .smw-schalt{padding:5px 10px; min-height:30px; font-size:.78rem}
  .smw-steuer .smw-knopf{min-width:44px; padding:8px 12px; min-height:40px}
}

/* Box [wyda-box]: normaler Knopf, echtes Bild der Figur */
.smw-box a.smw-knopf{display:inline-flex !important; align-items:center; min-height:0 !important; height:auto !important; padding:9px 20px !important; line-height:1.2 !important; font-size:1rem !important; margin:0 !important}
.smw-box-bild{flex:0 0 120px; width:120px; height:150px; object-fit:contain; display:block}
@media (max-width:560px){ .smw-box-bild{width:100px; height:125px} }

/* Knöpfe, die das Theme sonst zu Flex-Zeilen mit Lücken macht */
.smw-w .smw-zeit{display:block !important; text-align:center !important}
.smw-w .smw-zeit b,.smw-w .smw-zeit span{display:block !important}
.smw-w .smw-karte{display:flex !important; flex-direction:column !important; gap:0 !important; align-items:stretch !important; text-align:left !important}
.smw-w .smw-feld-knopf{gap:0 !important}
@media (max-width:760px){
  .smw-start2{grid-template-rows:minmax(130px,27%) auto}
  .smw-w.mit-musik .smw-w-buehne{padding-top:48px !important; padding-bottom:12px !important}
  .smw-w.mit-musik .smw-musik-knopf{top:10px !important; bottom:auto !important; left:auto !important; right:10px !important; transform:none !important; padding:4px 12px; min-height:30px; font-size:.78rem !important}
}

/* 1.0.8: Theme-Zeichenabstand in Knöpfen aus; Panel ohne Überschrift */
.smw-w, .smw-w *{letter-spacing:normal !important}
.smw-panel .smw-unter{font-size:1.05rem}

/* 1.0.9 – Handy: die Übung passt ganz auf den Bildschirm.
   Gordon am 11.10.2026: "Sobald ich in den Übungen bin, ist alles wieder
   abgeschnitten." Kopf in einer Zeile, Atem und Sekunden stehen im
   Etikett über der Figur, der Text bekommt eine feste Höhe und die
   Bedienknöpfe sind immer sichtbar. */
.smw-atem-ansage .sek{display:none}
@media (max-width:760px){
  .smw-kopf{flex-wrap:nowrap !important; gap:8px; margin-bottom:4px}
  .smw-kopf-titel{font-size:.95rem !important; line-height:1.2; min-width:0}
  .smw-kopf-titel small{font-size:.72rem !important}
  .smw-schalter{flex-wrap:nowrap !important; gap:6px}
  .smw-schalt .t{display:none}
  .smw-schalt{padding:4px 9px !important; min-height:30px; font-size:.95rem !important}
  .smw-fortschritt{margin:2px 0 4px}
  .smw-fort-text{font-size:.72rem; margin-bottom:6px}
  .smw-begleiter{display:flex !important; flex-direction:column; gap:8px; flex:1 1 auto; min-height:0}
  .smw-buehne-figur{flex:1 1 auto; min-height:140px; height:auto !important}
  .smw-schritt-inhalt{flex:0 0 auto; max-height:30vh; overflow:auto; gap:4px !important; justify-content:flex-start !important}
  .smw-atem-zeile{display:none !important}
  .smw-atem-ansage .sek{display:inline}
  .smw-atem-ansage{top:10px !important; bottom:auto !important; font-size:.9rem; padding:5px 14px}
  .smw-schritt-titel{font-size:.75rem}
  .smw-schritt-text{font-size:.98rem !important; line-height:1.45 !important}
  .smw-steuer{flex-wrap:nowrap !important; gap:6px; margin-top:6px}
  .smw-steuer .smw-knopf{min-width:40px !important; padding:6px 10px !important; min-height:38px !important}
  .smw-steuer .gross{min-width:96px !important}
}
/* Atemkreis und Text nebeneinander – kein leerer Platz mehr. */
@media (min-width:761px){
  .smw-schritt-inhalt{display:grid !important; grid-template-columns:auto 1fr; grid-template-areas:"atem titel" "atem text"; column-gap:22px; row-gap:6px; align-content:center; align-items:center}
  .smw-schritt-titel{grid-area:titel; align-self:end}
  .smw-atem-zeile{grid-area:atem; flex-direction:column; gap:6px !important}
  .smw-schritt-text{grid-area:text; align-self:start; min-height:0 !important}
  .smw-laut{font-size:1.8rem !important; text-align:center; min-width:0}
}
.smw-w .smw-schalt{display:inline-block !important; gap:0 !important}

/* 1.1.0: Übungskarten mittig; Sekunden im Etikett nur am Handy */
.smw-w .smw-karten{grid-template-columns:repeat(auto-fit,minmax(250px,340px)) !important; justify-content:center !important}
.smw-w .smw-atem-ansage .sek{display:none !important}
@media (max-width:760px){ .smw-w .smw-atem-ansage .sek{display:inline !important} }
.smw-w .smw-zurueck{display:inline-block !important; width:auto !important; border:0 !important; background:none !important; box-shadow:none !important; padding:4px 0 !important; align-self:flex-start}

/* 1.1.1: Leiste unten mit Musik und Historie, gleich groß */
.smw-fussleiste{position:absolute; left:0; right:0; bottom:12px; z-index:5; display:flex; justify-content:center; gap:10px; pointer-events:none}
.smw-fussleiste > *{pointer-events:auto}
.smw-w .smw-leisten-knopf{position:static !important; transform:none !important; margin:0 !important;
  display:inline-flex !important; align-items:center; height:34px !important; min-height:34px !important; padding:0 16px !important;
  border-radius:999px !important; font-size:.85rem !important; line-height:1 !important; letter-spacing:normal !important;
  border:1px solid #b79a48 !important; background:rgba(255,253,248,.92) !important; color:#33402f !important; box-shadow:none !important; cursor:pointer}
.smw-w .smw-leisten-knopf[aria-pressed="true"]{background:#4f6f52 !important; color:#f6f1e3 !important; border-color:#2f4434 !important}
.smw-w .smw-leisten-knopf:hover{background:#4f6f52 !important; color:#fff !important}
.smw-w.mit-musik .smw-w-buehne{padding-bottom:58px !important}
@media (max-width:760px){
  .smw-fussleiste{top:10px; bottom:auto; justify-content:flex-end; right:10px; left:10px; gap:6px}
  .smw-w .smw-leisten-knopf{height:30px !important; min-height:30px !important; padding:0 10px !important; font-size:.75rem !important}
  .smw-w.mit-musik .smw-w-buehne{padding-top:48px !important; padding-bottom:12px !important}
}
/* PC: Figur etwas schmaler, damit der Text neben dem Atemkreis Platz hat */
@media (min-width:761px){
  .smw-begleiter{grid-template-columns:minmax(200px,34%) 1fr !important}
  .smw-atemkreis{width:124px !important; height:124px !important}
  .smw-schritt-text{font-size:1.12rem !important}
}

/* Zurück: ein richtiger kleiner Knopf mit Mausover – das Theme macht
   Knöpfe sonst so breit wie den Kasten. */
.smw-w .smw-zurueck-knopf{align-self:flex-start !important; display:inline-flex !important; align-items:center; gap:4px;
  width:auto !important; max-width:max-content !important; height:34px !important; min-height:34px !important; margin:0 0 6px !important;
  padding:0 16px !important; border-radius:999px !important; border:1px solid #b79a48 !important;
  background:rgba(255,253,248,.92) !important; color:#33402f !important; box-shadow:none !important;
  font-size:.9rem !important; line-height:1 !important; text-decoration:none !important; cursor:pointer;
  transition:background .2s, color .2s, transform .2s}
.smw-w .smw-zurueck-knopf:hover,.smw-w .smw-zurueck-knopf:focus-visible{background:#4f6f52 !important; color:#fff !important; border-color:#2f4434 !important; transform:translateX(-2px)}
.smw-w .smw-zurueck-knopf::before,.smw-w .smw-zurueck-knopf::after{content:none !important}
/* Kein Knopf wird breiter als sein Inhalt – egal was das Theme vorgibt. */
.smw-w button{width:auto !important; max-width:100%; flex:0 0 auto}
.smw-w .smw-feld-knopf{width:100% !important}
.smw-w .smw-karte{width:auto !important}
.smw-w .smw-zeit{width:150px !important}
.smw-w .smw-steuer{flex-wrap:nowrap !important; justify-content:center !important}
.smw-w .smw-schalter{flex-wrap:nowrap !important}
.smw-w .smw-aktionen{justify-content:flex-start}
@media (max-width:760px){ .smw-w .smw-zeit{width:calc(50% - 8px) !important} .smw-w .smw-aktionen{justify-content:center} }

/* 1.1.1: Kopfzeile mit Zurück und Zum Anfang, schlichte Zeichen, feste Knopfbreiten */
.smw-w .smw-nav{display:flex !important; flex-wrap:nowrap; gap:8px; align-items:center; margin:0 0 6px}
.smw-w .smw-nav .smw-zurueck-knopf{margin:0 !important; align-self:center !important}
.smw-w .smw-ic{width:1em; height:1em; display:inline-block; vertical-align:-.12em; flex:0 0 auto}
.smw-w .smw-knopf .smw-ic{width:1.05em; height:1.05em}
.smw-w .smw-steuer{display:flex !important}
.smw-w .smw-steuer .smw-knopf,.smw-w .smw-leisten-knopf,.smw-w .smw-schalt{width:auto !important; flex:0 0 auto !important; gap:6px !important}
.smw-w .smw-fussleiste{display:flex !important}
@media (max-width:760px){
  .smw-w .smw-nav .smw-zurueck-knopf{height:30px !important; min-height:30px !important; padding:0 12px !important; font-size:.8rem !important}
}
/* Kein blauer Rand oder Schatten vom Theme auf unseren Knöpfen */
.smw-w button,.smw-w button:hover,.smw-w button:focus,.smw-w button:active{box-shadow:none !important; outline:none !important; letter-spacing:normal !important; text-shadow:none !important}
.smw-w .smw-schalt{border:1px solid #b79a48 !important}
.smw-w .smw-schalt[aria-pressed="true"]{border-color:#2f4434 !important}
.smw-w .smw-steuer .haupt{border:1px solid #2f4434 !important}
.smw-w button:focus-visible{outline:2px solid #b79a48 !important; outline-offset:2px}
/* 1.1.2: Musik und "Woher WYDA kommt" auch am Handy unten im Kasten */
@media (max-width:760px){
  .smw-w .smw-fussleiste{top:auto !important; bottom:8px !important; left:8px !important; right:8px !important; justify-content:center !important}
  .smw-w.mit-musik .smw-w-buehne{padding-top:12px !important; padding-bottom:46px !important}
}
.smw-panel .smw-seitentitel{margin:0 0 2px !important; font-size:clamp(1.6rem,3vw,2.3rem) !important; text-align:left !important}

@media (max-width:760px){ .smw-panel .smw-seitentitel{text-align:center !important; font-size:1.5rem !important} }
/* Atem-Ansage am Handy unten in der Figurbox, nicht über dem Kopf */
@media (max-width:760px){ .smw-w .smw-atem-ansage{top:auto !important; bottom:8px !important} }
/* 1.1.3 Handy: die Leiste liegt unter dem Inhalt statt darüber – nichts überlappt mehr */
@media (max-width:760px){
  .smw-w .smw-fussleiste{position:static !important; flex:0 0 auto; padding:6px 8px 10px !important; margin:0 !important}
  .smw-w.mit-musik .smw-w-buehne{padding-top:12px !important; padding-bottom:4px !important}
  .smw-w .smw-leisten-knopf{max-width:48% !important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .smw-panel .smw-seitentitel{font-size:1.35rem !important}
  .smw-panel .smw-unter{font-size:.85rem !important; line-height:1.4 !important}
  .smw-w .smw-feldliste{gap:6px !important}
  .smw-w .smw-aktionen{gap:6px !important}
}
/* Handy: die Figur bekommt nur den Platz, der übrig bleibt – Knöpfe und Text gehen immer vor */
@media (max-width:760px){
  .smw-w .smw-start2{grid-template-rows:minmax(80px,1fr) auto !important}
  .smw-w .smw-begleiter{grid-template-rows:minmax(120px,1fr) auto !important}
  .smw-w .smw-feld-knopf small{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block}
  .smw-w .smw-feld-knopf{padding-top:6px !important; padding-bottom:6px !important}
  .smw-w .smw-aktionen .smw-knopf{padding-top:7px !important; padding-bottom:7px !important}
}
.smw-w .smw-feld-knopf,.smw-w .smw-feldliste{box-sizing:border-box !important; max-width:100% !important; min-width:0 !important}
.smw-w .smw-panel{min-width:0 !important; overflow:hidden}
/* Die 3D-Leinwand füllt immer ihren Kasten – sie bestimmt nicht selbst die Breite */
.smw-w .smw-start-figur,.smw-w .smw-buehne-figur{position:relative !important; min-width:0 !important; overflow:hidden}
.smw-w .smw-start-figur > canvas,.smw-w .smw-buehne-figur > canvas{position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; display:block}
@media (max-width:760px){ .smw-w .smw-start2 .smw-start-figur{max-width:none !important; width:100% !important} }

/* 1.1.4: Die Druidenfaust – eigene Seite mit Nahaufnahme */
.smw-w .smw-zweier{display:flex; gap:8px; flex-wrap:nowrap; width:100%}
.smw-w .smw-zweier .smw-knopf{flex:1 1 0 !important; justify-content:center; text-align:center; white-space:nowrap}
.smw-w .smw-df-knopf{border-color:var(--w-gold) !important; background:#fbf3dc !important; font-weight:700}
.smw-w .smw-df-knopf:hover{background:var(--w-moos) !important; color:#fff !important}
.smw-df{display:flex; flex-direction:column; flex:1 1 auto; min-height:0}
.smw-df-raster{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:20px; flex:1 1 auto; min-height:0}
.smw-w .smw-df-figur{aspect-ratio:auto !important; height:100% !important; max-width:none !important; width:100% !important; min-height:0; margin:0 !important}
.smw-df-panel{display:flex; flex-direction:column; gap:8px; min-height:0; min-width:0}
.smw-df-panel h2{margin:0 !important; text-align:left !important; font-size:clamp(1.5rem,2.8vw,2.1rem) !important}
.smw-df-panel .smw-unter{margin:0 !important; text-align:left !important; max-width:none}
.smw-df-reiter{display:flex; gap:6px; flex-wrap:nowrap; border-bottom:1px solid var(--w-rand); padding-bottom:6px}
.smw-w .smw-df-reiter-knopf{flex:1 1 0 !important; width:auto !important; padding:7px 8px !important; border-radius:999px !important; border:1px solid var(--w-rand) !important;
  background:rgba(255,253,248,.85) !important; color:var(--w-tinte) !important; font-size:.88rem !important; line-height:1.15 !important; cursor:pointer; text-align:center; justify-content:center; display:inline-flex !important; align-items:center}
.smw-w .smw-df-reiter-knopf[aria-selected="true"]{background:var(--w-moos) !important; color:#f6f1e3 !important; border-color:var(--w-moos-tief) !important}
.smw-w .smw-df-reiter-knopf:hover{border-color:var(--w-gold) !important}
.smw-df-inhalt{flex:1 1 auto; min-height:0; overflow:auto}
.smw-w .smw-df-liste{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; counter-reset:df}
.smw-w .smw-df-liste li{position:relative; padding:7px 12px 7px 42px; border:1px solid var(--w-rand); border-radius:14px; background:rgba(255,253,248,.8); cursor:default; line-height:1.35; margin:0}
.smw-w ol.smw-df-liste li{counter-increment:df; cursor:pointer}
.smw-w ol.smw-df-liste li::before{content:counter(df); position:absolute; left:10px; top:8px; width:22px; height:22px; border-radius:50%; background:var(--w-gold-hell); color:var(--w-moos-tief); font-weight:700; font-size:.8rem; display:flex; align-items:center; justify-content:center}
.smw-w ul.smw-df-liste li::before{content:""; position:absolute; left:16px; top:14px; width:9px; height:9px; border-radius:50%; background:var(--w-gold)}
.smw-w .smw-df-liste li b{display:block; color:var(--w-moos-tief)}
.smw-w .smw-df-liste li span{display:block; font-size:.9rem; color:var(--w-tinte)}
.smw-w ol.smw-df-liste li.an{border-color:var(--w-gold); background:#fbf3dc; box-shadow:0 6px 16px -10px rgba(191,162,79,.9)}
.smw-w ol.smw-df-liste li.an::before{background:var(--w-moos); color:#fff}
.smw-w .smw-df-orte li span,.smw-w .smw-df-formen li span{font-size:.88rem}
.smw-df-unten{display:flex; justify-content:flex-start}
.smw-w .smw-df-hilfe{margin-top:6px; align-self:flex-start}
.smw-df-kasten .smw-df-liste{margin-bottom:10px}
@media (max-width:760px){
  .smw-df-raster{grid-template-columns:1fr; grid-template-rows:minmax(110px,1fr) auto; gap:8px}
  .smw-df-panel{gap:6px}
  .smw-df-panel h2{text-align:center !important; font-size:1.3rem !important}
  .smw-df-panel .smw-unter{display:none}
  .smw-w .smw-df-reiter-knopf{font-size:.74rem !important; padding:6px 4px !important}
  .smw-w .smw-df-liste{gap:4px}
  .smw-w .smw-df-liste li{padding:4px 8px 4px 36px; border-radius:11px}
  .smw-w .smw-df-liste li span{font-size:.78rem; line-height:1.3}
  .smw-w ol.smw-df-liste li::before{left:8px; top:6px; width:20px; height:20px}
  .smw-df-unten{justify-content:center}
  .smw-w .smw-zweier .smw-knopf{font-size:.85rem !important; padding-left:8px !important; padding-right:8px !important}
}