/* Silbermuschel Qigong – Die Acht Brokate. Überall Comic Sans MS.
   Grundgerüst wie die Chakren (von Gordon abgenommen): ein Kasten auf einen
   Bildschirm, Leiste unten mit „Mehr“, Musik-Knopf oben rechts, kräftige
   Abwehr gegen das Theme. Farben: Creme und Elfenbein, braune Tinte, dazu
   zartes Jade- und Salbeigrün – ruhig und harmonisch. */

.sqg-w, .sqg-box{
  --w-creme:#faf3e3; --w-perg:#fffcf4; --w-tinte:#4a3826; --w-tief:#3a2b1c; --w-leise:#76624b;
  --w-jade:#47806a; --w-jade-tief:#35614f; --w-salbei:#a9c9b3; --w-salbei-hell:#e2eee4; --w-salbei-zart:#eef5ef;
  --w-messing:#c8a96a; --w-rand:#e6d9bd;
}
.sqg-w, .sqg-w *, .sqg-box, .sqg-box *{
  font-family:"Comic Sans MS","Comic Neue","Comic Sans","Chalkboard SE","Segoe Print",cursive !important;
  box-sizing:border-box;
  letter-spacing:normal !important; hyphens:manual !important; -webkit-hyphens:manual !important;
  word-break:normal !important; overflow-wrap:break-word; text-transform:none !important;
}

/* --- Der Kasten ------------------------------------------------------ */
.sqg-w{
  position:relative; overflow:hidden; isolation:isolate;
  max-width:1000px; margin:12px auto !important; border-radius:22px;
  border:1px solid var(--w-rand); color:var(--w-tinte); text-align:left;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(169,201,179,.28) 0%, rgba(169,201,179,0) 65%),
    radial-gradient(70% 60% at 100% 100%, rgba(169,201,179,.2) 0%, rgba(169,201,179,0) 70%),
    radial-gradient(60% 50% at 0% 100%, rgba(200,169,106,.12) 0%, rgba(200,169,106,0) 70%),
    linear-gradient(180deg,#fdf8ec 0%,#faf3e3 60%,#f6eedb 100%);
  box-shadow:0 18px 40px -24px rgba(90,70,40,.55), inset 0 0 0 4px rgba(255,255,255,.55);
  height:calc(100vh - 24px); height:calc(100svh - 24px); max-height:860px; min-height:520px;
  display:flex; flex-direction:column;
}
.sqg-w-buehne{position:relative; z-index:1; flex:1 1 auto; min-height:0; display:flex; flex-direction:column; overflow:auto; padding:14px 22px 8px}
.sqg-szene{flex:1 1 auto; min-height:0; display:flex; flex-direction:column; animation:sqgRein .55s cubic-bezier(.2,.7,.2,1) both}
.sqg-szene.raus{animation:sqgRaus .24s ease both}
@keyframes sqgRein{from{opacity:0;transform:translateY(12px) scale(.99)}to{opacity:1;transform:none}}
@keyframes sqgRaus{to{opacity:0;transform:translateY(-8px)}}
@keyframes sqgAuf{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes sqgVonRechts{from{opacity:0; transform:translateX(36px)}to{opacity:1; transform:none}}
@keyframes sqgVonLinks{from{opacity:0; transform:translateX(-36px)}to{opacity:1; transform:none}}
@keyframes sqgSchweben{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes sqgDreh{to{transform:rotate(360deg)}}

.sqg-w h2,.sqg-w h3,.sqg-w h4{color:var(--w-tief); margin:0; line-height:1.22; font-weight:700; padding:0; border:0; background:none; text-align:left}
.sqg-w h2:focus,.sqg-w h3:focus{outline:none}
.sqg-w h2{font-size:clamp(1.3rem,2.4vw,1.75rem)}
.sqg-w h3{font-size:1.15rem}
.sqg-w p{margin:0; line-height:1.5}
.sqg-w ul,.sqg-w ol{margin:0; padding:0}
.sqg-w li{margin:0}
.sqg-w a{opacity:1 !important}
.sqg-w svg{overflow:visible; max-width:100%}
.sqg-w img{border:0 !important; box-shadow:none !important; margin:0 !important; max-width:100%}
.sqg-w .sqg-ic{width:1.1em; height:1.1em; display:inline-block; vertical-align:-.16em; flex:0 0 auto}
.sqg-unter{color:var(--w-leise); font-size:.93rem}
.sqg-klein-hinweis{font-size:.8rem !important; color:var(--w-leise); line-height:1.4 !important; margin-top:8px !important}
.sqg-w .sqg-feldname{font-weight:700; color:var(--w-tief); font-size:.92rem !important; margin:4px 0 3px !important}

/* --- Knöpfe: Abwehr gegen das Theme ------------------------------------ */
.sqg-w button, .sqg-w select, .sqg-w input{margin:0 !important; box-shadow:none !important; text-shadow:none !important; letter-spacing:normal !important; max-width:100%}
.sqg-w button{cursor:pointer; width:auto !important; flex:0 0 auto; gap:0 !important; font-weight:400; min-height:0; line-height:1.2; border-radius:0}
.sqg-w button:disabled{cursor:default; opacity:.4}
.sqg-w button:focus{outline:none !important}
.sqg-w button:focus-visible{outline:2px solid var(--w-jade) !important; outline-offset:2px}
.sqg-w button::before,.sqg-w button::after,.sqg-box a::before,.sqg-box a::after,.sqg-w a::before,.sqg-w a::after{content:none !important; display:none !important}

.sqg-w .sqg-knopf{
  display:inline-flex !important; align-items:center; justify-content:center; gap:7px !important;
  font-size:.95rem !important; padding:7px 16px !important; min-height:38px !important; line-height:1.15 !important; text-decoration:none !important; white-space:nowrap;
  border:1px solid var(--w-messing) !important; border-radius:999px !important;
  background:linear-gradient(180deg,#fffaf0 0%,#f2e7cd 100%) !important; color:var(--w-tief) !important;
  transition:background .25s, color .25s, transform .2s}
.sqg-w .sqg-knopf:not(:disabled):hover,.sqg-w .sqg-knopf:focus-visible{background:var(--w-jade) !important; color:#fff !important; border-color:var(--w-jade-tief) !important; transform:translateY(-1px)}
.sqg-w .sqg-knopf.haupt{background:var(--w-jade) !important; color:#fbfff9 !important; border-color:var(--w-jade-tief) !important}
.sqg-w .sqg-knopf.haupt:not(:disabled):hover{background:var(--w-jade-tief) !important}
.sqg-w .sqg-klein{padding:5px 13px !important; min-height:34px !important; font-size:.88rem !important}
.sqg-w .sqg-gross{font-size:1.05rem !important; padding:10px 22px !important; min-height:46px !important}
.sqg-w .sqg-pfeil-knopf{width:44px !important; padding:0 !important}
.sqg-w .sqg-link{display:inline-flex !important; align-items:center; gap:6px !important; background:none !important; border:0 !important;
  color:var(--w-jade) !important; text-decoration:underline !important; text-underline-offset:3px; padding:4px 2px !important; font-size:.9rem !important}
.sqg-w .sqg-link:hover{color:var(--w-jade-tief) !important}
.sqg-w .sqg-mini-knopf{display:inline-flex !important; align-items:center; justify-content:center; width:34px !important; height:34px !important; padding:0 !important;
  border-radius:50% !important; border:1px solid var(--w-messing) !important; background:var(--w-perg) !important; color:var(--w-tief) !important; font-size:1.05rem !important}
.sqg-w .sqg-mini-knopf:hover{background:var(--w-jade) !important; color:#fff !important}
.sqg-knopfzeile{display:flex !important; gap:8px; align-items:center; flex-wrap:wrap; flex:0 0 auto; margin-top:8px}
.sqg-knopfzeile.sqg-mitte{justify-content:center}
.sqg-zaehler{font-size:.85rem; color:var(--w-leise); min-width:54px; text-align:center}

.sqg-w .sqg-nav{display:flex !important; gap:10px; align-items:center; justify-content:space-between; margin:0 0 8px; flex:0 0 auto}
.sqg-w .sqg-zurueck-knopf{display:inline-flex !important; align-items:center; gap:5px !important; height:34px !important; padding:0 14px 0 10px !important; white-space:nowrap;
  border-radius:999px !important; border:1px solid var(--w-messing) !important; background:rgba(255,252,244,.92) !important; color:var(--w-tief) !important; font-size:.88rem !important; transition:background .2s,color .2s,transform .2s}
.sqg-w .sqg-zurueck-knopf:hover{background:var(--w-jade) !important; color:#fff !important; transform:translateX(-2px)}
.sqg-blaettern{display:flex; align-items:center; gap:6px}

.sqg-kopf{display:flex; gap:12px; align-items:center; flex:0 0 auto; margin:0 0 10px}
.sqg-kopf-ic{flex:0 0 44px; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.35rem;
  color:var(--w-jade-tief); background:radial-gradient(circle at 35% 30%,#fff,var(--w-salbei-hell) 80%); border:1px solid #cfe0d3}
.sqg-kopf-text{min-width:0}
.sqg-kopf .sqg-unter{font-size:.88rem; line-height:1.38}

.sqg-sek{flex:1 1 auto; min-height:0; display:flex; flex-direction:column}
.sqg-rumpf{flex:1 1 auto; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:20px; align-items:stretch}
.sqg-rumpf > *{min-height:0; min-width:0}

/* --- Fußleiste (wie Chakren 1.0.2) -------------------------------------- */
.sqg-w .sqg-fussleiste{position:relative; z-index:5; flex:0 0 auto; display:flex !important; justify-content:center; gap:2px; flex-wrap:nowrap;
  padding:7px 8px 9px; border-top:1px solid rgba(230,217,189,.95); background:rgba(255,252,244,.65); margin:0}
.sqg-w .sqg-leisten-knopf{display:inline-flex !important; align-items:center; justify-content:center; gap:5px !important;
  height:34px !important; padding:0 10px !important; border-radius:999px !important; font-size:.8rem !important; white-space:nowrap;
  border:1px solid transparent !important; background:transparent !important; color:#5e4a33 !important; transition:background .2s,color .2s,border-color .2s; min-width:0}
.sqg-w .sqg-leisten-knopf span{overflow:hidden; text-overflow:ellipsis; max-width:130px}
.sqg-w .sqg-leisten-knopf:hover{background:var(--w-perg) !important; border-color:var(--w-rand) !important; color:var(--w-jade-tief) !important}
.sqg-w .sqg-leisten-knopf[aria-current="page"]{background:var(--w-jade) !important; color:#fbfff9 !important; border-color:var(--w-jade-tief) !important}
.sqg-w .sqg-leisten-knopf.nur-klein{display:none !important}
.sqg-w .sqg-fussleiste{justify-content:safe center}
.sqg-w .sqg-leisten-knopf{flex-shrink:0}
.sqg-w .sqg-fussleiste.eng .sqg-leisten-knopf:not([aria-current="page"]) span{display:none}
.sqg-w .sqg-fussleiste.eng .sqg-leisten-knopf{padding:0 9px !important; font-size:.95rem !important}
.sqg-w .sqg-fussleiste.enger .sqg-leisten-knopf span{display:none}
.sqg-w .sqg-fussleiste.mit-mehr .sqg-leisten-knopf.nur-klein{display:inline-flex !important}
.sqg-w .sqg-leisten-knopf.ausgelagert{display:none !important}

/* --- Fenster ------------------------------------------------------------ */
.sqg-overlay{position:absolute; inset:0; z-index:20; background:rgba(60,48,30,.3); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:14px; animation:sqgRein .3s both}
.sqg-overlay-kasten{position:relative; max-width:700px; width:100%; max-height:100%; overflow:auto; background:var(--w-perg); border-radius:18px;
  border:1px solid var(--w-rand); padding:14px 20px 18px; box-shadow:0 20px 40px -20px rgba(0,0,0,.5); color:var(--w-tinte); scrollbar-color:var(--w-salbei) #f3ead2}
.sqg-overlay-kasten.klein{max-width:520px}
.sqg-overlay-kasten h3{margin:2px 40px 10px 0 !important}
.sqg-overlay-kasten p{margin:0 0 8px !important; font-size:.95rem}
.sqg-w .sqg-overlay-zu{position:absolute; top:10px; right:10px; z-index:2; display:flex !important; align-items:center; justify-content:center;
  width:38px !important; height:34px !important; padding:0 !important; border-radius:999px !important; border:1px solid var(--w-messing) !important; background:#fff !important;
  color:var(--w-tief) !important; font-size:1.35rem !important; line-height:1 !important}
.sqg-w .sqg-overlay-zu:hover{background:var(--w-jade) !important; color:#fff !important}
.sqg-quellen{list-style:disc !important; margin:0 0 10px 20px !important}
.sqg-quellen li{margin:0 0 4px !important; font-size:.9rem}
.sqg-quellen a{color:var(--w-jade) !important}
.sqg-mehr-raster{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
.sqg-w .sqg-mehr-kachel span{min-width:0; white-space:normal; line-height:1.2}
.sqg-w .sqg-mehr-kachel{display:flex !important; align-items:center; gap:10px !important; width:100% !important; padding:10px 12px !important; border-radius:14px !important;
  border:1px solid var(--w-rand) !important; background:#fffaf0 !important; color:var(--w-tinte) !important; font-size:.92rem !important; text-align:left}
.sqg-w .sqg-mehr-kachel .sqg-ic{font-size:1.3rem; color:var(--w-jade)}
.sqg-w .sqg-mehr-kachel.an{background:var(--w-jade) !important; color:#fff !important}
.sqg-w .sqg-mehr-kachel.an .sqg-ic{color:#fff}

/* --- Chips, Reiter ------------------------------------------------------ */
.sqg-chips{display:flex !important; flex-wrap:wrap; gap:6px; align-items:center}
.sqg-w .sqg-chip{display:inline-flex !important; align-items:center; gap:6px !important; padding:5px 13px !important; border-radius:999px !important; font-size:.88rem !important;
  border:1px solid var(--w-rand) !important; background:rgba(255,252,244,.95) !important; color:var(--w-tinte) !important; transition:background .2s,border-color .2s,transform .2s}
.sqg-w .sqg-chip:hover{border-color:var(--w-salbei) !important; transform:translateY(-1px)}
.sqg-w .sqg-chip[aria-pressed="true"]{background:var(--w-jade) !important; color:#fff !important; border-color:var(--w-jade-tief) !important}
.sqg-reiter{display:flex !important; gap:3px; border-bottom:2px solid var(--w-rand); flex:0 0 auto; margin:6px 0 0; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none}
.sqg-reiter::-webkit-scrollbar{display:none}
.sqg-w .sqg-reiter-knopf{display:inline-flex !important; align-items:center; padding:7px 11px !important; font-size:.88rem !important; white-space:nowrap;
  border:0 !important; border-bottom:3px solid transparent !important; margin-bottom:-2px !important; background:transparent !important; color:var(--w-leise) !important; border-radius:8px 8px 0 0 !important}
.sqg-w .sqg-reiter-knopf:hover{color:var(--w-tief) !important; background:rgba(255,252,244,.7) !important}
.sqg-w .sqg-reiter-knopf[aria-selected="true"]{color:var(--w-tief) !important; border-bottom-color:var(--w-jade) !important; font-weight:700; background:rgba(255,252,244,.9) !important}
.sqg-tafel{flex:1 1 auto; min-height:0; overflow:auto; padding:10px 6px 4px 0; scrollbar-color:var(--w-salbei) #f3ead2}
.sqg-tafel.neu > *{animation:sqgAuf .4s both}

/* --- Hinweis – sanft, aber gut sichtbar ---------------------------------- */
.sqg-w .sqg-hinweis{display:flex !important; gap:8px; align-items:flex-start; margin:6px 0 0 !important; padding:7px 11px; border-radius:12px;
  background:rgba(255,252,244,.9); border:1px solid #d3e3d6; color:#4f4433; font-size:.82rem !important; line-height:1.4 !important; flex:0 0 auto}
.sqg-w .sqg-hinweis .sqg-ic{flex:0 0 auto; color:var(--w-jade); margin-top:1px; width:1.15em; height:1.15em}
.sqg-w .sqg-hinweis.kurz{font-size:.76rem !important; padding:5px 9px}

/* --- Bühne mit der Figur ------------------------------------------------- */
.sqg-fbuehne{position:relative; min-height:0; height:100%; border-radius:20px; overflow:hidden; isolation:isolate;
  background:radial-gradient(80% 60% at 50% 45%, #fffdf6 0%, #fbf4e4 70%, #f5ecd6 100%); border:1px solid var(--w-rand);
  box-shadow:inset 0 0 30px rgba(169,201,179,.25)}
.sqg-fbuehne::after{content:""; position:absolute; left:12%; right:12%; bottom:5%; height:7%; border-radius:50%; background:radial-gradient(closest-side,rgba(169,201,179,.45),rgba(169,201,179,0)); z-index:0; pointer-events:none}
.sqg-fig{position:absolute; inset:8px; z-index:1}
.sqg-w .sqg-fig > svg{position:absolute; inset:0; width:100% !important; height:100% !important; max-width:none !important; display:block}
.sqg-fig-fehlt{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:20px; color:var(--w-leise)}
.sqg-fig-text{position:absolute; z-index:2; left:10px; right:10px; bottom:8px; text-align:center; font-size:.88rem !important; color:var(--w-tief);
  background:rgba(255,252,244,.88); border:1px solid #d3e3d6; border-radius:999px; padding:4px 12px; min-height:1.6em; line-height:1.35 !important}
.sqg-fbuehne.wechselt .sqg-fig{opacity:.55; transition:opacity .6s}

/* ============ 1. START ============ */
.sqg-start{display:grid !important; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:20px}
.sqg-start-bild{height:auto}
.sqg-start-panel{display:flex; flex-direction:column; justify-content:center; gap:10px; min-height:0}
.sqg-w .sqg-seitentitel{font-size:clamp(1.7rem,3.2vw,2.4rem) !important}
.sqg-einleitung{font-size:.98rem !important}
.sqg-brauchst .sqg-feldname{margin:0 0 4px !important}
.sqg-brauchst ul{list-style:none !important; display:flex; gap:6px; flex-wrap:wrap}
.sqg-brauchst li{display:flex; align-items:center; gap:6px; padding:4px 11px 4px 8px; border-radius:999px; background:var(--w-salbei-zart); border:1px solid #d3e3d6; font-size:.86rem; color:var(--w-tief); list-style:none !important}
.sqg-brauchst li .sqg-ic{color:var(--w-jade); width:1.2em; height:1.2em}
.sqg-w .sqg-heute{display:flex !important; align-items:center; gap:10px !important; width:100% !important; text-align:left;
  padding:8px 10px !important; border-radius:16px !important; border:1px solid #d3e3d6 !important; background:linear-gradient(90deg,var(--w-salbei-hell),var(--w-perg)) !important;
  color:var(--w-tinte) !important; font-size:.88rem !important; line-height:1.3 !important; transition:transform .25s,border-color .25s; animation:sqgAuf .6s .1s both}
.sqg-w .sqg-heute:hover{transform:translateY(-2px); border-color:var(--w-salbei) !important}
.sqg-w .sqg-heute small{display:block; font-size:.72rem; color:var(--w-jade-tief); font-weight:700}
.sqg-heute-text{display:block; min-width:0}
.sqg-heute-ic{flex:0 0 36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.15rem; background:var(--w-perg); border:1px solid #d3e3d6; color:var(--w-jade)}
.sqg-kacheln{display:grid; grid-template-columns:repeat(2,1fr); gap:7px}
.sqg-w .sqg-kachel,.sqg-w .sqg-g-knopf{display:flex !important; align-items:center; gap:9px !important; width:100% !important; text-align:left;
  padding:7px 9px !important; border-radius:14px !important; border:1px solid var(--w-rand) !important; background:rgba(255,252,244,.92) !important;
  color:var(--w-tinte) !important; line-height:1.22 !important; transition:transform .25s,border-color .25s; animation:sqgAuf .5s both}
.sqg-w .sqg-kachel:hover,.sqg-w .sqg-g-knopf:hover{transform:translateY(-2px); border-color:var(--w-salbei) !important; background:var(--w-perg) !important}
.sqg-kachel-ic{flex:0 0 34px; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.1rem;
  background:radial-gradient(circle at 35% 30%,#fff,var(--w-salbei-hell) 80%); border:1px solid #cfe0d3; color:var(--w-jade-tief)}
.sqg-kachel-text{display:block; min-width:0}
.sqg-kachel-text b{display:block; font-size:.93rem; color:var(--w-tief)}
.sqg-kachel-text small{display:block; font-size:.76rem; color:var(--w-leise)}

/* ============ 2. DIE ACHT BROKATE ============ */
.sqg-w .sqg-nr{flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; font-style:normal; font-weight:700;
  background:radial-gradient(circle at 35% 30%,#fff,var(--w-salbei-hell) 75%); border:1px solid var(--w-salbei); color:var(--w-jade-tief); font-size:1rem}
.sqg-b-liste{flex:1 1 auto; min-height:0; overflow:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:1fr; gap:8px; padding:2px}
.sqg-w .sqg-b-karte{display:flex !important; align-items:center; gap:11px !important; width:100% !important; text-align:left; padding:8px 12px !important;
  border-radius:16px !important; border:1px solid var(--w-rand) !important; background:rgba(255,252,244,.92) !important; color:var(--w-tinte) !important;
  line-height:1.25 !important; transition:transform .25s,border-color .25s,background .25s; animation:sqgAuf .5s both; min-height:0}
.sqg-w .sqg-b-karte:hover{transform:translateY(-2px); border-color:var(--w-salbei) !important; background:linear-gradient(90deg,var(--w-salbei-zart),var(--w-perg)) !important}
.sqg-b-text{flex:1 1 auto; min-width:0; display:block}
.sqg-b-text b{display:block; font-size:1.05rem; color:var(--w-tief)}
.sqg-b-text small{display:block; font-size:.86rem; color:var(--w-leise); margin-top:3px; line-height:1.35}
.sqg-w .sqg-b-karte > .sqg-ic{color:var(--w-salbei); width:1.2em; height:1.2em}

.sqg-detail .sqg-rumpf{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
.sqg-d-links{display:flex; flex-direction:column; gap:8px; min-height:0}
.sqg-d-links .sqg-fbuehne{flex:1 1 auto}
.sqg-d-steuer{display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; flex:0 0 auto}
.sqg-tempo .sqg-chip{padding:4px 11px !important}
.sqg-detail.angehalten .sqg-fig-text{opacity:.6}
.sqg-d-panel{display:flex; flex-direction:column; min-height:0}
.sqg-d-kopf{display:flex; gap:12px; align-items:flex-start; flex:0 0 auto}
.sqg-d-kopf .sqg-nr{width:42px; height:42px; font-size:1.2rem; margin-top:2px}
.sqg-d-kopf h2{font-size:clamp(1.2rem,2.2vw,1.55rem) !important}
.sqg-d-kopf .sqg-unter{font-size:.9rem; margin-top:3px !important}
.sqg-zusatz{font-size:.86rem !important; color:var(--w-jade-tief); font-style:italic}
.sqg-schritte{list-style:none !important; counter-reset:sqgs; display:flex; flex-direction:column; gap:7px}
.sqg-schritte li{counter-increment:sqgs; display:flex; gap:10px; align-items:flex-start; font-size:.95rem; line-height:1.45; list-style:none !important}
.sqg-schritte li::before{content:counter(sqgs) !important; display:flex !important; flex:0 0 24px; height:24px; align-items:center; justify-content:center; border-radius:50%;
  background:var(--w-salbei-hell); color:var(--w-jade-tief); font-weight:700; font-size:.82rem; margin-top:1px; border:1px solid #cfe0d3}
.sqg-feld{display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-radius:14px; background:linear-gradient(160deg,var(--w-salbei-zart),var(--w-perg) 70%); border:1px solid #d3e3d6; margin:0 0 8px}
.sqg-feld p{font-size:.96rem !important; line-height:1.5 !important}
.sqg-feld-ic{flex:0 0 32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.05rem; background:var(--w-perg); border:1px solid #cfe0d3; color:var(--w-jade)}
.sqg-feld.vorsicht{background:linear-gradient(160deg,#fbf1dc,var(--w-perg) 70%); border-color:#ead7ae}
.sqg-feld.vorsicht .sqg-feld-ic{color:#9a7130; border-color:#ead7ae}
.sqg-d-panel .sqg-knopfzeile{margin-top:6px}

/* ============ 3. ÜBEN ============ */
.sqg-u-links{display:flex; min-height:0}
.sqg-u-links .sqg-fbuehne{flex:1 1 auto}
.sqg-u-panel{display:flex; flex-direction:column; justify-content:center; gap:4px; min-height:0; overflow:auto}
.sqg-schalter{display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; margin:8px 0 0}
.sqg-w .sqg-schalt{display:inline-flex !important; align-items:center; gap:6px !important; padding:5px 12px !important; border-radius:999px !important; font-size:.84rem !important;
  border:1px dashed var(--w-salbei) !important; background:rgba(255,252,244,.9) !important; color:var(--w-leise) !important}
.sqg-w .sqg-schalt[aria-pressed="true"]{border-style:solid !important; background:var(--w-salbei-hell) !important; color:var(--w-jade-tief) !important; border-color:var(--w-salbei) !important}
.sqg-w .sqg-schalt[aria-pressed="false"] .sqg-ic{opacity:.5}
.sqg-schalter.klein{justify-content:center; margin-top:4px}
.sqg-schalter.klein .sqg-schalt{font-size:.78rem !important; padding:3px 10px !important}
.sqg-u-zwei{display:grid; grid-template-columns:auto auto; gap:0 22px; justify-content:start}
.sqg-dauer{display:flex; align-items:center; gap:6px; font-size:.88rem !important; color:var(--w-leise)}
.sqg-dauer .sqg-ic{color:var(--w-jade)}
.sqg-u-ablauf{display:flex; flex-direction:column; align-items:center; gap:6px; min-height:0; text-align:center}
.sqg-u-titel{flex:0 0 auto}
.sqg-u-titel h2{text-align:center !important; font-size:clamp(1.15rem,2.2vw,1.5rem) !important}
.sqg-u-als{font-size:.82rem !important; color:var(--w-jade-tief); text-align:center}
.sqg-u-titel .sqg-zusatz{text-align:center}
.sqg-u-zeile{display:flex; justify-content:space-between; gap:10px; width:100%; font-size:.82rem; color:var(--w-leise); flex:0 0 auto}
.sqg-fortschritt-balken{flex:0 0 10px; width:100%; height:10px; border-radius:6px; background:#efe5cc; overflow:hidden; display:block}
.sqg-fortschritt-balken i{display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,var(--w-salbei),var(--w-jade)); transition:width .5s linear}
.sqg-u-mitte{flex:1 1 auto; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; width:100%}
.sqg-atem{position:relative; flex:0 0 auto; width:176px; height:176px; display:flex; align-items:center; justify-content:center}
.sqg-atem .ring{position:absolute; inset:0; border-radius:50%; border:2px dashed var(--w-salbei); opacity:.7; animation:sqgDreh 40s linear infinite}
.sqg-atem .kugel{position:absolute; inset:8px; border-radius:50%; background:radial-gradient(circle at 36% 30%,#fbfffb 0%,#d5e9da 24%,#93c1a3 66%,#6a9f82 100%);
  box-shadow:0 0 34px rgba(106,159,130,.6), inset 0 0 18px rgba(255,255,255,.55); transform:scale(.6); will-change:transform}
.sqg-atem .wort{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; color:var(--w-tief); text-shadow:0 0 8px rgba(255,255,255,.95)}
.sqg-atem .wort em{font-style:normal; font-weight:700; font-size:1.05rem}
.sqg-atem .wort span{font-size:.88rem; opacity:.8; min-height:1.1em}
.sqg-w .sqg-u-text{flex:0 1 auto; min-height:0; overflow:auto; font-size:1.12rem !important; line-height:1.5 !important; color:var(--w-tinte); max-width:520px; padding:0 4px}
.sqg-u-lauf.pausiert .sqg-atem .kugel{opacity:.55}
.sqg-steuer{display:flex; gap:6px; flex-wrap:wrap; justify-content:center; flex:0 0 auto}
.sqg-ende{display:grid !important; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:20px; align-items:stretch}
.sqg-ende-text{display:flex; flex-direction:column; justify-content:center; gap:10px}
.sqg-ende-ic{width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.7rem; color:var(--w-jade-tief);
  background:radial-gradient(circle at 35% 30%,#fff,var(--w-salbei-hell) 80%); border:1px solid #cfe0d3; animation:sqgSchweben 5s ease-in-out infinite}

/* ============ 4. GRUNDLAGEN ============ */
.sqg-grundlagen .sqg-rumpf{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.sqg-g-liste{display:flex; flex-direction:column; gap:8px; justify-content:center; min-height:0; overflow:auto; padding:2px}
.sqg-w .sqg-g-knopf{padding:12px 14px !important}
.sqg-g-knopf .sqg-kachel-text b{font-size:1rem}
.sqg-g-knopf .sqg-kachel-text small{font-size:.82rem}
.sqg-w .sqg-g-knopf[aria-pressed="true"]{background:linear-gradient(90deg,var(--w-salbei-hell),var(--w-perg)) !important; border-color:var(--w-jade) !important}
.sqg-w .sqg-g-knopf[aria-pressed="true"] .sqg-kachel-ic{background:var(--w-jade); color:#fff; border-color:var(--w-jade-tief)}
.sqg-g-karte{min-height:0; overflow:auto; border-radius:20px; padding:16px 20px; background:rgba(255,252,244,.92); border:1px solid var(--w-rand); scrollbar-color:var(--w-salbei) #f3ead2}
.sqg-g-karte.neu > *{animation:sqgAuf .4s both}
.sqg-g-karte h3{font-size:1.3rem !important}
.sqg-g-karte > .sqg-unter{margin:2px 0 10px !important}
.sqg-g-punkte{list-style:none !important; display:flex; flex-direction:column; gap:8px; margin:0 0 10px !important}
.sqg-g-punkte li{position:relative; padding-left:20px; font-size:.96rem; line-height:1.5; list-style:none !important}
.sqg-g-punkte li::before{content:"" !important; display:block !important; position:absolute; left:3px; top:.55em; width:8px; height:8px; border-radius:50%; background:var(--w-salbei); border:1px solid var(--w-jade)}

/* ============ 5. GESCHICHTE ============ */
.sqg-zeitleiste{position:relative; display:flex !important; flex:0 0 auto; overflow-x:auto; scrollbar-width:none; margin:0 0 10px; padding:2px 0}
.sqg-zeitleiste::-webkit-scrollbar{display:none}
.sqg-zeitleiste::before{content:""; position:absolute; left:18px; right:18px; top:12px; height:2px; background:var(--w-rand)}
.sqg-w .sqg-zeitpunkt{position:relative; flex:1 0 84px !important; display:flex !important; flex-direction:column; align-items:center; gap:4px !important; padding:4px 2px !important;
  border:0 !important; background:transparent !important; color:var(--w-leise) !important; font-size:.72rem !important; line-height:1.15 !important; text-align:center}
.sqg-zeitpunkt i{width:14px; height:14px; border-radius:50%; background:var(--w-perg); border:2px solid var(--w-salbei); transition:transform .3s, background .3s}
.sqg-zeitpunkt.vorbei i{background:var(--w-salbei-hell)}
.sqg-zeitpunkt.an i{background:var(--w-jade); border-color:var(--w-jade); transform:scale(1.35)}
.sqg-w .sqg-zeitpunkt.an{color:var(--w-tief) !important; font-weight:700}
.sqg-hist-buehne{flex:1 1 auto; min-height:0; position:relative; overflow:hidden}
.sqg-hist-karte{position:absolute; inset:0; display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:22px; align-items:center;
  background:rgba(255,252,244,.9); border:1px solid var(--w-rand); border-radius:20px; padding:16px 20px}
.sqg-hist-karte.von-rechts{animation:sqgVonRechts .5s cubic-bezier(.2,.8,.2,1) both}
.sqg-hist-karte.von-links{animation:sqgVonLinks .5s cubic-bezier(.2,.8,.2,1) both}
.sqg-hist-bild{margin:0; height:100%; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center}
.sqg-hist-bild img{display:block; max-width:100%; max-height:100%; min-height:0; object-fit:contain; border-radius:14px; background:#fbf5e6; border:1px solid var(--w-rand) !important}
.sqg-hist-bild.ist-foto img{object-fit:cover}
.sqg-hist-bild figcaption{font-size:.72rem; color:var(--w-leise); margin-top:4px; text-align:center; font-style:italic}
.sqg-hist-text{min-height:0; max-height:100%; overflow:auto; padding-right:4px}
.sqg-hist-jahr{display:inline-block; font-size:.8rem; padding:2px 12px; border-radius:999px; background:var(--w-salbei-hell); color:var(--w-jade-tief); font-weight:700; margin:0 0 6px}
.sqg-hist-text h3{font-size:1.3rem !important; margin:0 0 8px !important}
.sqg-hist-text p{font-size:.96rem !important; line-height:1.6 !important}
.sqg-w .sqg-quellen-knopf{margin-left:14px !important; font-size:.82rem !important}

/* ============ 6. IMPULS ============ */
.sqg-impuls{align-items:center; justify-content:center; gap:10px}
.sqg-impuls-karte{position:relative; max-width:640px; width:100%; text-align:center; padding:26px 30px 22px; border-radius:26px; overflow:hidden;
  background:radial-gradient(90% 70% at 50% 0%,var(--w-salbei-hell),var(--w-perg) 75%); border:1px solid var(--w-salbei); box-shadow:0 16px 34px -24px rgba(90,70,40,.6); animation:sqgAuf .7s both}
.sqg-impuls-zeichen{width:80px; height:80px; margin:0 auto 10px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:2.4rem;
  background:radial-gradient(circle at 35% 30%,#fff,var(--w-salbei-hell) 60%,var(--w-salbei) 130%); color:var(--w-jade-tief); border:2px solid var(--w-salbei); animation:sqgSchweben 5s ease-in-out infinite}
.sqg-impuls-datum{font-size:.85rem !important; color:var(--w-leise); margin:0 0 2px !important}
.sqg-w .sqg-impuls-titel{text-align:center !important; font-size:1.1rem !important; color:var(--w-jade-tief) !important; margin:0 0 10px !important}
.sqg-impuls-text{margin:0 0 14px !important; padding:0 !important; border:0 !important; background:none !important; font-size:clamp(1.15rem,2.4vw,1.5rem) !important; line-height:1.5 !important;
  color:var(--w-tief); font-style:normal !important; quotes:none}
.sqg-impuls-text::before,.sqg-impuls-text::after{content:none !important}
.sqg-impuls-b{font-size:.88rem !important; color:var(--w-leise)}

/* ============ Box ============ */
.sqg-box{display:flex; gap:20px; align-items:center; max-width:760px; margin:20px auto; padding:18px 22px; border-radius:22px;
  border:1px solid var(--w-rand); background:linear-gradient(135deg,#fdf8ec,#faf3e3 55%,#eef5ef); box-shadow:0 12px 28px -20px rgba(90,70,40,.6); color:var(--w-tinte); text-align:left}
.sqg-box-bild{flex:0 0 130px; width:130px; height:130px; display:block; border:0 !important; box-shadow:none !important; border-radius:0 !important; margin:0 !important}
.sqg-box-text{min-width:0}
.sqg-box h3{margin:0 0 4px !important; padding:0 !important; color:var(--w-tief); font-size:1.25rem; line-height:1.25; border:0; background:none; text-transform:none !important; letter-spacing:normal !important}
.sqg-box p{margin:0 0 12px !important; line-height:1.5; font-size:1rem; color:var(--w-tinte)}
.sqg-box a.sqg-box-knopf,.sqg-box a.sqg-box-knopf:visited{display:inline-flex !important; align-items:center; padding:9px 22px !important; border-radius:999px !important;
  background:var(--w-jade) !important; color:#fbfff9 !important; border:1px solid var(--w-jade-tief) !important; text-decoration:none !important; opacity:1 !important; font-size:1rem; box-shadow:none !important; transition:background .2s}
.sqg-box a.sqg-box-knopf:hover,.sqg-box a.sqg-box-knopf:focus{background:var(--w-jade-tief) !important; color:#fff !important}
@media (max-width:560px){ .sqg-box{flex-direction:column; text-align:center} .sqg-box-bild{width:110px; height:110px; flex-basis:auto} }

/* --- „Ton erlauben“ – genau wie in den Chakren --- */
.sqg-tonfrage{position:fixed !important; inset:0 !important; z-index:2147483000 !important; display:flex !important; align-items:center; justify-content:center;
  padding:16px; background:rgba(10,20,14,.35); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); opacity:0; transition:opacity .4s ease; margin:0 !important}
.sqg-tonfrage.offen{opacity:1}
.sqg-tonfrage-kasten{max-width:460px; width:100%; box-sizing:border-box; padding:22px 26px 24px; border-radius:16px; text-align:center;
  background:#1d3326 !important; color:#e9f1e6 !important; box-shadow:0 18px 50px -12px rgba(0,0,0,.55); border:1px solid rgba(160,200,170,.22);
  font-family:"Comic Sans MS","Comic Neue","Comic Sans","Chalkboard SE",cursive !important; transform:translateY(8px) scale(.98); transition:transform .4s ease}
.sqg-tonfrage.offen .sqg-tonfrage-kasten{transform:none}
.sqg-tonfrage-kasten h3{margin:0 0 8px !important; padding:0 !important; border:0 !important; background:none !important; color:#f3f8f1 !important;
  font:400 1.25rem/1.3 "Comic Sans MS","Comic Neue",cursive !important; text-align:center !important; text-transform:none !important; letter-spacing:0 !important}
.sqg-tonfrage-kasten p{margin:0 0 16px !important; color:#d6e3d3 !important; font:400 .95rem/1.5 "Comic Sans MS","Comic Neue",cursive !important; text-align:center !important}
.sqg-tonfrage-reihe{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.sqg-tonfrage-reihe button{appearance:none; cursor:pointer; min-width:120px; padding:9px 20px !important; border-radius:999px !important; margin:0 !important;
  font:400 1rem/1.2 "Comic Sans MS","Comic Neue",cursive !important; letter-spacing:.04em; box-shadow:none !important; text-transform:none !important;
  border:2px solid #e9f1e6 !important; background:transparent !important; color:#f3f8f1 !important; width:auto !important}
.sqg-tonfrage-reihe .sqg-tonfrage-ja{background:#6f9c80 !important; border-color:#cfe6d6 !important}
.sqg-tonfrage-reihe button:hover,.sqg-tonfrage-reihe button:focus-visible{background:#86b496 !important; outline:none}
@media (prefers-reduced-motion:reduce){.sqg-tonfrage,.sqg-tonfrage-kasten{transition:none}}

/* --- Musik-Knopf oben rechts im Kasten --- */
.sqg-w.mit-musik .sqg-w-buehne{padding-right:58px}
.sqg-w .sqg-musik-oben{position:absolute !important; top:12px; right:12px; z-index:6; width:38px !important; height:38px !important; min-width:0 !important;
  padding:0 !important; margin:0 !important; border-radius:50% !important; display:inline-flex !important; align-items:center; justify-content:center;
  border:1px solid var(--w-messing) !important; background:rgba(255,252,244,.95) !important; color:var(--w-tief) !important; box-shadow:0 4px 12px -6px rgba(90,70,40,.5) !important; cursor:pointer}
.sqg-w .sqg-musik-oben .sqg-ic{width:20px; height:20px}
.sqg-w .sqg-musik-oben.laeuft{background:var(--w-jade) !important; color:#fff !important; border-color:var(--w-jade-tief) !important; animation:sqgMusikPuls 2.6s ease-in-out infinite}
.sqg-w .sqg-musik-oben.aus{color:#a39377 !important}
.sqg-w .sqg-musik-oben.aus::after{content:"" !important; display:block !important; position:absolute; left:8px; right:8px; top:50%; height:2px; background:currentColor; transform:rotate(-40deg); border-radius:2px}
@keyframes sqgMusikPuls{0%,100%{box-shadow:0 0 0 0 rgba(71,128,106,.35)}50%{box-shadow:0 0 0 6px rgba(71,128,106,0)}}

/* --- Schmaler Kasten am Rechner: Steuerknöpfe ohne Wort --- */
.sqg-u-ablauf{container-type:inline-size}
@container (max-width:420px){
  .sqg-steuer .sqg-knopf:not(.haupt) span{display:none}
  .sqg-w .sqg-steuer .sqg-knopf:not(.haupt){padding:6px 12px !important}
  .sqg-atem{width:140px; height:140px}
}

/* ============ Niedrige Bildschirme am Rechner ============ */
@media (min-width:761px) and (max-height:820px){
  .sqg-w-buehne{padding:12px 20px 6px}
  .sqg-kopf{margin-bottom:6px}
  .sqg-kopf-ic{flex-basis:38px; width:38px; height:38px}
  .sqg-impuls-karte{padding:18px 24px 16px}
  .sqg-impuls-zeichen{width:66px; height:66px; font-size:2rem}
  .sqg-atem{width:140px; height:140px}
  .sqg-w .sqg-u-text{font-size:1.04rem !important}
  .sqg-start-panel{gap:8px}
}

/* ============ Handy ============ */
@media (max-width:760px){
  .sqg-w{max-height:none; border-radius:16px; margin:8px auto !important}
  .sqg-w-buehne{padding:10px 12px 6px}
  .sqg-w.mit-musik .sqg-w-buehne{padding-right:48px}
  .sqg-w .sqg-musik-oben{top:8px; right:8px; width:34px !important; height:34px !important}
  .sqg-w .sqg-fussleiste{padding:5px 4px 7px; gap:4px; justify-content:space-around}
  /* auch am Handy mit Beschriftung – Symbol oben, Wort darunter */
  .sqg-w .sqg-leisten-knopf{flex:1 1 0 !important; width:auto !important; min-width:0 !important; height:46px !important; flex-direction:column !important; gap:1px !important; padding:2px 2px 3px !important; font-size:1.05rem !important}
  .sqg-w .sqg-leisten-knopf span{display:block !important; font-size:.62rem !important; line-height:1.35 !important; padding-top:1px; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .sqg-w .sqg-fussleiste.eng .sqg-leisten-knopf span, .sqg-w .sqg-fussleiste.enger .sqg-leisten-knopf span{display:block !important}
  .sqg-w .sqg-leisten-knopf.nur-gross{display:none !important}
  .sqg-w .sqg-leisten-knopf.nur-klein{display:inline-flex !important}

  .sqg-w h2{font-size:1.18rem}
  .sqg-kopf{gap:9px; margin-bottom:6px}
  .sqg-kopf-ic{flex-basis:32px; width:32px; height:32px; font-size:1.05rem}
  .sqg-kopf .sqg-unter{font-size:.76rem; line-height:1.3}
  .sqg-rumpf{grid-template-columns:1fr !important; gap:8px}
  .sqg-w .sqg-knopf{font-size:.84rem !important; padding:5px 11px !important; min-height:34px !important; gap:5px !important}
  .sqg-w .sqg-gross{font-size:.95rem !important; min-height:40px !important; padding:7px 16px !important}
  .sqg-knopfzeile{margin-top:6px; gap:6px}
  .sqg-w .sqg-reiter-knopf{padding:5px 8px !important; font-size:.8rem !important}
  .sqg-w .sqg-chip{padding:4px 10px !important; font-size:.8rem !important}
  .sqg-w .sqg-zurueck-knopf{height:30px !important; padding:0 10px 0 8px !important; font-size:.8rem !important}
  .sqg-w .sqg-mini-knopf{width:30px !important; height:30px !important}
  .sqg-w .sqg-hinweis{font-size:.72rem !important; padding:4px 8px; margin-top:4px !important}
  .sqg-w .sqg-hinweis.kurz{font-size:.7rem !important}
  .sqg-fig{inset:4px}
  .sqg-fig-text{font-size:.74rem !important; padding:2px 8px; bottom:5px; left:6px; right:6px}

  /* Start */
  .sqg-start{grid-template-columns:1fr; grid-template-rows:minmax(110px,1fr) auto; gap:8px}
  .sqg-start-panel{justify-content:flex-start; gap:6px}
  .sqg-w .sqg-seitentitel{font-size:1.35rem !important; text-align:center !important}
  .sqg-einleitung{font-size:.8rem !important; line-height:1.38 !important; text-align:center}
  .sqg-brauchst .sqg-feldname{display:none}
  .sqg-brauchst ul{justify-content:center; gap:4px}
  .sqg-brauchst li{font-size:.74rem; padding:2px 8px 2px 6px; gap:4px}
  .sqg-w .sqg-heute{font-size:.78rem !important; padding:5px 8px !important}
  .sqg-heute-ic{flex-basis:30px; height:30px}
  .sqg-kacheln{gap:5px}
  .sqg-w .sqg-kachel{padding:5px 6px !important; gap:6px !important}
  .sqg-kachel-ic{flex-basis:28px; width:28px; height:28px; font-size:.95rem}
  .sqg-kachel-text b{font-size:.82rem}
  .sqg-kachel-text small{font-size:.7rem}

  /* Übersicht */
  .sqg-b-liste{display:flex; flex-direction:column; gap:5px}
  .sqg-w .sqg-b-karte{flex:0 0 auto}
  .sqg-w .sqg-b-karte{padding:6px 9px !important; gap:8px !important; border-radius:13px !important}
  .sqg-w .sqg-nr{width:28px; height:28px; font-size:.86rem}
  .sqg-b-text b{font-size:.86rem}
  .sqg-b-text small{font-size:.7rem; line-height:1.3; display:-webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}

  /* Ein Brokat */
  .sqg-detail .sqg-rumpf{grid-template-rows:minmax(170px,44%) minmax(0,1fr); gap:6px}
  .sqg-d-links{gap:5px}
  .sqg-d-steuer{gap:6px}
  .sqg-d-steuer .sqg-knopf{min-height:30px !important; padding:3px 10px !important}
  .sqg-tempo .sqg-chip{padding:3px 9px !important}
  .sqg-d-kopf{gap:8px}
  .sqg-d-kopf .sqg-nr{width:30px; height:30px; font-size:.9rem}
  .sqg-d-kopf h2{font-size:1.02rem !important}
  .sqg-d-kopf .sqg-unter{display:none}
  .sqg-zusatz{font-size:.74rem !important}
  .sqg-reiter{margin-top:3px}
  .sqg-tafel{padding-top:6px}
  .sqg-schritte{gap:5px}
  .sqg-schritte li{font-size:.84rem; gap:7px}
  .sqg-schritte li::before{flex-basis:20px; height:20px; font-size:.72rem}
  .sqg-feld{padding:7px 9px; gap:8px}
  .sqg-feld p{font-size:.84rem !important}
  .sqg-feld-ic{flex-basis:26px; height:26px; font-size:.9rem}
  .sqg-d-panel .sqg-knopfzeile{margin-top:4px}

  /* Üben – Auswahl */
  .sqg-u-wahl .sqg-rumpf{grid-template-rows:minmax(100px,1fr) auto; gap:6px}
  .sqg-u-panel{justify-content:flex-start; gap:2px; overflow:visible}
  .sqg-w .sqg-feldname{font-size:.8rem !important; margin:2px 0 2px !important}
  .sqg-wahl-nr{display:grid !important; grid-template-columns:1fr 1fr}
  .sqg-w .sqg-wahl-nr .sqg-chip{padding:3px 8px !important; font-size:.74rem !important; width:100% !important; justify-content:flex-start}
  .sqg-w .sqg-wahl-art .sqg-chip{font-size:.78rem !important}
  .sqg-u-zwei{gap:0 10px}
  .sqg-u-zwei .sqg-chips{flex-wrap:nowrap}
  .sqg-w .sqg-u-zwei .sqg-chip{padding:4px 8px !important}
  .sqg-chips{gap:4px}
  .sqg-schalter{margin-top:4px; gap:6px 10px}
  .sqg-w .sqg-schalt{font-size:.76rem !important; padding:3px 9px !important}
  .sqg-dauer{font-size:.78rem !important}

  /* Üben – Ablauf */
  .sqg-u-lauf .sqg-rumpf{grid-template-rows:minmax(150px,50%) minmax(0,1fr); gap:4px}
  .sqg-u-ablauf{gap:3px}
  .sqg-u-titel h2{font-size:1.02rem !important}
  .sqg-u-als{font-size:.72rem !important}
  .sqg-u-zeile{font-size:.72rem}
  .sqg-fortschritt-balken{flex-basis:8px; height:8px}
  .sqg-u-mitte{flex-direction:row; gap:10px; justify-content:center}
  .sqg-atem{width:96px; height:96px}
  .sqg-atem .wort em{font-size:.78rem}
  .sqg-atem .wort span{font-size:.72rem}
  .sqg-w .sqg-u-text{font-size:.88rem !important; line-height:1.4 !important; text-align:left; flex:1 1 0; max-height:100%}
  .sqg-steuer{gap:4px}
  .sqg-steuer .sqg-knopf span{display:none}
  .sqg-w .sqg-steuer .sqg-knopf.haupt span{display:inline}
  .sqg-ende{grid-template-columns:1fr; grid-template-rows:minmax(140px,1fr) auto; gap:8px}
  .sqg-ende-text{align-items:center}
  .sqg-ende-text h2{text-align:center !important}
  .sqg-ende-text .sqg-unter{text-align:center; font-size:.8rem}
  .sqg-ende-ic{width:42px; height:42px; font-size:1.3rem}

  /* Grundlagen */
  .sqg-grundlagen .sqg-rumpf{grid-template-rows:auto minmax(0,1fr); gap:8px}
  .sqg-g-liste{display:grid; grid-template-columns:1fr 1fr; gap:5px; overflow:visible}
  .sqg-w .sqg-g-knopf{padding:5px 7px !important; gap:6px !important}
  .sqg-g-karte{padding:10px 12px; border-radius:16px}
  .sqg-g-karte h3{font-size:1.05rem !important}
  .sqg-g-punkte{gap:5px}
  .sqg-g-punkte li{font-size:.84rem; padding-left:16px}

  /* Geschichte */
  .sqg-zeitleiste{margin-bottom:6px}
  .sqg-w .sqg-zeitpunkt{flex:0 0 76px !important; font-size:.68rem !important}
  .sqg-hist-karte{grid-template-columns:1fr; grid-template-rows:minmax(90px,32%) minmax(0,1fr); gap:8px; padding:10px 12px; align-items:stretch}
  .sqg-hist-text h3{font-size:1.05rem !important; margin-bottom:4px !important}
  .sqg-hist-text p{font-size:.84rem !important; line-height:1.48 !important}

  /* Impuls */
  .sqg-impuls-karte{padding:18px 16px 16px; border-radius:20px}
  .sqg-impuls-zeichen{width:60px; height:60px; font-size:1.8rem; margin-bottom:6px}
  .sqg-impuls-text{font-size:1.08rem !important}
  .sqg-mehr-raster{gap:6px}
  .sqg-overlay-kasten{padding:12px 12px 14px}
  .sqg-w .sqg-mehr-kachel{gap:7px !important; padding:9px 8px !important; font-size:.84rem !important}
  .sqg-w .sqg-mehr-kachel span{overflow-wrap:normal !important}
}
@media (max-width:760px) and (max-height:760px){
  .sqg-w .sqg-b-karte .sqg-b-text small{-webkit-line-clamp:1}
  .sqg-w .sqg-b-karte{padding:4px 9px !important}
  .sqg-b-liste{gap:4px}
  .sqg-brokate .sqg-kopf .sqg-unter{display:none}
  .sqg-u-wahl .sqg-kopf .sqg-unter{display:none}
  .sqg-start{grid-template-rows:minmax(90px,1fr) auto}
  .sqg-einleitung{display:none}
  .sqg-kachel-text small{display:none}
  .sqg-u-lauf .sqg-rumpf{grid-template-rows:minmax(130px,38%) minmax(0,1fr)}
  .sqg-atem{width:84px; height:84px}
}
@media (prefers-reduced-motion:reduce){
  .sqg-w *, .sqg-box *{animation:none !important; transition:none !important}
}