/* Silbermuschel I Ging 1.3.8 – der Kasten. Überall Comic Sans MS.
   Grundgerüst wie Qigong und Hildegard: ein Kasten auf einen Bildschirm,
   Leiste unten mit „Mehr“, Musik-Knopf oben rechts, kräftige Abwehr gegen
   das Theme.

   Farben vom Orakel übernommen (iging-stil.php): TUSCHEBLAU AUF REISPAPIER,
   als einziger kräftiger Akzent ZINNOBER – und der bleibt den wandelnden
   Linien vorbehalten (dazu nur ganz sparsam die Jahreszahlen). */

.smi-w, .smi-box{
  --w-papier:#f6f2e9; --w-grund:#f0ebdf; --w-hell:#fbf8f1; --w-rand:#d8cdb6; --w-rand-zart:#e6dcc8;
  --w-tinte:#24303c; --w-tief:#2f4a63; --w-tiefer:#24303c; --w-leise:#5b6673;
  --w-blau-zart:#e4eaf0; --w-blau-hell:#cfd9e3; --w-strich:rgba(47,74,99,.26);
  --w-zinnober:#b4472f; --w-zinnober-zart:#f6e4dd; --w-sand:#b9ab8c;
}
.smi-w, .smi-w *, .smi-box, .smi-box *, .smi-vorhang, .smi-vorhang *{
  font-family:"Comic Sans MS","Comic Neue","Comic Sans","Chalkboard SE","Segoe Print",cursive !important;
}
.smi-w, .smi-w *, .smi-box, .smi-box *{
  box-sizing:border-box;
  letter-spacing:normal; hyphens:manual !important; -webkit-hyphens:manual !important;
  word-break:normal !important; overflow-wrap:break-word; text-transform:none !important;
}

/* --- Der Kasten ------------------------------------------------------ */
.smi-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(207,217,227,.45) 0%, rgba(207,217,227,0) 65%),
    radial-gradient(60% 50% at 100% 100%, rgba(185,171,140,.18) 0%, rgba(185,171,140,0) 70%),
    linear-gradient(180deg,#faf7f0 0%,#f6f2e9 60%,#f1ebdd 100%);
  box-shadow:0 18px 40px -24px rgba(36,48,60,.5), inset 0 0 0 4px rgba(255,255,255,.55), inset 0 0 0 5px rgba(47,74,99,.14);
  height:calc(100vh - 24px); height:calc(100svh - 24px); max-height:860px; min-height:520px;
  display:flex; flex-direction:column; line-height:1.5;
}
.smiw-buehne{position:relative; z-index:1; flex:1 1 auto; min-height:0; display:flex; flex-direction:column; overflow:auto; padding:14px 22px 8px}
.smiw-platz{flex:1 1 auto; min-height:0; display:flex; flex-direction:column}
.smiw-platz[hidden], .smiw-fragen[hidden]{display:none !important}
.smiw-szene{flex:1 1 auto; min-height:0; display:flex; flex-direction:column; animation:smiwRein .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes smiwRein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* Das Orakel nur mit Deckkraft einblenden – eine Verschiebung würde
   position:fixed (Nachfrage-Fenster des Verlaufs) an den Kasten binden. */
@keyframes smiwBlende{from{opacity:0}to{opacity:1}}
@keyframes smiwAuf{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes smiwVonRechts{from{opacity:0; transform:translateX(36px)}to{opacity:1; transform:none}}
@keyframes smiwVonLinks{from{opacity:0; transform:translateX(-36px)}to{opacity:1; transform:none}}

/* Die allgemeinen Rücksetzer gelten nur im Rahmen, NICHT im Orakel (.smi):
   Dort setzt iging-stil.php seine eigenen Abstände, und die bleiben. */
.smi-w :is(.smiw-platz,.smiw-fr-kopf,.smiw-fr-seite,.smiw-overlay) :is(h2,h3,h4){color:var(--w-tief); margin:0; line-height:1.22; font-weight:700; padding:0; border:0; background:none; text-align:left; letter-spacing:normal}
.smi-w h2:focus,.smi-w h3:focus{outline:none}
.smi-w :is(.smiw-platz,.smiw-fr-kopf,.smiw-fr-seite,.smiw-overlay) h2{font-size:clamp(1.3rem,2.4vw,1.7rem)}
.smi-w :is(.smiw-platz,.smiw-fr-kopf,.smiw-fr-seite,.smiw-overlay) h3{font-size:1.15rem}
.smi-w :is(.smiw-platz,.smiw-fr-kopf,.smiw-fr-seite,.smiw-overlay) p{margin:0; line-height:1.5}
.smi-w :is(.smiw-platz,.smiw-overlay) :is(ul,ol){margin:0; padding:0}
.smi-w :is(.smiw-platz,.smiw-overlay) li{margin:0}
/* Abwehr im Orakel: nur, was ein Theme gern verstellt. */
.smi-w .smi :is(h3,h4){border:0 !important; padding:0 !important; background:none !important; text-align:left}
.smi-w .smi h3.smi-name{margin:2px 0 6px !important}
.smi-w a{opacity:1 !important}
.smi-w svg{overflow:visible; max-width:100%}
.smi-w img{border:0 !important; box-shadow:none !important; margin:0 !important; max-width:100%}
.smi-w figure{margin:0 !important; padding:0 !important; background:none !important; border:0 !important}
.smi-w blockquote{margin:0}
.smi-w table{border:0; margin:0}
.smi-w .smiw-ic{width:1.1em; height:1.1em; display:inline-block; vertical-align:-.16em; flex:0 0 auto}
.smiw-unter{color:var(--w-leise); font-size:.93rem}
.smi-w .smiw-klein-hinweis{font-size:.82rem !important; color:var(--w-leise); line-height:1.4 !important; margin-top:8px !important}
.smiw-leer{padding:30px 10px; text-align:center; color:var(--w-leise)}
.smiw-initiale::first-letter{color:var(--w-tief); font-size:1.55em; font-weight:700; line-height:1}

/* --- Knöpfe: Abwehr gegen das Theme ------------------------------------ */
.smi-w button, .smi-w select, .smi-w input{margin:0 !important; box-shadow:none !important; text-shadow:none !important; max-width:100%}
.smi-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}
.smi-w button:disabled{cursor:default; opacity:.45}
.smi-w button:focus{outline:none !important}
.smi-w button:focus-visible, .smi-w a:focus-visible{outline:2px solid var(--w-tief) !important; outline-offset:2px}
.smi-w button::before,.smi-w button::after,.smi-box a::before,.smi-box a::after,.smi-w a::before,.smi-w a::after{content:none !important; display:none !important}

.smi-w .smiw-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-sand) !important; border-radius:999px !important;
  background:linear-gradient(180deg,#fffdf8 0%,#efe8d8 100%) !important; color:var(--w-tief) !important;
  transition:background .25s, color .25s, transform .2s}
.smi-w .smiw-knopf:not(:disabled):hover,.smi-w .smiw-knopf:focus-visible{background:var(--w-tief) !important; color:#f6f2e9 !important; border-color:var(--w-tiefer) !important; transform:translateY(-1px)}
.smi-w .smiw-knopf.haupt{background:var(--w-tief) !important; color:#f6f2e9 !important; border-color:var(--w-tiefer) !important}
.smi-w .smiw-knopf.haupt:not(:disabled):hover{background:var(--w-tiefer) !important}
.smi-w .smiw-klein{padding:5px 13px !important; min-height:34px !important; font-size:.88rem !important}
.smi-w .smiw-pfeil-knopf{width:44px !important; padding:0 !important}
.smi-w .smiw-link{display:inline-flex !important; align-items:center; gap:6px !important; background:none !important; border:0 !important;
  color:var(--w-tief) !important; text-decoration:underline !important; text-underline-offset:3px; padding:4px 2px !important; font-size:.92rem !important; text-align:left}
.smi-w .smiw-link:hover{color:var(--w-tinte) !important; text-decoration-thickness:2px !important}
.smi-w .smiw-mini-knopf{display:inline-flex !important; align-items:center; justify-content:center; width:36px !important; height:36px !important; padding:0 !important;
  border-radius:50% !important; border:1px solid var(--w-sand) !important; background:var(--w-hell) !important; color:var(--w-tief) !important; font-size:1.05rem !important}
.smi-w .smiw-mini-knopf:not(:disabled):hover{background:var(--w-tief) !important; color:#f6f2e9 !important}
.smiw-knopfzeile{display:flex !important; gap:8px; align-items:center; flex-wrap:wrap; flex:0 0 auto; margin-top:8px}
.smiw-knopfzeile.smiw-mitte{justify-content:center}
.smiw-knopfzeile.leer{display:none !important}
.smiw-zaehler{font-size:.86rem; color:var(--w-leise); min-width:54px; text-align:center}

.smi-w .smiw-nav{display:flex !important; gap:10px; align-items:center; justify-content:space-between; margin:0 0 8px; flex:0 0 auto}
.smi-w .smiw-zurueck-knopf{display:inline-flex !important; align-items:center; gap:5px !important; height:36px !important; padding:0 14px 0 10px !important; white-space:nowrap;
  border-radius:999px !important; border:1px solid var(--w-sand) !important; background:rgba(251,248,241,.95) !important; color:var(--w-tief) !important; font-size:.9rem !important; transition:background .2s,color .2s,transform .2s}
.smi-w .smiw-zurueck-knopf:hover{background:var(--w-tief) !important; color:#f6f2e9 !important; transform:translateX(-2px)}
.smiw-blaettern{display:flex; align-items:center; gap:6px; min-width:0}
.smiw-nav-text{font-size:.85rem; color:var(--w-leise); white-space:nowrap; margin-right:4px}

.smiw-kopf{display:flex; gap:12px; align-items:center; flex:0 0 auto; margin:0 0 10px}
.smiw-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-tief); background:radial-gradient(circle at 35% 30%,#fff,var(--w-blau-zart) 80%); border:1px solid var(--w-blau-hell); box-shadow:0 0 0 3px rgba(185,171,140,.18)}
.smiw-kopf-text{min-width:0}
.smiw-kopf .smiw-unter{font-size:.9rem; line-height:1.38}

.smiw-sek{flex:1 1 auto; min-height:0; display:flex; flex-direction:column}
.smiw-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}
.smiw-rumpf > *{min-height:0; min-width:0}

/* --- Fußleiste (wie Qigong) --------------------------------------------- */
.smi-w .smiw-fussleiste{position:relative; z-index:5; flex:0 0 auto; display:flex !important; justify-content:safe center; gap:4px; flex-wrap:nowrap;
  padding:7px 8px 9px; border-top:1px solid var(--w-rand-zart); background:rgba(251,248,241,.7); margin:0}
.smi-w .smiw-leisten-knopf{display:inline-flex !important; align-items:center; justify-content:center; gap:6px !important; flex-shrink:0;
  height:36px !important; padding:0 12px !important; border-radius:999px !important; font-size:.86rem !important; white-space:nowrap;
  border:1px solid transparent !important; background:transparent !important; color:var(--w-tief) !important; transition:background .2s,color .2s,border-color .2s; min-width:0}
.smi-w .smiw-leisten-knopf span{overflow:hidden; text-overflow:ellipsis; max-width:150px}
.smi-w .smiw-leisten-knopf:hover{background:var(--w-hell) !important; border-color:var(--w-rand) !important}
.smi-w .smiw-leisten-knopf[aria-current="page"]{background:var(--w-tief) !important; color:#f6f2e9 !important; border-color:var(--w-tiefer) !important}
.smi-w .smiw-leisten-knopf.smiw-mehr-knopf{display:none !important}
.smi-w .smiw-fussleiste.mit-mehr .smiw-leisten-knopf.smiw-mehr-knopf{display:inline-flex !important}
.smi-w .smiw-leisten-knopf.ausgelagert{display:none !important}
.smi-w .smiw-fussleiste.eng .smiw-leisten-knopf:not([aria-current="page"]) span{display:none}
.smi-w .smiw-fussleiste.eng .smiw-leisten-knopf{padding:0 10px !important; font-size:1rem !important}
.smi-w .smiw-fussleiste.enger .smiw-leisten-knopf span{display:none}

/* --- Fenster ------------------------------------------------------------ */
.smiw-overlay{position:absolute; inset:0; z-index:20; background:rgba(36,48,60,.3); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:14px; animation:smiwBlende .3s both}
.smiw-overlay-kasten{position:relative; max-width:700px; width:100%; max-height:100%; overflow:auto; background:var(--w-papier); border-radius:18px;
  border:1px solid var(--w-rand); padding:14px 20px 18px; box-shadow:0 20px 40px -20px rgba(0,0,0,.5), inset 0 0 0 4px #fff, inset 0 0 0 5px rgba(47,74,99,.14); color:var(--w-tinte); scrollbar-color:var(--w-sand) var(--w-grund)}
.smiw-overlay-kasten.klein{max-width:540px}
.smiw-overlay-kasten.bild{max-width:min(760px,100%); text-align:center}
.smi-w .smiw-overlay-kasten h3{margin:2px 44px 10px 0 !important}
.smi-w .smiw-overlay-kasten p{margin:0 0 8px !important; font-size:.95rem}
.smi-w .smiw-overlay-zu{position:absolute; top:10px; right:10px; z-index:2; display:flex !important; align-items:center; justify-content:center;
  width:40px !important; height:36px !important; padding:0 !important; border-radius:999px !important; border:1px solid var(--w-sand) !important; background:#fff !important;
  color:var(--w-tief) !important; font-size:1.35rem !important; line-height:1 !important}
.smi-w .smiw-overlay-zu:hover{background:var(--w-tief) !important; color:#fff !important}
.smi-w .smiw-quellen{list-style:disc !important; margin:0 0 10px 20px !important}
.smi-w .smiw-quellen li{margin:0 0 5px !important; font-size:.92rem; list-style:disc !important}
.smi-w .smiw-quellen a{color:var(--w-tief) !important}
.smiw-gross-bild{display:flex; flex-direction:column; align-items:center; gap:8px; padding-top:30px !important}
.smi-w .smiw-gross-bild img{max-height:min(68vh,620px) !important; width:auto; border-radius:12px; background:#fff}
.smiw-gross-bild figcaption{font-size:.85rem; color:var(--w-leise); font-style:italic; max-width:60ch}
.smiw-mehr-raster{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
.smi-w .smiw-mehr-kachel span{min-width:0; white-space:normal; line-height:1.2}
.smi-w .smiw-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:var(--w-hell) !important; color:var(--w-tinte) !important; font-size:.94rem !important; text-align:left}
.smi-w .smiw-mehr-kachel .smiw-ic{font-size:1.3rem; color:var(--w-tief)}
.smi-w .smiw-mehr-kachel.an{background:var(--w-tief) !important; color:#fff !important}
.smi-w .smiw-mehr-kachel.an .smiw-ic{color:#fff}

/* --- Chips, Reiter, Eingaben -------------------------------------------- */
.smiw-chips{display:flex !important; flex-wrap:wrap; gap:6px; align-items:center}
.smi-w .smiw-chip{display:inline-flex !important; align-items:center; gap:6px !important; padding:5px 13px !important; border-radius:999px !important; font-size:.9rem !important;
  border:1px solid var(--w-rand) !important; background:var(--w-hell) !important; color:var(--w-tinte) !important; transition:background .2s,border-color .2s}
.smi-w .smiw-chip:hover{border-color:var(--w-tief) !important}
.smi-w .smiw-chip[aria-pressed="true"]{background:var(--w-tief) !important; color:#fff !important; border-color:var(--w-tiefer) !important}
.smiw-reiter{display:flex !important; gap:3px; border-bottom:2px solid var(--w-rand); flex:0 0 auto; margin:0; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none}
.smiw-reiter::-webkit-scrollbar{display:none}
.smi-w .smiw-reiter-knopf{display:inline-flex !important; align-items:center; padding:7px 12px !important; font-size:.92rem !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}
.smi-w .smiw-reiter-knopf:hover{color:var(--w-tief) !important; background:rgba(251,248,241,.7) !important}
.smi-w .smiw-reiter-knopf[aria-selected="true"]{color:var(--w-tief) !important; border-bottom-color:var(--w-tief) !important; font-weight:700; background:rgba(251,248,241,.95) !important}
.smiw-tafel{flex:1 1 auto; min-height:0; overflow:auto; padding:10px 6px 4px 0; scrollbar-color:var(--w-sand) var(--w-grund)}
.smiw-tafel.neu > *{animation:smiwAuf .4s both}
.smi-w .smiw-eingabe, .smi-w .smiw-auswahl{font-size:.95rem !important; padding:6px 12px !important; height:40px !important; border-radius:12px !important; border:1px solid var(--w-sand) !important;
  background:#fffdf9 !important; color:var(--w-tinte) !important; outline:none; line-height:1.2 !important; width:auto !important; min-width:0}
.smi-w .smiw-eingabe:focus,.smi-w .smiw-auswahl:focus{border-color:var(--w-tief) !important}
.smi-w .smiw-auswahl{cursor:pointer; padding-right:6px !important}

/* ============ 1. I GING FRAGEN – das Orakel im Kasten ============ */
.smiw-fragen{flex:1 1 auto; min-height:0; display:flex; flex-direction:column}
.smiw-fragen.rein{animation:smiwBlende .45s ease both}
.smiw-fr-kopf{display:flex; gap:10px 16px; align-items:flex-start; flex:0 0 auto; margin:0 0 10px}
.smiw-fr-titel{flex:1 1 auto; min-width:0}
.smi-w .smiw-seitentitel{font-size:clamp(1.6rem,3vw,2.1rem) !important}
.smi-w .smiw-einleitung{font-size:.95rem !important; line-height:1.45 !important; color:var(--w-leise); margin-top:3px !important; max-width:62ch}
.smi-w .smiw-neu-knopf{flex:0 0 auto; margin-top:4px !important}
.smiw-fr-rumpf{flex:1 1 auto; min-height:0; display:grid; grid-template-columns:minmax(0,1fr); gap:18px}
.smiw-fragen.mit-seite .smiw-fr-rumpf{grid-template-columns:minmax(0,1fr) 236px}
.smiw-fragen:not(.mit-ergebnis) .smiw-orakel{display:flex; flex-direction:column}
.smiw-fragen:not(.mit-ergebnis) .smiw-orakel > .smi{margin:auto 0 !important; width:100%}
.smiw-orakel{position:relative; min-height:0; overflow:auto; padding:2px 8px 6px 2px; scrollbar-color:var(--w-sand) var(--w-grund); overscroll-behavior:contain}
.smiw-fr-seite{display:flex; flex-direction:column; gap:7px; min-height:0}
.smiw-fr-seite[hidden], .smi-w .smiw-fr-seite [hidden], .smi-w .smiw-neu-knopf[hidden]{display:none !important}
.smiw-orakel.laedt{opacity:.55; transition:opacity .2s; pointer-events:none}
.smiw-schritte{margin:8px 0 0 !important; padding:10px 12px !important; border-radius:14px; background:rgba(255,255,255,.5); border:1px dashed var(--w-rand); list-style:none !important; counter-reset:schritt}
.smi-w .smiw-schritte li{position:relative; list-style:none !important; margin:0 !important; padding:3px 0 3px 30px !important; font-size:.86rem; line-height:1.35; color:var(--w-tinte); counter-increment:schritt}
.smi-w .smiw-schritte li::before{content:counter(schritt) !important; display:flex !important; position:absolute; left:0; top:3px; width:22px; height:22px; border-radius:50%; align-items:center; justify-content:center;
  font-size:.78rem; font-weight:700; background:var(--w-tief); color:#f6f2e9}
.smi-w .smiw-seite-titel{font-size:.86rem !important; color:var(--w-leise); margin:2px 0 0 !important}
.smi-w .smiw-schritte + .smiw-seite-titel, .smi-w .smiw-kachel + .smiw-seite-titel{margin-top:10px !important}
.smi-w .smiw-kachel{display:flex !important; align-items:center; gap:9px !important; width:100% !important; text-align:left;
  padding:8px 10px !important; border-radius:14px !important; border:1px solid var(--w-rand) !important; background:rgba(251,248,241,.92) !important;
  color:var(--w-tinte) !important; line-height:1.22 !important; transition:transform .25s,border-color .25s; animation:smiwAuf .5s both}
.smi-w .smiw-kachel:hover{transform:translateY(-2px); border-color:var(--w-tief) !important; background:#fff !important}
.smiw-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-blau-zart) 80%); border:1px solid var(--w-blau-hell); color:var(--w-tief)}
.smiw-kachel-text{display:block; min-width:0}
.smiw-kachel-text b{display:block; font-size:.94rem; color:var(--w-tief)}
.smiw-kachel-text small{display:block; font-size:.78rem; color:var(--w-leise)}

/* Das Orakel selbst: nur Schrift, Größen und Abwehr – Aufbau und Farben
   bleiben, wie iging-stil.php sie setzt. */
.smi-w .smi{margin:0; line-height:1.55; color:var(--w-tinte)}
.smi-w .smi-formular{padding:16px 18px !important; border-radius:16px; gap:12px 16px; margin:0}
.smi-w .smi-feld{display:block; margin:0; padding:0; border:0; background:none; text-transform:none}
.smi-w .smi-feld > span{font-size:1.12rem; color:var(--w-tief); margin-bottom:5px}
.smi-w .smi-feld input[type="text"], .smi-w .smi-verlauf select{
  display:block !important; width:100% !important; height:auto !important; font-size:1.05rem !important; line-height:1.35 !important;
  padding:10px 13px !important; border:1px solid var(--w-rand) !important; border-radius:10px !important; background:#fff !important; color:var(--w-tinte) !important;
  margin:0 !important; box-shadow:none !important; outline:none}
.smi-w .smi-feld input[type="text"]:focus, .smi-w .smi-verlauf select:focus{border-color:var(--w-tief) !important; box-shadow:0 0 0 3px rgba(47,74,99,.15) !important}
.smi-w .smi-feld > small{font-size:.86rem; line-height:1.4}
.smi-w .smi-knopf{display:inline-flex !important; align-items:center; justify-content:center; width:auto !important; min-height:44px !important;
  padding:10px 26px !important; font-size:1.05rem !important; line-height:1.2 !important; border-radius:999px !important; letter-spacing:normal !important;
  border:1px solid var(--w-tief) !important; background:var(--w-tief) !important; color:#f6f2e9 !important; margin:0 !important}
.smi-w .smi-knopf:hover{background:var(--w-tiefer) !important; border-color:var(--w-tiefer) !important}
.smi-w button.smi-klein{display:inline-flex !important; width:auto !important; padding:5px 14px !important; margin:0 !important; font-size:.86rem !important;
  border:1px solid var(--w-strich) !important; border-radius:999px !important; background:none !important; color:var(--w-leise) !important}
.smi-w button.smi-klein:hover{background:var(--w-papier) !important; color:var(--w-tief) !important; border-color:var(--w-tief) !important}
.smi-w .smi-ergebnis{margin:16px 0 0; padding:22px 24px; border-radius:18px}
.smi-w .smi-frage{font-size:1.3rem}
.smi-w .smi-name{font-size:1.8rem !important}
.smi-w .smi-nummer{font-size:.84rem}
.smi-w .smi-zeichnung{width:150px; max-width:150px}
.smi-w .smi-spruch{border-top:0; border-right:0; border-bottom:0}
.smi-w .smi-uebersicht ul{list-style:none !important; margin:0 !important; padding:0 !important}
.smi-w .smi-uebersicht li{list-style:none !important; margin:0 !important}
.smi-w .smi-uebersicht a{color:var(--w-tinte) !important; text-decoration:none !important}
.smi-w .smi-uebersicht h4{font-size:1.35rem}
.smi-w .smi-fassung{margin-bottom:2px}
/* Die beiden Fenster des Orakels hängen am Bildschirm – ihre Schrift auch. */
.smi-w .smi-nachfrage-kasten{font-size:1rem}
.smi-vorhang-kopf{font-size:1.45rem !important}

/* ============ 2. DIE 64 ZEICHEN ============ */
.smiw-filter{display:flex; gap:8px; align-items:center; flex-wrap:wrap; flex:0 0 auto; margin:0 0 8px}
.smi-w .smiw-suche-feld{position:relative; display:flex; align-items:center; flex:1 1 260px; max-width:440px; margin:0; padding:0}
.smi-w .smiw-suche-feld .smiw-ic{position:absolute; left:11px; color:var(--w-leise); pointer-events:none}
.smi-w .smiw-suche-feld .smiw-suche{width:100% !important; padding-left:34px !important}
.smi-w .smiw-filter .smiw-auswahl{flex:0 1 210px}
.smiw-raster-feld{flex:1 1 auto; min-height:0; overflow:hidden; padding:2px}
.smiw-raster{display:grid; grid-template-columns:repeat(var(--spalten,4),minmax(0,1fr)); gap:8px}
.smiw-raster > *{animation:smiwAuf .4s both}
.smiw-raster.fuellt{grid-auto-rows:minmax(0,1fr)}
.smi-w .smiw-raster.fuellt > .smiw-hkarte{height:100% !important}
.smi-w .smiw-hkarte{display:flex !important; align-items:center; gap:10px !important; width:100% !important; height:70px; text-align:left; padding:6px 10px !important;
  border-radius:14px !important; border:1px solid var(--w-rand) !important; background:rgba(251,248,241,.95) !important; color:var(--w-tinte) !important;
  line-height:1.2 !important; transition:transform .25s,border-color .25s,background .25s; overflow:hidden}
.smi-w .smiw-hkarte:hover{transform:translateY(-2px); border-color:var(--w-tief) !important; background:#fff !important}
.smiw-hkarte-bild{flex:0 0 34px; width:34px; display:flex; align-items:center}
.smi-w .smiw-hkarte-bild .smiw-hex{width:34px; height:auto; display:block}
.smiw-hkarte-text{display:block; min-width:0}
.smiw-hkarte-text small{display:block; font-size:.76rem; color:var(--w-leise); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.smiw-hkarte-text b{display:-webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:.92rem; color:var(--w-tief); line-height:1.2; white-space:normal}

/* Die Linien */
.smi-w .smiw-linie, .smi-box .smi-linie{fill:var(--w-tief)}
.smi-w .smiw-linie.wandelt{fill:var(--w-zinnober)}
.smi-w .smiw-punkt{fill:var(--w-zinnober)}

/* Ein Zeichen */
.smiw-z-rumpf{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr)}
.smiw-z-links{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; min-height:0}
.smiw-z-bild{width:100%; max-width:190px; display:flex; justify-content:center}
.smi-w .smiw-hex.gross{width:100%; max-width:170px; height:auto}
.smiw-z-unicode{font-size:2rem; line-height:1; color:var(--w-leise)}
.smiw-z-tris{display:flex; flex-direction:column; gap:6px; width:100%; max-width:220px}
.smi-w .smiw-z-tri{display:flex !important; align-items:center; gap:10px !important; width:100% !important; padding:6px 12px !important; border-radius:14px !important; text-align:left;
  border:1px solid var(--w-rand) !important; background:var(--w-hell) !important; color:var(--w-tinte) !important; transition:border-color .2s, transform .2s}
.smi-w .smiw-z-tri:not(:disabled):hover{border-color:var(--w-tief) !important; transform:translateY(-1px)}
.smi-w .smiw-z-tri:disabled{opacity:1}
.smi-w .smiw-z-tri .smiw-tri{width:34px; height:auto; flex:0 0 34px}
.smiw-z-tri span{display:block; min-width:0}
.smiw-z-tri small{display:block; font-size:.74rem; color:var(--w-leise)}
.smiw-z-tri b{display:block; font-size:.95rem; color:var(--w-tief)}
.smiw-z-tafel{border-radius:20px; padding:14px 20px !important; background:rgba(251,248,241,.94); border:1px solid var(--w-rand);
  box-shadow:inset 0 0 0 4px #fffdf8, inset 0 0 0 5px rgba(47,74,99,.1)}
.smi-w .smiw-z-nr{font-size:.82rem !important; color:var(--w-leise)}
.smi-w .smiw-z-name{font-size:clamp(1.35rem,2.6vw,1.8rem) !important; margin:0 0 4px !important}
.smiw-z-chin{font-size:.62em; color:var(--w-leise); font-weight:400; font-style:italic; white-space:nowrap}
.smi-w .smiw-z-kurz{font-size:1.05rem !important; font-style:italic; margin:0 0 4px !important}
.smi-w .smiw-z-tri-zeile{font-size:.9rem !important; color:var(--w-leise); margin:0 0 6px !important}
.smiw-spruch{margin:10px 0 0; padding:9px 14px; border-radius:0 12px 12px 0; border-left:3px solid var(--w-strich); background:rgba(255,255,255,.6); font-size:.98rem; line-height:1.5}
.smiw-spruch > span{display:block; font-size:.78rem; color:var(--w-leise); margin-bottom:2px; font-weight:700}
.smi-w .smiw-z-deutung{margin:12px 0 0 !important; font-size:1rem !important; line-height:1.55 !important}

/* ============ 3. DIE 8 TRIGRAMME ============ */
.smiw-t-rumpf{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
.smiw-t-links{display:flex; flex-direction:column; align-items:center; gap:8px; min-height:0}
.smiw-bagua{flex:1 1 auto; min-height:0; width:100%; max-width:430px; display:grid; gap:7px;
  grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(0,1fr));
  grid-template-areas:"o1 o2 o3" "o4 o5 o6" "o7 o8 o9"; max-height:420px}
.smi-w .smiw-bagua-knopf{display:flex !important; flex-direction:column; align-items:center; justify-content:center; gap:4px !important; width:100% !important; height:100%; min-height:0;
  padding:6px 4px !important; border-radius:16px !important; border:1px solid var(--w-rand) !important; background:rgba(251,248,241,.95) !important; color:var(--w-tinte) !important;
  transition:transform .2s, border-color .2s, background .2s; overflow:hidden}
.smi-w .smiw-bagua-knopf:hover{border-color:var(--w-tief) !important; transform:translateY(-1px)}
.smi-w .smiw-bagua-knopf .smiw-tri{width:46px; height:auto; flex:0 0 auto}
.smi-w .smiw-bagua-knopf b{font-size:.9rem; color:var(--w-tief); line-height:1.1}
.smi-w .smiw-bagua-knopf small{font-size:.72rem; color:var(--w-leise); line-height:1.1}
.smi-w .smiw-bagua-knopf[aria-pressed="true"]{background:var(--w-tief) !important; border-color:var(--w-tiefer) !important}
.smi-w .smiw-bagua-knopf[aria-pressed="true"] b, .smi-w .smiw-bagua-knopf[aria-pressed="true"] small{color:#f6f2e9}
.smi-w .smiw-bagua-knopf[aria-pressed="true"] .smiw-linie{fill:#f6f2e9}
.smiw-bagua-mitte{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:2px; border-radius:50%;
  background:radial-gradient(circle at 50% 40%,#fff,var(--w-blau-zart) 75%); border:1px dashed var(--w-blau-hell); padding:4px}
.smiw-bagua-mitte b{font-size:.84rem; color:var(--w-tief); line-height:1.15}
.smiw-bagua-mitte small{font-size:.7rem; color:var(--w-leise); line-height:1.15}
.smi-w .smiw-bagua-bild-knopf{font-size:.86rem !important}
.smiw-t-karte{min-height:0; overflow:auto; border-radius:20px; padding:14px 18px; background:rgba(251,248,241,.94); border:1px solid var(--w-rand);
  box-shadow:inset 0 0 0 4px #fffdf8, inset 0 0 0 5px rgba(47,74,99,.1); scrollbar-color:var(--w-sand) var(--w-grund)}
.smiw-t-karte.neu > *{animation:smiwAuf .4s both}
.smiw-t-kopf{display:flex; gap:12px; align-items:center; margin:0 0 8px}
.smiw-t-zeichen{flex:0 0 56px; width:56px; height:56px; display:flex; align-items:center; justify-content:center; border-radius:14px; background:#fff; border:1px solid var(--w-rand)}
.smi-w .smiw-t-zeichen .smiw-tri{width:38px; height:auto}
.smi-w .smiw-t-kopf h3{font-size:1.3rem !important}
.smi-w .smiw-t-kopf .smiw-unter{font-size:.9rem !important}
.smiw-t-foto{float:right; width:38%; max-width:200px; margin:0 0 8px 12px !important}
.smi-w .smiw-t-foto img{display:block; width:100%; border-radius:12px !important; border:1px solid var(--w-rand) !important}
.smiw-t-foto figcaption{font-size:.72rem; color:var(--w-leise); font-style:italic; margin-top:3px; line-height:1.3}
.smi-w .smiw-t-text{font-size:.97rem !important; line-height:1.55 !important; margin:0 0 10px !important}
.smi-w .smiw-fakten{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 14px; margin:0 0 8px !important; padding:0; clear:both}
.smi-w .smiw-fakten > div{display:flex; flex-direction:column; padding:4px 0; border-bottom:1px dashed var(--w-rand-zart); min-width:0}
.smi-w .smiw-fakten dt{font-size:.74rem; color:var(--w-leise); margin:0; font-weight:400}
.smi-w .smiw-fakten dd{font-size:.94rem; color:var(--w-tinte); margin:0; line-height:1.3}

/* ============ 4. ANLEITUNG ============ */
.smiw-a-text{max-width:760px}
.smi-w .smiw-a-text p{margin:0 0 9px !important; font-size:1rem; line-height:1.55}
.smi-w .smiw-punkte{list-style:none !important; display:flex; flex-direction:column; gap:8px; margin:4px 0 6px !important}
.smi-w .smiw-punkte li{position:relative; padding-left:22px; font-size:.98rem; line-height:1.5; list-style:none !important}
.smi-w .smiw-punkte li::before{content:"" !important; display:block !important; position:absolute; left:2px; top:.62em; width:12px; height:4px; border-radius:2px; background:var(--w-tief)}
.smi-w .smiw-tabelle{border-collapse:collapse; width:100%; max-width:640px; margin:4px 0 12px !important; font-size:.92rem; background:rgba(255,255,255,.55); border-radius:12px; overflow:hidden}
.smi-w .smiw-tabelle th{font-size:.78rem; font-weight:700; color:var(--w-leise); text-align:left; padding:6px 10px; border:0; border-bottom:1px solid var(--w-rand); background:var(--w-grund)}
.smi-w .smiw-tabelle td{padding:6px 10px; border:0; border-bottom:1px dashed var(--w-rand-zart); vertical-align:middle; line-height:1.3}
.smi-w .smiw-tabelle td.zahl{font-weight:700; font-size:1.1rem; color:var(--w-tief); text-align:center}
.smi-w .smiw-tabelle tr.wandelt td.zahl{color:var(--w-zinnober)}
.smi-w .smiw-tabelle small{color:var(--w-leise); font-size:.8rem}
.smi-w .smiw-einzel{width:56px; height:auto; display:block}
.smiw-bsp{display:flex; align-items:center; justify-content:center; gap:10px 18px; flex-wrap:wrap; margin:4px 0 12px}
.smi-w .smiw-bsp-hex{display:flex !important; align-items:center; gap:12px !important; padding:10px 14px !important; border-radius:16px !important; text-align:left;
  border:1px solid var(--w-rand) !important; background:rgba(251,248,241,.95) !important; color:var(--w-tinte) !important; transition:border-color .2s, transform .2s}
.smi-w .smiw-bsp-hex:not(:disabled):hover{border-color:var(--w-tief) !important; transform:translateY(-2px)}
.smi-w .smiw-bsp-hex .smiw-hex{width:64px; height:auto; flex:0 0 auto}
.smiw-bsp-hex span{display:block}
.smiw-bsp-hex small{display:block; font-size:.76rem; color:var(--w-leise)}
.smiw-bsp-hex b{display:block; font-size:1rem; color:var(--w-tief)}
.smiw-bsp-pfeil{color:var(--w-zinnober); font-size:1.6rem; display:flex}

/* ============ 5. GESCHICHTE ============ */
.smiw-zeitleiste{position:relative; display:flex !important; flex:0 0 auto; overflow-x:auto; scrollbar-width:none; margin:0 0 10px; padding:2px 0}
.smiw-zeitleiste::-webkit-scrollbar{display:none}
.smiw-zeitleiste::before{content:""; position:absolute; left:18px; right:18px; top:12px; height:2px; background:var(--w-rand)}
.smi-w .smiw-zeitpunkt{position:relative; flex:1 0 76px !important; display:flex !important; flex-direction:column; align-items:center; gap:4px !important; padding:4px 3px !important;
  border:0 !important; background:transparent !important; color:var(--w-leise) !important; font-size:.74rem !important; line-height:1.15 !important; text-align:center; white-space:nowrap}
.smiw-zeitpunkt i{width:14px; height:14px; border-radius:50%; background:var(--w-hell); border:2px solid var(--w-blau-hell); transition:transform .3s, background .3s}
.smiw-zeitpunkt.vorbei i{background:var(--w-blau-zart)}
.smiw-zeitpunkt.an i{background:var(--w-tief); border-color:var(--w-tief); transform:scale(1.35)}
.smi-w .smiw-zeitpunkt.an{color:var(--w-tief) !important; font-weight:700}
.smiw-hist-buehne{flex:1 1 auto; min-height:0; position:relative; overflow:hidden}
.smiw-hist-karte{position:absolute; inset:0; display:grid; grid-template-columns:minmax(0,1fr); gap:22px; align-items:center;
  background:rgba(251,248,241,.94); border:1px solid var(--w-rand); border-radius:20px; padding:16px 24px; box-shadow:inset 0 0 0 4px #fffdf8, inset 0 0 0 5px rgba(47,74,99,.1)}
.smiw-hist-karte.mit-bild{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.smiw-hist-karte.ohne-bild .smiw-hist-text{max-width:700px; margin:0 auto; width:100%}
@media (min-width:761px){
  .smi-w .smiw-hist-karte.ohne-bild .smiw-hist-text h3{font-size:1.55rem !important; margin-bottom:12px !important}
  .smi-w .smiw-hist-karte.ohne-bild .smiw-hist-text p{font-size:1.1rem !important; line-height:1.7 !important}
  .smiw-hist-karte.ohne-bild .smiw-hist-jahr{font-size:.92rem; padding:3px 14px}
}
.smiw-hist-karte.von-rechts{animation:smiwVonRechts .5s cubic-bezier(.2,.8,.2,1) both}
.smiw-hist-karte.von-links{animation:smiwVonLinks .5s cubic-bezier(.2,.8,.2,1) both}
.smiw-hist-bild{margin:0; height:100%; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center}
.smi-w .smiw-hist-lupe{display:flex !important; align-items:center; justify-content:center; min-height:0; max-height:100%; padding:0 !important; border:0 !important; background:none !important; cursor:zoom-in; flex:0 1 auto}
.smi-w .smiw-hist-bild img{display:block; max-width:100%; max-height:100%; min-height:0; object-fit:contain; border-radius:14px; background:#fff; border:1px solid var(--w-rand) !important}
.smiw-hist-bild figcaption{font-size:.74rem; color:var(--w-leise); margin-top:5px; text-align:center; font-style:italic; line-height:1.3}
.smiw-hist-text{min-height:0; max-height:100%; overflow:auto; padding-right:4px}
.smiw-hist-jahr{display:inline-block; font-size:.82rem; padding:2px 12px; border-radius:999px; background:var(--w-zinnober-zart); color:var(--w-zinnober); font-weight:700; margin:0 0 6px; border:1px solid #ecc9bd}
.smi-w .smiw-hist-text h3{font-size:1.3rem !important; margin:0 0 8px !important}
.smi-w .smiw-hist-text p{font-size:1rem !important; line-height:1.6 !important}
.smi-w .smiw-quellen-knopf{margin-left:14px !important; font-size:.86rem !important}

/* ============ Box ============ */
.smi-box{display:flex; gap:22px; align-items:center; max-width:760px; margin:20px auto; padding:18px 24px; border-radius:22px;
  border:1px solid var(--w-rand); background:linear-gradient(135deg,#faf7f0,#f6f2e9 55%,#e9eef3); box-shadow:0 12px 28px -20px rgba(36,48,60,.6), inset 0 0 0 4px rgba(255,255,255,.6), inset 0 0 0 5px rgba(47,74,99,.12); color:var(--w-tinte); text-align:left}
.smi-box-bild{flex:0 0 110px; width:110px; display:flex; align-items:center; justify-content:center; padding:10px; border-radius:16px; background:#fff; border:1px solid var(--w-rand)}
.smi-box .smi-zeichnung{width:88px; height:auto; display:block; max-width:100%}
.smi-box-text{min-width:0}
.smi-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}
.smi-box p{margin:0 0 12px !important; line-height:1.5; font-size:1rem; color:var(--w-tinte)}
.smi-box a.smi-box-knopf,.smi-box a.smi-box-knopf:visited{display:inline-flex !important; align-items:center; padding:9px 22px !important; border-radius:999px !important;
  background:var(--w-tief) !important; color:#f6f2e9 !important; border:1px solid var(--w-tiefer) !important; text-decoration:none !important; opacity:1 !important; font-size:1rem; box-shadow:none !important; transition:background .2s}
.smi-box a.smi-box-knopf:hover,.smi-box a.smi-box-knopf:focus{background:var(--w-tiefer) !important; color:#fff !important}
@media (max-width:560px){ .smi-box{flex-direction:column; text-align:center} }

/* --- „Ton erlauben“ – genau wie in Qigong, in Tuscheblau --- */
.smiw-tonfrage{position:fixed !important; inset:0 !important; z-index:2147483600 !important; display:flex !important; align-items:center; justify-content:center;
  padding:16px; background:rgba(16,22,28,.38); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); opacity:0; transition:opacity .4s ease; margin:0 !important}
.smiw-tonfrage.offen{opacity:1}
.smiw-tonfrage-kasten{max-width:460px; width:100%; box-sizing:border-box; padding:22px 26px 24px; border-radius:16px; text-align:center;
  background:#24303c !important; color:#eef1f4 !important; box-shadow:0 18px 50px -12px rgba(0,0,0,.55); border:1px solid rgba(185,171,140,.45);
  font-family:"Comic Sans MS","Comic Neue","Comic Sans","Chalkboard SE",cursive !important; transform:translateY(8px) scale(.98); transition:transform .4s ease}
.smiw-tonfrage.offen .smiw-tonfrage-kasten{transform:none}
.smiw-tonfrage-kasten h3{margin:0 0 8px !important; padding:0 !important; border:0 !important; background:none !important; color:#f6f2e9 !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}
.smiw-tonfrage-kasten p{margin:0 0 16px !important; color:#dde3e9 !important; font:400 .95rem/1.5 "Comic Sans MS","Comic Neue",cursive !important; text-align:center !important}
.smiw-tonfrage-reihe{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.smiw-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 #eef1f4 !important; background:transparent !important; color:#f6f2e9 !important; width:auto !important; display:inline-block !important}
.smiw-tonfrage-reihe .smiw-tonfrage-ja{background:#4f6f8f !important; border-color:#cfd9e3 !important}
.smiw-tonfrage-reihe button:hover,.smiw-tonfrage-reihe button:focus-visible{background:#6487a8 !important; outline:none}
.smiw-tonfrage-reihe button::before,.smiw-tonfrage-reihe button::after{content:none !important; display:none !important}
@media (prefers-reduced-motion:reduce){.smiw-tonfrage,.smiw-tonfrage-kasten{transition:none}}

/* --- Musik-Knopf oben rechts im Kasten --- */
.smi-w.mit-musik .smiw-buehne{padding-right:60px}
.smi-w .smiw-musik-oben{position:absolute !important; top:12px; right:12px; z-index:6; width:40px !important; height:40px !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-sand) !important; background:rgba(251,248,241,.96) !important; color:var(--w-tief) !important; box-shadow:0 4px 12px -6px rgba(36,48,60,.5) !important; cursor:pointer}
.smi-w .smiw-musik-oben .smiw-ic{width:20px; height:20px}
.smi-w .smiw-musik-oben.laeuft{background:var(--w-tief) !important; color:#fff !important; border-color:var(--w-tiefer) !important; animation:smiwMusikPuls 2.6s ease-in-out infinite}
.smi-w .smiw-musik-oben.aus{color:#9aa3ad !important}
.smi-w .smiw-musik-oben.aus::after{content:"" !important; display:block !important; position:absolute; left:9px; right:9px; top:50%; height:2px; background:currentColor; transform:rotate(-40deg); border-radius:2px}
@keyframes smiwMusikPuls{0%,100%{box-shadow:0 0 0 0 rgba(47,74,99,.35)}50%{box-shadow:0 0 0 6px rgba(47,74,99,0)}}

/* ============ Niedrige Bildschirme am Rechner ============ */
@media (min-width:761px) and (max-height:820px){
  .smiw-buehne{padding:12px 20px 6px}
  .smiw-kopf{margin-bottom:6px}
  .smiw-kopf-ic{flex-basis:38px; width:38px; height:38px}
  .smi-w .smiw-einleitung{font-size:.9rem !important}
  .smi-w .smiw-kachel{padding:6px 9px !important}
  .smiw-fakten > div{padding:2px 0 !important}
  .smi-w .smiw-t-text{font-size:.93rem !important; line-height:1.5 !important; margin-bottom:6px !important}
  .smi-w .smiw-hist-text p{font-size:.96rem !important; line-height:1.55 !important}
  .smi-w .smiw-hex.gross{max-width:140px}
}

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

  .smi-w h2{font-size:1.2rem}
  .smiw-kopf{gap:9px; margin-bottom:6px}
  .smiw-kopf-ic{flex-basis:32px; width:32px; height:32px; font-size:1.05rem}
  .smiw-kopf .smiw-unter{font-size:.8rem; line-height:1.3}
  .smiw-rumpf{grid-template-columns:1fr !important; gap:8px}
  .smi-w .smiw-knopf{font-size:.88rem !important; padding:5px 12px !important; min-height:36px !important; gap:5px !important}
  .smiw-knopfzeile{margin-top:6px; gap:6px}
  .smi-w .smiw-reiter-knopf{padding:6px 10px !important; font-size:.86rem !important}
  .smi-w .smiw-chip{padding:4px 11px !important; font-size:.84rem !important}
  .smi-w .smiw-zurueck-knopf{height:34px !important; padding:0 10px 0 8px !important; font-size:.84rem !important}
  .smi-w .smiw-mini-knopf{width:34px !important; height:34px !important}
  .smiw-nav-text{font-size:.76rem}
  .smi-w .smiw-eingabe, .smi-w .smiw-auswahl{height:38px !important; font-size:.9rem !important; padding:4px 9px !important}

  /* Fragen */
  .smiw-fragen.mit-seite .smiw-fr-rumpf{grid-template-columns:minmax(0,1fr)}
  .smiw-fr-seite{display:none !important}
  .smiw-fr-kopf{margin-bottom:6px; gap:6px; flex-wrap:wrap}
  .smi-w .smiw-seitentitel{font-size:1.35rem !important}
  .smi-w .smiw-einleitung{font-size:.82rem !important; line-height:1.38 !important}
  .smiw-orakel{padding:0 4px 4px 0}
  .smiw-fragen:not(.mit-ergebnis) .smiw-orakel > .smi{margin:0 !important}
  .smi-w .smi-formular{padding:12px 12px !important; gap:10px}
  .smi-w .smi-feld > span{font-size:1rem}
  .smi-w .smi-feld > small{font-size:.8rem}
  .smi-w .smi-knopf{width:100% !important}
  .smi-w .smi-ergebnis{padding:16px 14px; margin-top:12px}
  .smi-w .smi-name{font-size:1.45rem !important}
  .smi-w .smi-zeichnung{width:110px; max-width:110px}

  /* 64 Zeichen */
  .smi-w .smiw-suche-feld{flex:1 1 100%; max-width:none}
  .smi-w .smiw-filter .smiw-auswahl{flex:1 1 100%}
  .smiw-filter{gap:6px; margin-bottom:6px}
  .smi-w .smiw-hkarte{height:60px; padding:5px 8px !important; gap:8px !important; border-radius:12px !important}
  .smiw-hkarte-bild, .smi-w .smiw-hkarte-bild .smiw-hex{width:28px; flex-basis:28px}
  .smiw-hkarte-text b{font-size:.84rem}
  .smiw-hkarte-text small{font-size:.7rem}
  .smiw-raster{gap:6px}

  .smiw-z-rumpf{grid-template-rows:auto minmax(0,1fr)}
  .smiw-z-links{flex-direction:row; flex-wrap:nowrap; gap:10px; justify-content:flex-start}
  .smiw-z-bild{flex:0 0 70px; width:70px}
  .smi-w .smiw-hex.gross{width:70px}
  .smiw-z-unicode{display:none}
  .smiw-z-tris{flex:1 1 auto; max-width:none; flex-direction:row; gap:6px}
  .smi-w .smiw-z-tri{flex:1 1 0 !important; flex-direction:column; gap:3px !important; padding:5px 4px !important; text-align:center}
  .smiw-z-tri small{font-size:.68rem}
  .smiw-z-tri b{font-size:.84rem}
  .smi-w .smiw-z-tri .smiw-tri{width:28px; flex-basis:auto}
  .smiw-z-tafel{padding:10px 12px !important; border-radius:16px}
  .smi-w .smiw-z-name{font-size:1.2rem !important}
  .smi-w .smiw-z-kurz{font-size:.95rem !important}
  .smiw-spruch{font-size:.9rem; padding:7px 10px}
  .smi-w .smiw-z-deutung{font-size:.92rem !important}

  /* Trigramme */
  .smiw-t-rumpf{grid-template-rows:auto minmax(0,1fr); gap:6px}
  .smiw-t-links{gap:5px}
  .smiw-bagua{flex:0 0 auto; height:min(250px,34vh); max-width:340px; gap:4px}
  .smi-w .smiw-bagua-knopf{padding:2px !important; gap:1px !important; border-radius:12px !important}
  .smi-w .smiw-bagua-knopf .smiw-tri{width:30px}
  .smi-w .smiw-bagua-knopf b{font-size:.76rem}
  .smi-w .smiw-bagua-knopf small{font-size:.68rem}
  .smiw-bagua-mitte b{font-size:.7rem}
  .smiw-bagua-mitte small{font-size:.66rem}
  .smi-w .smiw-bagua-bild-knopf{display:none !important}
  .smiw-t-karte{padding:10px 12px; border-radius:16px}
  .smiw-t-zeichen{flex-basis:44px; width:44px; height:44px}
  .smi-w .smiw-t-kopf h3{font-size:1.1rem !important}
  .smi-w .smiw-t-text{font-size:.9rem !important}
  .smi-w .smiw-fakten dd{font-size:.86rem}

  /* Anleitung */
  .smi-w .smiw-a-text p{font-size:.92rem}
  .smi-w .smiw-punkte li{font-size:.9rem}
  .smi-w .smiw-tabelle{font-size:.8rem}
  .smi-w .smiw-tabelle th, .smi-w .smiw-tabelle td{padding:5px 6px}
  .smi-w .smiw-einzel{width:40px}
  .smi-w .smiw-bsp-hex{padding:8px 10px !important; gap:8px !important}
  .smi-w .smiw-bsp-hex .smiw-hex{width:44px}

  /* Geschichte */
  .smiw-zeitleiste{margin-bottom:6px}
  .smi-w .smiw-zeitpunkt{flex:0 0 74px !important; font-size:.7rem !important}
  .smiw-hist-karte, .smiw-hist-karte.mit-bild{grid-template-columns:1fr; gap:8px; padding:10px 12px; align-items:start}
  .smiw-hist-karte.mit-bild{grid-template-rows:minmax(80px,32%) minmax(0,1fr); align-items:stretch}
  .smiw-hist-karte.ohne-bild{align-items:stretch}
  .smi-w .smiw-hist-text h3{font-size:1.08rem !important; margin-bottom:4px !important}
  .smi-w .smiw-hist-text p{font-size:.9rem !important; line-height:1.5 !important}
  .smiw-hist-bild figcaption{font-size:.66rem}

  .smiw-mehr-raster{gap:6px}
  .smiw-overlay-kasten{padding:12px 12px 14px}
  .smi-w .smiw-mehr-kachel{gap:7px !important; padding:9px 8px !important; font-size:.86rem !important}
}
@media (max-width:760px) and (max-height:700px){
  .smi-w .smiw-einleitung{display:none}
  .smiw-kopf .smiw-unter{display:none}
  .smiw-bagua{height:min(210px,32vh)}
}
@media (prefers-reduced-motion:reduce){
  .smi-w *, .smi-box *{animation:none !important; transition:none !important}
}
@media print{
  .smi-w{height:auto !important; max-height:none !important; overflow:visible; box-shadow:none}
  .smiw-fussleiste, .smiw-musik-oben, .smiw-fr-seite{display:none !important}
  .smiw-orakel{overflow:visible}
}