/* Silbermuschel Feng Shui – im Silbermuschel-Aussehen, überall Comic Sans MS.
   Ein Bildschirm ohne Scrollen, Leiste unten, und eine kräftige Abwehr
   gegen das Theme (Knöpfe auf volle Breite, Flex mit Lücken, Schatten,
   Sperrschrift, Silbentrennung, blasse Links). */

.sfs-w, .sfs-box, .sfs-druck{
  --w-creme:#faf4e6; --w-perg:#fffdf8; --w-moos:#4f6f52; --w-moos-tief:#2f4434;
  --w-gold:#bfa24f; --w-gold-hell:#e6cf8d; --w-tinte:#33402f; --w-rand:#e3d7bd;
  --w-leise:#5f6f5c; --w-jade:#5d7f62; --w-rose:#c98a7c;
}
.sfs-w, .sfs-w *, .sfs-box, .sfs-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 ------------------------------------------------------ */
.sfs-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(110% 70% at 50% 0%, rgba(230,207,141,.30) 0%, rgba(230,207,141,0) 60%),
    radial-gradient(90% 70% at 100% 100%, rgba(143,191,138,.20) 0%, rgba(143,191,138,0) 70%),
    radial-gradient(70% 60% at 0% 100%, rgba(111,143,181,.14) 0%, rgba(111,143,181,0) 70%),
    linear-gradient(180deg,#fffaf0 0%,#f7f1e2 60%,#eff2e4 100%);
  box-shadow:0 18px 40px -24px rgba(47,68,52,.55), inset 0 0 0 4px rgba(255,255,255,.6);
  height:calc(100vh - 24px); height:calc(100svh - 24px); max-height:860px; min-height:520px;
  display:flex; flex-direction:column;
}
.sfs-w-licht{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none}
.sfs-w-buehne{position:relative; z-index:1; flex:1 1 auto; min-height:0; display:flex; flex-direction:column; overflow:auto; padding:16px 24px 10px}
.sfs-szene{flex:1 1 auto; min-height:0; display:flex; flex-direction:column; animation:sfsRein .6s cubic-bezier(.2,.7,.2,1) both}
.sfs-szene.raus{animation:sfsRaus .26s ease both}
@keyframes sfsRein{from{opacity:0;transform:translateY(12px) scale(.99)}to{opacity:1;transform:none}}
@keyframes sfsRaus{to{opacity:0;transform:translateY(-8px)}}
@keyframes sfsAuf{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes sfsPop{0%{transform:scale(0)}70%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes sfsDreh{to{transform:rotate(360deg)}}
@keyframes sfsFluss{to{stroke-dashoffset:-24}}

.sfs-w h2,.sfs-w h3,.sfs-w h4{color:var(--w-moos-tief); margin:0; line-height:1.22; font-weight:700; padding:0; border:0; background:none; text-align:left}
.sfs-w h2:focus,.sfs-w h3:focus{outline:none}
.sfs-w h2{font-size:clamp(1.35rem,2.5vw,1.85rem)}
.sfs-w h3{font-size:1.2rem}
.sfs-w p{margin:0; line-height:1.5}
.sfs-w ul{margin:0; padding:0}
.sfs-w a{color:var(--w-moos) !important; opacity:1 !important}
.sfs-w svg{overflow:visible; max-width:100%}
.sfs-w .sfs-ic{width:1.1em; height:1.1em; display:inline-block; vertical-align:-.16em; flex:0 0 auto}
.sfs-unter{color:var(--w-leise); font-size:.95rem}
.sfs-hinweis-klein{font-size:.82rem !important; color:var(--w-leise); line-height:1.4 !important}
.sfs-hinweis-text{font-size:.9rem !important; color:var(--w-leise); line-height:1.45 !important; min-height:2.9em}
.sfs-feldname{font-weight:700; color:var(--w-moos-tief); font-size:.95rem !important; margin:0 0 6px !important}
.sfs-feldname-inline{font-weight:700; color:var(--w-moos-tief); font-size:.9rem; display:inline-flex; align-items:center; gap:5px; margin-right:4px}

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

.sfs-w .sfs-knopf{
  display:inline-flex !important; align-items:center; justify-content:center; gap:8px !important;
  font-size:.98rem !important; padding:8px 18px !important; min-height:40px !important; line-height:1.15 !important; text-decoration:none !important; white-space:nowrap;
  border:1px solid #b79a48 !important; border-radius:999px !important;
  background:linear-gradient(180deg,#fdf8ec 0%,#f0e5c9 100%) !important; color:#23361f !important;
  transition:background .25s, color .25s, transform .2s}
.sfs-w .sfs-knopf:not(:disabled):hover,.sfs-w .sfs-knopf:focus-visible{background:var(--w-moos) !important; color:#f3efe2 !important; border-color:var(--w-moos-tief) !important; transform:translateY(-1px)}
.sfs-w .sfs-knopf.haupt{background:var(--w-moos) !important; color:#f6f1e3 !important; border-color:var(--w-moos-tief) !important}
.sfs-w .sfs-knopf.haupt:not(:disabled):hover{background:var(--w-moos-tief) !important}
.sfs-w .sfs-klein{padding:6px 14px !important; min-height:36px !important; font-size:.9rem !important}
.sfs-w .sfs-gross{font-size:1.06rem !important; padding:10px 22px !important}
.sfs-w .sfs-pfeil-knopf{width:46px !important; padding:0 !important}
.sfs-w .sfs-link{display:inline-flex !important; align-items:center; gap:6px !important; background:none !important; border:0 !important;
  color:var(--w-moos) !important; text-decoration:underline !important; text-underline-offset:3px; padding:4px 2px !important; font-size:.92rem !important; align-self:flex-start}
.sfs-w .sfs-link:hover{color:var(--w-moos-tief) !important}
.sfs-w .sfs-mini-knopf{display:inline-flex !important; align-items:center; justify-content:center; width:30px !important; height:30px !important; padding:0 !important;
  border-radius:50% !important; border:1px solid var(--w-rand) !important; background:#fffdf8 !important; color:var(--w-leise) !important; font-size:1.1rem !important; transition:background .2s,color .2s}
.sfs-w .sfs-mini-knopf:hover{background:#b5584a !important; color:#fff !important; border-color:#b5584a !important}
.sfs-knopfzeile{display:flex !important; gap:8px; align-items:center; flex-wrap:wrap; flex:0 0 auto; margin-top:8px}
.sfs-knopfzeile.sfs-rechts{justify-content:flex-end}
.sfs-knopfzeile.sfs-mitte{justify-content:center}

/* Zurück, Schritte */
.sfs-w .sfs-nav{display:flex !important; gap:10px; align-items:center; margin:0 0 8px; flex:0 0 auto; flex-wrap:wrap}
.sfs-w .sfs-zurueck-knopf{display:inline-flex !important; align-items:center; height:32px !important; padding:0 14px !important; white-space:nowrap;
  border-radius:999px !important; border:1px solid #b79a48 !important; background:rgba(255,253,248,.92) !important; color:#33402f !important; font-size:.86rem !important;
  transition:background .2s,color .2s,transform .2s}
.sfs-w .sfs-zurueck-knopf:hover{background:var(--w-moos) !important; color:#fff !important; transform:translateX(-2px)}
.sfs-schritte{display:flex; gap:4px; align-items:center; margin-left:auto}
.sfs-schritt{display:inline-flex; align-items:center; gap:5px; font-size:.8rem; color:#9a9277; padding:2px 10px 2px 3px; border-radius:999px}
.sfs-schritt i{font-style:normal; width:20px; height:20px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; border:1px solid #d8c99d; font-size:.72rem}
.sfs-schritt.an{color:var(--w-moos-tief); background:#eef3e6; font-weight:700}
.sfs-schritt.an i{background:var(--w-moos); color:#fff; border-color:var(--w-moos)}
.sfs-schritt.fertig i{background:#e6cf8d; border-color:#e6cf8d; color:#5a4a1a}

/* Kopf einer Seite */
.sfs-kopf{display:flex; gap:12px; align-items:center; flex:0 0 auto; margin:0 0 10px}
.sfs-kopf-ic{flex:0 0 46px; width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.45rem;
  color:var(--w-moos); background:radial-gradient(circle at 35% 30%,#fff,#e9efd9 70%); border:1px solid #cfd8bd}
.sfs-kopf-text{min-width:0}
.sfs-kopf .sfs-unter{font-size:.9rem; line-height:1.4}

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

/* --- Fußleiste ----------------------------------------------------------- */
.sfs-w .sfs-fussleiste{position:relative; z-index:5; flex:0 0 auto; display:flex !important; justify-content:center; justify-content:safe center; gap:5px; flex-wrap:nowrap;
  padding:8px 12px 10px; border-top:1px solid rgba(227,215,189,.8); background:rgba(255,253,248,.55); margin:0}
.sfs-w .sfs-leisten-knopf{display:inline-flex !important; align-items:center; justify-content:center; gap:6px !important;
  height:36px !important; padding:0 12px !important; border-radius:999px !important; font-size:.84rem !important; white-space:nowrap;
  border:1px solid transparent !important; background:transparent !important; color:#4a5a46 !important; transition:background .2s,color .2s,border-color .2s; min-width:0}
.sfs-w .sfs-leisten-knopf span{overflow:hidden; text-overflow:ellipsis; max-width:150px}
.sfs-w .sfs-leisten-knopf:hover{background:#fffdf8 !important; border-color:var(--w-rand) !important; color:var(--w-moos-tief) !important}
.sfs-w .sfs-leisten-knopf[aria-current="page"]{background:var(--w-moos) !important; color:#f6f1e3 !important; border-color:var(--w-moos-tief) !important}
.sfs-w .sfs-musik-knopf{margin-left:10px !important; border-color:#d8c99d !important; background:rgba(255,253,248,.9) !important}
.sfs-w .sfs-musik-knopf[aria-pressed="false"]{color:#9a9277 !important}

/* --- Fenster über dem Kasten -------------------------------------------- */
.sfs-overlay{position:absolute; inset:0; z-index:20; background:rgba(47,68,52,.34); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:14px; animation:sfsRein .35s both}
.sfs-overlay-kasten{position:relative; max-width:700px; width:100%; max-height:100%; overflow:auto; background:#fffdf8; 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:#b79a48 #f3ead2}
.sfs-overlay-kasten.klein{max-width:520px}
.sfs-overlay-kasten h3{margin:2px 40px 8px 0 !important}
.sfs-overlay-kasten p{margin:0 0 8px !important; font-size:.95rem}
.sfs-w .sfs-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 #b79a48 !important; background:#fff !important;
  color:var(--w-moos-tief) !important; font-size:1.35rem !important; line-height:1 !important}
.sfs-w .sfs-overlay-zu:hover{background:var(--w-moos) !important; color:#fff !important}
.sfs-quellen{list-style:disc; margin:0 0 10px 20px !important}
.sfs-quellen li{margin:0 0 4px; font-size:.9rem}

/* --- Farbtupfer, Chips, Reiter ------------------------------------------ */
.sfs-mini-tupfen{display:inline-block; width:.95em; height:.95em; border-radius:50%; border:1px solid rgba(0,0,0,.18); vertical-align:-.12em; margin:0 4px 0 6px}
.sfs-tupfen{flex:0 0 auto; display:inline-block; width:30px; height:30px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.15) !important}
.sfs-tupfen.gross{width:46px; height:46px}
.sfs-chips{display:flex !important; flex-wrap:wrap; gap:6px; align-items:center}
.sfs-w .sfs-chip{display:inline-flex !important; align-items:center; padding:6px 13px !important; border-radius:999px !important; font-size:.9rem !important;
  border:1px solid var(--w-rand) !important; background:rgba(255,253,248,.92) !important; color:var(--w-tinte) !important; transition:background .2s,border-color .2s,transform .2s}
.sfs-w .sfs-chip:hover{border-color:var(--w-gold) !important; transform:translateY(-1px)}
.sfs-w .sfs-chip[aria-pressed="true"]{background:var(--w-moos) !important; color:#fff !important; border-color:var(--w-moos-tief) !important}
.sfs-w .sfs-chip.gross{padding:8px 18px !important; font-size:1rem !important}
.sfs-chips.klein .sfs-chip{padding:4px 10px !important; font-size:.84rem !important}
.sfs-reiter{display:flex !important; gap:4px; border-bottom:2px solid var(--w-rand); flex:0 0 auto; margin:6px 0 0; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none}
.sfs-reiter::-webkit-scrollbar{display:none}
.sfs-w .sfs-reiter-knopf{display:inline-flex !important; align-items:center; gap:5px !important; padding:7px 12px !important; font-size:.9rem !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}
.sfs-w .sfs-reiter-knopf:hover{color:var(--w-moos-tief) !important; background:rgba(255,253,248,.7) !important}
.sfs-w .sfs-reiter-knopf[aria-selected="true"]{color:var(--w-moos-tief) !important; border-bottom-color:var(--w-gold) !important; font-weight:700; background:rgba(255,253,248,.85) !important}
.sfs-zahl{font-style:normal; font-size:.72rem; min-width:18px; height:18px; line-height:18px; text-align:center; border-radius:9px; background:var(--w-moos); color:#fff; padding:0 4px; font-weight:400}
.sfs-zahl:empty{display:none}
.sfs-w .sfs-eingabe, .sfs-w .sfs-auswahl{font-size:1rem !important; padding:8px 12px !important; height:42px !important; border-radius:12px !important; border:1px solid #b79a48 !important;
  background:#fffdf8 !important; color:var(--w-tinte) !important; width:100% !important; outline:none; min-width:0; line-height:1.2 !important}
.sfs-w .sfs-eingabe:focus,.sfs-w .sfs-auswahl:focus{border-color:var(--w-moos) !important}
.sfs-w .sfs-auswahl{cursor:pointer; padding-right:6px !important}

/* ============ 1. START ============ */
.sfs-start{display:grid !important; grid-template-columns:minmax(0,.95fr) minmax(0,1.1fr); gap:22px}
.sfs-start-bild{position:relative; border-radius:22px; overflow:hidden; border:1px solid var(--w-rand); min-height:0; background:#f3efe0}
.sfs-landschaft{position:absolute; inset:0; width:100%; height:100%; display:block}
.sfs-taiji{animation:sfsDreh 40s linear infinite; transform-box:fill-box; transform-origin:center}
.sfs-orbit-kreis{animation:sfsDreh 30s linear infinite reverse}
.sfs-orbit{animation:sfsPop .8s .3s both; transform-box:fill-box; transform-origin:center}
.sfs-wellen path{animation:sfsWelle 7s linear infinite}
.sfs-wellen path:nth-child(2){animation-duration:9s; animation-direction:reverse}
.sfs-wellen path:nth-child(3){animation-duration:11s}
@keyframes sfsWelle{to{transform:translateX(60px)}}
.sfs-wind path{stroke-dasharray:14 10; animation:sfsWind 4s linear infinite}
@keyframes sfsWind{to{stroke-dashoffset:-48}}
.sfs-sonne{animation:sfsAtmen 6s ease-in-out infinite}
@keyframes sfsAtmen{0%,100%{opacity:.55}50%{opacity:.85}}
.sfs-start-panel{display:flex; flex-direction:column; justify-content:center; gap:10px; min-height:0}
.sfs-w .sfs-seitentitel{font-size:clamp(1.7rem,3.2vw,2.4rem) !important}
.sfs-einleitung{font-size:1rem !important}
.sfs-w .sfs-heute{display:flex !important; align-items:center; gap:12px !important; width:100% !important; text-align:left;
  padding:8px 12px 8px 8px !important; border-radius:16px !important; border:1px solid #e6cf8d !important;
  background:linear-gradient(90deg,#fbf3dc,#fffdf8) !important; color:var(--w-tinte) !important; font-size:.95rem !important; line-height:1.35 !important;
  transition:transform .25s, border-color .25s; animation:sfsAuf .6s .1s both}
.sfs-w .sfs-heute:hover{transform:translateY(-2px); border-color:var(--w-gold) !important}
.sfs-heute-ic{flex:0 0 44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.4rem;
  background:radial-gradient(circle at 35% 30%,#fff,var(--el) 140%); color:var(--el-tief); border:1px solid var(--el)}
.sfs-heute-text{display:block; min-width:0}
.sfs-heute-text small{display:block; font-size:.76rem; color:#8a6d22; font-weight:700}
.sfs-kacheln{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.sfs-w .sfs-kachel{position:relative; display:flex !important; align-items:center; gap:10px !important; width:100% !important; text-align:left;
  padding:9px 10px !important; border-radius:16px !important; border:1px solid var(--w-rand) !important; background:rgba(255,253,248,.9) !important;
  color:var(--w-tinte) !important; line-height:1.25 !important; transition:transform .25s,border-color .25s,background .25s; animation:sfsAuf .55s both}
.sfs-w .sfs-kachel:hover{transform:translateY(-2px); border-color:var(--w-gold) !important; background:#fffdf8 !important}
.sfs-w .sfs-kachel.herz{grid-column:1 / -1; background:linear-gradient(100deg,#eef3e6,#fffdf8 70%) !important; border-color:#cfd8bd !important}
.sfs-kachel-ic{flex:0 0 40px; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.3rem;
  background:radial-gradient(circle at 35% 30%,#fff,#e9efd9 70%); border:1px solid #cfd8bd; color:var(--w-moos)}
.sfs-kachel.herz .sfs-kachel-ic{background:conic-gradient(#8fbf8a 0 72deg,#e8907e 0 144deg,#e3c27a 0 216deg,#c4c8cf 0 288deg,#6f8fb5 0); color:#fff; border-color:#fff}
.sfs-kachel-text{display:block; min-width:0}
.sfs-kachel-text b{display:block; font-size:1rem; color:var(--w-moos-tief)}
.sfs-kachel-text small{display:block; font-size:.8rem; color:var(--w-leise)}

/* ============ Diagramm der Elemente ============ */
.sfs-dia-box{position:relative; min-height:0; display:flex; align-items:center; justify-content:center}
.sfs-diagramm{width:100%; height:100%; max-height:100%; display:block}
.sfs-knoten{cursor:pointer; outline:none}
.sfs-blase{animation:sfsPop .7s cubic-bezier(.3,1.4,.5,1) both; transform-box:fill-box; transform-origin:center}
.sfs-knoten-kreis{transition:stroke .2s, stroke-width .2s}
.sfs-knoten:hover .sfs-knoten-kreis,.sfs-knoten:focus .sfs-knoten-kreis{stroke:#bfa24f; stroke-width:4}
.sfs-knoten.an .sfs-knoten-kreis{stroke:#2f4434; stroke-width:3.5}
.sfs-knoten-name{font-size:14px; fill:#2f4434; font-weight:700; paint-order:stroke; stroke:#fffdf8; stroke-width:3px}
.sfs-knoten-zahl{font-size:13px; fill:#33402f; paint-order:stroke; stroke:#fffdf8; stroke-width:3px}
.sfs-fluss{stroke-dasharray:8 4; animation:sfsFluss 1.6s linear infinite}
.sfs-zyklus-n,.sfs-zyklus-k{transition:opacity .5s}
/* im Ergebnis: Nährkreis leise, Kontrolle nur bei Spannung */
.sfs-ergebnis .sfs-zyklus-n,.sfs-wohnung .sfs-zyklus-n{opacity:.45}
.sfs-ergebnis .sfs-zyklus-k line,.sfs-wohnung .sfs-zyklus-k line{opacity:0}
.sfs-ergebnis .sfs-zyklus-k line.konflikt{opacity:1; stroke:#b5584a; stroke-width:3}
/* im Elemente-Teil: umschaltbar */
.sfs-zyklus.zeige-n .sfs-zyklus-k{opacity:.08}
.sfs-zyklus.zeige-k .sfs-zyklus-n{opacity:.12}
.sfs-zyklus.zeige-k .sfs-zyklus-k line.hervor{stroke:#b5584a; stroke-width:3.4}
.sfs-dia-legende{font-size:.78rem !important; color:var(--w-leise); text-align:center; flex:0 0 auto}
.sfs-dia-legende i{display:inline-block; width:12px; height:12px; border-radius:50%; vertical-align:-1px; margin:0 3px 0 6px}
.sfs-dia-legende i.voll{background:#c9d8b8}
.sfs-dia-legende i.soll{border:1.5px dashed #6c7a63}
.sfs-dia-legende i.konf{border-radius:0; height:3px; width:16px; background:#b5584a; vertical-align:3px}

/* ============ 2. FARBBERATER ============ */
.sfs-balken{display:flex; height:10px; border-radius:6px; overflow:hidden; background:#efe6cf; width:100%}
.sfs-balken i{display:block; height:100%; transition:width .6s cubic-bezier(.3,1,.4,1)}
.sfs-balken.gross{height:16px; border-radius:9px}

/* Wohnung */
.sfs-wohnung-rumpf{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.sfs-wohnung-bilanz{display:flex; flex-direction:column; gap:8px}
.sfs-wohnung-bilanz .sfs-dia-box{flex:1 1 auto}
.sfs-wohnung-satz{font-size:.92rem !important; text-align:center; flex:0 0 auto}
.sfs-wohnung-liste{display:flex; flex-direction:column; min-height:0}
.sfs-raumliste{display:flex; flex-direction:column; gap:7px; overflow:auto; min-height:0; flex:0 1 auto; padding:2px 4px 2px 0}
.sfs-raumzeile{display:flex; gap:6px; align-items:center; animation:sfsAuf .45s both}
.sfs-w .sfs-raumkarte{flex:1 1 auto !important; display:grid !important; grid-template-columns:minmax(0,1fr) 44px; grid-template-rows:auto auto; gap:4px 10px !important; align-items:center; text-align:left;
  padding:8px 12px !important; border-radius:14px !important; border:1px solid var(--w-rand) !important; background:rgba(255,253,248,.92) !important; color:var(--w-tinte) !important;
  transition:border-color .2s, transform .2s}
.sfs-w .sfs-raumkarte:hover{border-color:var(--w-gold) !important; transform:translateX(2px)}
.sfs-raumkarte-kopf{display:flex; gap:8px; align-items:baseline; min-width:0; overflow:hidden; white-space:nowrap}
.sfs-raumkarte-kopf b{color:var(--w-moos-tief); overflow:hidden; text-overflow:ellipsis}
.sfs-raumkarte-kopf small{color:var(--w-leise); font-size:.8rem; overflow:hidden; text-overflow:ellipsis}
.sfs-raumkarte .sfs-balken{grid-column:1; grid-row:2}
.sfs-wert-klein{grid-column:2; grid-row:1 / 3; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700;
  background:#eef3e6; color:var(--w-moos-tief); border:2px solid #c9d8b8; font-size:.92rem}
.sfs-raumzeile.frage .sfs-mini-knopf{background:#b5584a !important; color:#fff !important; border-color:#b5584a !important; animation:sfsWackel .4s}
@keyframes sfsWackel{25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}

/* Raum anlegen */
.sfs-anlegen-rumpf{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.sfs-anlegen-art,.sfs-anlegen-richtung{display:flex; flex-direction:column; gap:8px}
.sfs-anlegen-richtung{align-items:center; text-align:center}
.sfs-anlegen-richtung .sfs-hinweis-text{max-width:340px}
.sfs-anlegen-richtung .sfs-link{align-self:center}
.sfs-richtungswahl{width:min(100%,260px); aspect-ratio:1; flex:0 1 auto; min-height:0}
.sfs-richtungswahl svg{width:100%; height:100%; display:block}
.sfs-sektor{cursor:pointer; outline:none}
.sfs-sektor path,.sfs-sektor circle{transition:filter .2s, opacity .2s}
.sfs-sektor text{font-size:15px; fill:#33402f; font-weight:700; pointer-events:none}
.sfs-sektor:hover path,.sfs-sektor:hover circle,.sfs-sektor:focus path{filter:brightness(.95) saturate(1.4)}
.sfs-richtungswahl .sfs-sektor.an path,.sfs-richtungswahl .sfs-sektor.an circle{fill:var(--w-moos); stroke:#2f4434}
.sfs-richtungswahl .sfs-sektor.an text{fill:#fff}

.sfs-sogehts{margin-top:auto; background:rgba(255,253,248,.75); border:1px solid var(--w-rand); border-radius:16px; padding:10px 14px}
.sfs-sogehts ol{list-style:none !important; margin:0 !important; padding:0 !important; display:flex; flex-direction:column; gap:6px}
.sfs-sogehts li{display:flex; align-items:center; gap:10px; font-size:.9rem; margin:0 !important; animation:sfsAuf .5s both}
.sfs-sogehts li:nth-child(2){animation-delay:.12s} .sfs-sogehts li:nth-child(3){animation-delay:.24s}
.sfs-sogehts li span{flex:0 0 34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#eef3e6; color:var(--w-moos); font-size:1.1rem}
.sfs-sogehts b{color:var(--w-moos-tief); margin-right:4px}
/* Farben eingeben */
.sfs-eingabe-rumpf{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.sfs-eingabe-bild{display:flex; flex-direction:column; gap:8px; justify-content:center}
.sfs-raumbild-box{border-radius:18px; overflow:hidden; border:1px solid var(--w-rand); background:#fff; flex:0 1 auto; min-height:0; display:flex}
.sfs-raumbild{width:100%; height:auto; max-height:100%; display:block}
.sfs-raumbild *{transition:fill .5s}
.sfs-live{flex:0 0 auto; display:flex; flex-direction:column; gap:5px}
.sfs-live-leer{font-size:.85rem; color:var(--w-leise); text-align:center}
.sfs-live-legende{display:flex; flex-wrap:wrap; gap:4px 10px; font-size:.78rem; color:var(--w-leise)}
.sfs-live-legende i{font-style:normal}
.sfs-live-legende i::before{content:""; display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--el); margin-right:4px}
.sfs-eingabe-panel{display:flex; flex-direction:column; min-height:0}
.sfs-w .sfs-raumtitel{font-size:1.35rem !important}
.sfs-raumtitel small{font-size:.85rem; color:var(--w-leise); font-weight:400}
.sfs-eingabe-panel .sfs-hinweis-klein{margin:6px 0 !important}
.sfs-farbliste{display:flex; flex-direction:column; gap:6px; overflow:auto; min-height:0; flex:0 1 auto; padding:2px 4px 2px 0}
.sfs-farbchip{display:flex; align-items:center; gap:6px; animation:sfsAuf .4s both}
.sfs-w .sfs-farbchip-info{flex:1 1 auto !important; display:flex !important; align-items:center; gap:10px !important; text-align:left; padding:5px 10px 5px 6px !important;
  border-radius:999px !important; border:1px solid var(--w-rand) !important; background:rgba(255,253,248,.95) !important; color:var(--w-tinte) !important; min-width:0}
.sfs-farbchip.an .sfs-farbchip-info{border-color:var(--w-gold) !important; background:#fbf3dc !important}
.sfs-farbchip-name{display:flex; flex-direction:column; min-width:0; line-height:1.25}
.sfs-farbchip-name b{font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sfs-el-punkte{font-size:.74rem; color:var(--w-leise); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sfs-el-punkte i{display:inline-block; width:8px; height:8px; border-radius:50%; margin:0 3px 0 4px; vertical-align:0}
.sfs-el-punkte i:first-child{margin-left:0}
.sfs-w .sfs-farbe-plus{display:inline-flex !important; align-items:center; justify-content:center; gap:8px !important; padding:8px 14px !important; border-radius:999px !important;
  border:2px dashed #cdbb8a !important; background:transparent !important; color:var(--w-moos) !important; font-size:.95rem !important; transition:background .2s,border-color .2s}
.sfs-w .sfs-farbe-plus:hover{background:#fffdf8 !important; border-color:var(--w-moos) !important}
.sfs-grund{font-size:.82rem !important; color:var(--w-leise); line-height:1.4 !important; margin:6px 0 0 !important; min-height:1.2em; flex:0 0 auto}
.sfs-grund:empty{display:none}

/* Der Wähler */
.sfs-waehler-kasten{max-width:680px; height:min(560px,100%); display:flex; flex-direction:column; overflow:hidden !important}
.sfs-waehler{display:flex; flex-direction:column; gap:6px; min-height:0; flex:1 1 auto}
.sfs-waehler h3{flex:0 0 auto}
.sfs-waehler-flaeche{overflow:auto; min-height:0; flex:1 1 auto; padding:8px 4px 4px 0}
.sfs-felder{display:grid; grid-template-columns:repeat(auto-fill,minmax(78px,1fr)); gap:8px}
.sfs-felder.material{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
.sfs-w .sfs-feld{display:flex !important; flex-direction:column; align-items:center; gap:4px !important; padding:6px 4px !important; border-radius:12px !important;
  border:1px solid transparent !important; background:transparent !important; color:var(--w-tinte) !important; transition:background .2s,border-color .2s,transform .2s}
.sfs-w .sfs-feld:hover{background:#fffdf8 !important; border-color:var(--w-rand) !important; transform:translateY(-2px)}
.sfs-feld-farbe{width:46px; height:46px; border-radius:50%; border:3px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.16) !important}
.sfs-felder.material .sfs-feld-farbe{width:100%; height:34px; border-radius:10px}
.sfs-feld-name{font-size:.78rem; line-height:1.2; text-align:center}
.sfs-eigene{display:flex; flex-direction:column; gap:10px; padding-top:4px}
.sfs-eigene-zeile{display:flex; gap:10px; align-items:center}
.sfs-w .sfs-farbfeld{width:76px !important; height:52px !important; padding:2px !important; border:1px solid #b79a48 !important; border-radius:12px !important; background:#fff !important; cursor:pointer}
.sfs-w .sfs-hex{width:130px !important; font-family:monospace !important}
.sfs-eigene-vor{display:flex; gap:12px; align-items:center; font-size:.92rem; line-height:1.4; background:#fbf6ea; border-radius:14px; padding:10px 12px}
.sfs-eigene-vor small{color:var(--w-leise); font-size:.82rem}
.sfs-eigene .sfs-knopf{align-self:flex-start}

/* Ergebnis */
.sfs-ergebnis-rumpf{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.sfs-ergebnis-links{display:flex; flex-direction:column; gap:4px}
.sfs-ergebnis-links .sfs-dia-box{flex:1 1 auto}
.sfs-gespeichert{font-size:.76rem !important; color:var(--w-moos); text-align:center; flex:0 0 auto}
.sfs-ergebnis-panel{display:flex; flex-direction:column; min-height:0}
.sfs-ergebnis-kopf{display:flex; gap:12px; align-items:center; flex:0 0 auto}
.sfs-wert{position:relative; flex:0 0 58px; width:58px; height:58px}
.sfs-wert svg{width:100%; height:100%; display:block}
.sfs-wert b{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:1.15rem; color:var(--w-moos-tief)}
.sfs-wert-ring{animation:sfsRing 1.4s cubic-bezier(.3,1,.4,1) both}
@keyframes sfsRing{from{stroke-dasharray:0 100}}
.sfs-ergebnis-kopf .sfs-unter{font-size:.86rem}
.sfs-tafel{flex:1 1 auto; min-height:0; overflow:auto; padding:10px 6px 4px 0}
.sfs-tafel.neu > *{animation:sfsAuf .45s both}
.sfs-raum-text{font-size:.88rem !important; color:var(--w-leise); margin:0 0 8px !important; font-style:italic}
.sfs-befunde{list-style:none !important; display:flex; flex-direction:column; gap:6px}
.sfs-befunde li{display:flex; gap:9px; align-items:flex-start; font-size:.9rem; line-height:1.42; padding:7px 10px; border-radius:12px; background:rgba(255,253,248,.92);
  border:1px solid var(--w-rand); border-left:4px solid var(--el,#bfa24f); margin:0 !important}
.sfs-befunde li .sfs-ic{font-size:1.25rem; color:var(--w-moos-tief); margin-top:1px}
.sfs-befunde li.konflikt{border-left-color:#b5584a}
.sfs-befunde li.gut{border-left-color:var(--w-moos)}
.sfs-palette{display:flex; flex-direction:column; gap:8px}
.sfs-pal-zeile{display:flex; gap:12px; align-items:center; animation:sfsAuf .5s both}
.sfs-pal-farbe{flex:0 0 74px; height:52px; border-radius:14px; display:flex; align-items:flex-end; justify-content:center; padding-bottom:4px; font-size:.72rem; font-weight:700;
  border:1px solid rgba(0,0,0,.12); box-shadow:inset 0 0 0 3px rgba(255,255,255,.5) !important}
.sfs-pal-farbe.haupt{flex-basis:90px; height:60px}
.sfs-pal-text{display:block; min-width:0; font-size:.92rem; line-height:1.35}
.sfs-pal-text small{display:block; font-size:.8rem; color:var(--w-leise); margin-top:2px}
.sfs-el-marke{font-style:normal; font-size:.72rem; padding:1px 8px; border-radius:999px; background:var(--el); color:var(--el-tief); margin-left:4px; white-space:nowrap}
.sfs-beispiel{font-size:.86rem !important; background:#fbf3dc; border-radius:12px; padding:7px 10px; margin-top:4px !important}
.sfs-material{display:flex; flex-direction:column; gap:8px}
.sfs-mat-karte{display:flex; gap:12px; align-items:flex-start; padding:8px 12px; border-radius:14px; background:var(--el-hell); border:1px solid var(--el)}
.sfs-mat-karte .sfs-form{flex:0 0 40px; width:40px; height:40px}
.sfs-mat-karte b{display:block; color:var(--el-tief)}
.sfs-mat-karte small{display:block; font-size:.82rem; line-height:1.38}
.sfs-mat-karte small i{font-style:normal; font-weight:700}

/* Element-Fenster */
.sfs-el-kopf{display:flex; gap:12px; align-items:center; margin:0 0 8px}
.sfs-el-gross{flex:0 0 56px; width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.9rem;
  background:radial-gradient(circle at 35% 30%,#fff,var(--el-hell) 55%,var(--el) 120%); color:var(--el-tief); border:2px solid var(--el)}
.sfs-el-kopf h3{color:var(--el-tief) !important; margin:0 !important}
.sfs-el-kopf p{font-size:.9rem !important; color:var(--w-leise); margin:0 !important}
.sfs-el-fenster p{font-size:.92rem !important}

/* ============ 3. BAGUA ============ */
.sfs-bagua-rumpf{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.sfs-bagua-links{display:flex; flex-direction:column; gap:8px; align-items:center}
.sfs-tuer-wahl{display:flex !important; flex-wrap:wrap; gap:6px; align-items:center; justify-content:center; flex:0 0 auto}
.sfs-plan{flex:1 1 auto; min-height:0; width:100%; display:flex; align-items:center; justify-content:center}
.sfs-plan-svg{height:100%; width:auto; max-width:100%; aspect-ratio:1; display:block}
.sfs-zone{cursor:pointer; outline:none}
.sfs-zone-flaeche{opacity:.42; transition:opacity .3s, stroke-width .3s; stroke:#fffdf8; stroke-width:0}
.sfs-zone:hover .sfs-zone-flaeche,.sfs-zone:focus .sfs-zone-flaeche{opacity:.68}
.sfs-zone.an .sfs-zone-flaeche{opacity:.85; stroke:#2f4434; stroke-width:3}
.sfs-raster.neu .sfs-zone{animation:sfsZone .55s cubic-bezier(.3,1.3,.5,1) both; transform-box:fill-box; transform-origin:center}
@keyframes sfsZone{from{opacity:0; transform:scale(.6)}to{opacity:1; transform:none}}
.sfs-zone-zahl{font-size:24px; font-weight:700; fill:#2f4434; pointer-events:none}
.sfs-zone-name{font-size:12.5px; fill:#2f4434; pointer-events:none; paint-order:stroke; stroke:rgba(255,253,248,.85); stroke-width:3px}
.sfs-bagua-panel{display:flex; flex-direction:column; justify-content:center; min-height:0}
.sfs-bagua-info{min-height:0; overflow:auto}
.sfs-bagua-leer p{font-size:.95rem !important; margin:0 0 10px !important}
.sfs-zonen-karte{border-radius:18px; padding:14px 16px; background:linear-gradient(160deg,var(--el-hell),#fffdf8 70%); border:1px solid var(--el); border-left:6px solid var(--el)}
.sfs-zonen-karte.neu{animation:sfsAuf .45s both}
.sfs-zonen-kopf{display:flex; gap:12px; align-items:center; margin:0 0 8px}
.sfs-zonen-zahl{flex:0 0 50px; width:50px; height:50px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.6rem; font-weight:700;
  background:var(--el); color:var(--el-tief); border:2px solid #fffdf8; box-shadow:0 0 0 1px var(--el) !important}
.sfs-zonen-kopf h3{color:var(--el-tief) !important}
.sfs-zonen-kopf p{font-size:.86rem !important; color:var(--w-leise)}
.sfs-zonen-karte > p{font-size:.94rem !important; margin:0 0 8px !important}
.sfs-zonen-zeile{display:flex; flex-wrap:wrap; gap:6px 18px; font-size:.88rem; margin:0 0 8px}
.sfs-zonen-zeile > span{display:flex; align-items:center; flex-wrap:wrap; gap:2px}
.sfs-zonen-zeile i{font-style:normal; font-weight:700; margin-right:4px; color:var(--w-moos-tief)}
.sfs-form{width:22px; height:22px; display:inline-block; vertical-align:middle; margin-right:5px; flex:0 0 auto}
.sfs-zonen-karte ul{list-style:none !important; display:flex; flex-direction:column; gap:3px}
.sfs-zonen-karte li{font-size:.9rem; padding-left:18px; position:relative; margin:0 !important}
.sfs-zonen-karte li::before{content:""; position:absolute; left:3px; top:.55em; width:7px; height:7px; border-radius:50%; background:var(--el-tief); opacity:.6}

/* ============ 4. KUA ============ */
.sfs-kua-rumpf{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.sfs-kua-rose{display:flex; align-items:center; justify-content:center; min-height:0}
.sfs-rose{height:100%; width:auto; max-width:100%; aspect-ratio:1; display:block}
.sfs-rose .sfs-sektor{animation:sfsZone .5s both; transform-box:fill-box; transform-origin:center}
.sfs-rose .sfs-sektor.an path{stroke:#2f4434; stroke-width:3}
.sfs-rose-r{font-size:17px; font-weight:700; fill:#33402f; pointer-events:none}
.sfs-rose-n{font-size:13px; fill:#4a5a46; pointer-events:none}
.sfs-rose .gut .sfs-rose-n{fill:#2f5f2b}
.sfs-rose .schlecht .sfs-rose-n{fill:#9a4a3c}
.sfs-rose-kua{font-size:40px; font-weight:700; fill:#2f4434}
.sfs-nadel{transform:rotate(var(--ziel,20deg)); transition:transform 1.4s cubic-bezier(.3,1.5,.5,1)}
.sfs-nadel.sucht{animation:sfsSuchen 3.5s ease-in-out infinite}
@keyframes sfsSuchen{0%,100%{transform:rotate(-18deg)}50%{transform:rotate(28deg)}}
.sfs-kua-panel{display:flex; flex-direction:column; justify-content:center; min-height:0}
.sfs-kua-form{display:flex; flex-direction:column; gap:8px; animation:sfsAuf .5s both}
.sfs-datum{display:grid !important; grid-template-columns:78px minmax(0,1fr) 96px; gap:8px; margin:0 0 6px}
.sfs-kua-form .sfs-knopf{align-self:flex-start; margin-top:4px !important}
.sfs-kua-ergebnis{display:flex; flex-direction:column; gap:8px; min-height:0; animation:sfsAuf .5s both}
.sfs-kua-kopf{display:flex; gap:12px; align-items:center; padding:8px 12px; border-radius:16px; background:linear-gradient(120deg,var(--el-hell),#fffdf8); border:1px solid var(--el)}
.sfs-kua-zahl{flex:0 0 54px; width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.8rem; font-weight:700;
  background:var(--el); color:var(--el-tief); border:3px solid #fffdf8; animation:sfsPop .7s both}
.sfs-kua-kopf p{font-size:.88rem !important; color:var(--w-leise)}
.sfs-kua-kopf > div{flex:1 1 auto; min-width:0}
.sfs-w .sfs-kua-anders{flex:0 0 auto}
.sfs-kua-liste{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.sfs-kua-spalte{display:flex; flex-direction:column; gap:4px}
.sfs-kua-spalte .sfs-feldname{font-size:.84rem !important; margin:0 0 2px !important}
.sfs-w .sfs-kua-richtung{display:flex !important; align-items:center; gap:8px !important; width:100% !important; text-align:left; padding:4px 8px !important; border-radius:10px !important;
  border:1px solid var(--w-rand) !important; background:rgba(255,253,248,.92) !important; color:var(--w-tinte) !important; font-size:.84rem !important; line-height:1.2 !important; transition:background .2s,border-color .2s}
.sfs-w .sfs-kua-richtung b{flex:0 0 30px; text-align:center; border-radius:7px; padding:2px 0; font-size:.86rem}
.sfs-kua-spalte.gut .sfs-kua-richtung b{background:#d6e8cb; color:#2f5f2b}
.sfs-kua-spalte.schlecht .sfs-kua-richtung b{background:#f3d6cc; color:#8a3e30}
.sfs-w .sfs-kua-richtung:hover,.sfs-w .sfs-kua-richtung.an{border-color:var(--w-gold) !important; background:#fbf3dc !important}
.sfs-kua-detail{font-size:.88rem !important; line-height:1.42 !important; padding:8px 12px; border-radius:12px; background:#fbf6ea; border-left:4px solid var(--w-gold); min-height:3.8em}
.sfs-kua-detail.gut{border-left-color:#8fbf8a}
.sfs-kua-detail.schlecht{border-left-color:#e8907e}
.sfs-kua-detail.neu{animation:sfsAuf .4s both}

/* ============ 5. ELEMENTE ============ */
.sfs-elemente-rumpf{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.sfs-el-links{display:flex; flex-direction:column; gap:6px; align-items:center}
.sfs-el-links .sfs-dia-box{flex:1 1 auto; width:100%}
.sfs-schalter{display:inline-flex !important; padding:3px; border-radius:999px; background:#efe6cf; flex:0 0 auto}
.sfs-w .sfs-schalter-knopf{display:inline-flex !important; padding:6px 16px !important; border-radius:999px !important; border:0 !important; background:transparent !important; color:var(--w-leise) !important; font-size:.9rem !important; transition:background .25s,color .25s}
.sfs-w .sfs-schalter-knopf[aria-selected="true"]{background:var(--w-moos) !important; color:#fff !important}
.sfs-zyklus-satz{font-size:.86rem !important; text-align:center; color:var(--w-leise); flex:0 0 auto; min-height:2.8em; max-width:460px}
.sfs-zyklus-satz b{color:var(--w-moos-tief)}
.sfs-el-panel{display:flex; flex-direction:column; justify-content:center; min-height:0}
.sfs-el-karte{border-radius:18px; padding:14px 16px; background:linear-gradient(160deg,var(--el-hell,#fff),#fffdf8 75%); border:1px solid var(--el,#e3d7bd); overflow:auto; min-height:0}
.sfs-el-karte.neu{animation:sfsAuf .45s both}
.sfs-el-raster{display:grid; grid-template-columns:1fr 1fr; gap:6px 14px; margin:0 0 8px}
.sfs-el-raster > div{font-size:.88rem; line-height:1.35}
.sfs-el-raster > div.breit{grid-column:1 / -1}
.sfs-el-raster i{display:block; font-style:normal; font-size:.74rem; color:var(--el-tief,#5f6f5c); font-weight:700}
.sfs-form-zeile{display:inline-flex; align-items:center}
.sfs-el-balance{display:flex; flex-direction:column; gap:4px; font-size:.84rem !important; color:var(--w-leise); border-top:1px dashed var(--el,#e3d7bd); padding-top:6px}

/* ============ 6. GESCHICHTE ============ */
.sfs-zeitleiste{position:relative; display:flex !important; gap:0; flex:0 0 auto; overflow-x:auto; scrollbar-width:none; margin:0 0 10px; padding:2px 0}
.sfs-zeitleiste::-webkit-scrollbar{display:none}
.sfs-zeitleiste::before{content:""; position:absolute; left:18px; right:18px; top:12px; height:2px; background:#e3d7bd}
.sfs-w .sfs-zeitpunkt{position:relative; flex:1 0 82px !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:.7rem !important; line-height:1.15 !important; text-align:center}
.sfs-zeitpunkt i{width:14px; height:14px; border-radius:50%; background:#fffdf8; border:2px solid #cdbb8a; transition:transform .3s, background .3s}
.sfs-zeitpunkt.vorbei i{background:#e6cf8d}
.sfs-zeitpunkt.an i{background:var(--w-moos); border-color:var(--w-moos); transform:scale(1.35)}
.sfs-w .sfs-zeitpunkt.an{color:var(--w-moos-tief) !important; font-weight:700}
.sfs-hist-buehne{flex:1 1 auto; min-height:0; position:relative; overflow:hidden}
.sfs-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,253,248,.85); border:1px solid var(--w-rand); border-radius:20px; padding:16px 20px}
.sfs-hist-karte.von-rechts{animation:sfsVonRechts .55s cubic-bezier(.2,.8,.2,1) both}
.sfs-hist-karte.von-links{animation:sfsVonLinks .55s cubic-bezier(.2,.8,.2,1) both}
@keyframes sfsVonRechts{from{opacity:0; transform:translateX(40px) rotate(1deg)}to{opacity:1; transform:none}}
@keyframes sfsVonLinks{from{opacity:0; transform:translateX(-40px) rotate(-1deg)}to{opacity:1; transform:none}}
.sfs-hist-bild{margin:0; height:100%; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center}
.sfs-hist-bild img{display:block; max-width:100%; max-height:100%; min-height:0; object-fit:contain; border-radius:14px; background:#fbf6ea; border:1px solid var(--w-rand) !important; padding:0; margin:0 !important; box-shadow:none !important}
.sfs-hist-bild.ist-foto img{object-fit:cover; filter:sepia(.2)}
.sfs-hist-bild figcaption{font-size:.72rem; color:var(--w-leise); margin-top:4px; text-align:center; font-style:italic}
.sfs-hist-text{min-height:0; max-height:100%; overflow:auto; padding-right:4px}
.sfs-hist-jahr{display:inline-block; font-size:.8rem; padding:2px 12px; border-radius:999px; background:#e6cf8d; color:#5a4a1a; font-weight:700; margin:0 0 6px}
.sfs-hist-text h3{font-size:1.3rem !important; margin:0 0 8px !important}
.sfs-hist-text p{font-size:.97rem !important; line-height:1.6 !important}
.sfs-jahr{font-weight:700; border-bottom:1px solid #bfa24f}
.sfs-zaehler{font-size:.85rem; color:var(--w-leise); min-width:54px; text-align:center}
.sfs-w .sfs-quellen-knopf{margin-left:14px !important; font-size:.82rem !important; align-self:center}

/* ============ 7. TAGESIMPULS ============ */
.sfs-impuls{align-items:center; justify-content:center; gap:10px}
.sfs-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(--el-hell),#fffdf8 75%); border:1px solid var(--el); box-shadow:0 16px 34px -24px rgba(47,68,52,.6);
  animation:sfsAuf .7s both}
.sfs-impuls-zeichen{width:84px; height:84px; margin:0 auto 10px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:2.6rem;
  background:radial-gradient(circle at 35% 30%,#fff,var(--el-hell) 55%,var(--el) 125%); color:var(--el-tief); border:2px solid var(--el); animation:sfsSchweben 5s ease-in-out infinite}
@keyframes sfsSchweben{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.sfs-impuls-datum{font-size:.85rem !important; color:var(--w-leise); margin:0 0 2px !important}
.sfs-w .sfs-impuls-titel{text-align:center !important; font-size:1.1rem !important; color:var(--el-tief) !important; margin:0 0 10px !important}
.sfs-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-moos-tief); font-style:normal !important; quotes:none}
.sfs-impuls-text::before,.sfs-impuls-text::after{content:none !important}
.sfs-impuls-el{font-size:.86rem !important; color:var(--w-leise)}
.sfs-impuls-reihe{display:flex; gap:10px; justify-content:center; flex:0 0 auto}
.sfs-impuls-reihe span{width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.15rem; color:var(--el-tief);
  background:#fffdf8; border:1px solid var(--el); opacity:.55; animation:sfsPop .6s both}
.sfs-impuls-reihe span.an{opacity:1; background:var(--el); transform:scale(1.15); box-shadow:0 0 0 4px rgba(255,253,248,.9), 0 0 0 6px var(--el) !important}

/* ============ Box [fengshui-box] ============ */
.sfs-box{display:flex; gap:20px; align-items:center; max-width:760px; margin:20px auto; padding:18px 22px; border-radius:22px;
  border:1px solid #e3d7bd; background:linear-gradient(135deg,#fffaf0,#eef2e4); box-shadow:0 12px 28px -20px rgba(47,68,52,.6); color:#33402f; text-align:left}
.sfs-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; animation:sfsDreh 60s linear infinite}
.sfs-box-text{min-width:0}
.sfs-box h3{margin:0 0 4px !important; padding:0 !important; color:#2f4434; font-size:1.25rem; line-height:1.25; border:0; background:none}
.sfs-box p{margin:0 0 12px !important; line-height:1.5; font-size:1rem}
.sfs-box a.sfs-box-knopf,.sfs-box a.sfs-box-knopf:visited{display:inline-flex !important; align-items:center; padding:9px 22px !important; border-radius:999px !important;
  background:#4f6f52 !important; color:#f6f1e3 !important; border:1px solid #2f4434 !important; text-decoration:none !important; opacity:1 !important; font-size:1rem; box-shadow:none !important; transition:background .2s}
.sfs-box a.sfs-box-knopf:hover,.sfs-box a.sfs-box-knopf:focus{background:#2f4434 !important; color:#fff !important}
@media (max-width:560px){ .sfs-box{flex-direction:column; text-align:center} .sfs-box-bild{width:110px; height:110px; flex-basis:auto} }

/* ============ Drucken ============ */
.sfs-druck{display:none}
@media print{
  html.sfs-drucken body > *:not(.sfs-druck){display:none !important}
  html.sfs-drucken .sfs-druck{display:block !important; font-family:"Comic Sans MS","Comic Neue",cursive; color:#222; padding:8mm; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  .sfs-druck h1{font-size:20pt; margin:0 0 1mm; color:#2f4434}
  .sfs-druck h2{font-size:13pt; margin:5mm 0 2mm; color:#2f4434}
  .sfs-druck-unter{color:#666; margin:0 0 4mm}
  .sfs-druck-zwei{display:flex; gap:8mm; align-items:flex-start}
  .sfs-druck-zwei > div:first-child{flex:0 0 75mm}
  .sfs-druck .sfs-raumbild{width:75mm; height:auto}
  .sfs-druck-bilanz{border-collapse:collapse}
  .sfs-druck-bilanz td{vertical-align:bottom; text-align:center; padding:0 3mm; font-size:10pt}
  .sfs-druck-bilanz td span{display:block; width:12mm; margin:0 auto 1mm; border-radius:2mm 2mm 0 0}
  .sfs-druck-pal{display:flex; gap:4mm; align-items:center; margin:0 0 2mm; font-size:10.5pt}
  .sfs-druck-pal span{flex:0 0 12mm; height:9mm; border-radius:2mm; border:1px solid #999}
  .sfs-druck .sfs-mini-tupfen{display:inline-block; width:3.5mm; height:3.5mm; border-radius:50%; border:1px solid #999; margin:0 1mm 0 2mm; vertical-align:-.5mm}
  .sfs-druck-raum{margin:0 0 3mm; page-break-inside:avoid}
  .sfs-druck li{margin:0 0 1mm}
  .sfs-druck-fuss{margin-top:6mm; color:#777; font-size:9pt}
}

/* ============ Niedrige Bildschirme am Rechner ============ */
@media (min-width:761px) and (max-height:820px){
  .sfs-w-buehne{padding:12px 20px 8px}
  .sfs-kopf{margin-bottom:6px}
  .sfs-kopf-ic{flex-basis:40px; width:40px; height:40px}
  .sfs-w .sfs-kachel{padding:7px 10px !important}
  .sfs-einleitung{font-size:.94rem !important}
  .sfs-impuls-karte{padding:18px 24px 16px}
  .sfs-impuls-zeichen{width:70px; height:70px; font-size:2.2rem}
}

/* ============ Handy ============ */
@media (max-width:760px){
  .sfs-w{max-height:none; border-radius:16px; margin:8px auto !important}
  .sfs-w-buehne{padding:10px 12px 6px}
  .sfs-w .sfs-fussleiste{padding:5px 4px 7px; gap:2px; justify-content:space-around}
  .sfs-w .sfs-leisten-knopf{width:40px !important; height:40px !important; padding:0 !important; font-size:1.15rem !important; flex:0 0 40px !important}
  .sfs-w .sfs-leisten-knopf span{display:none}
  .sfs-w .sfs-musik-knopf{margin-left:2px !important}
  .sfs-w h2{font-size:1.2rem}
  .sfs-kopf{gap:9px; margin-bottom:6px}
  .sfs-kopf-ic{flex-basis:34px; width:34px; height:34px; font-size:1.1rem}
  .sfs-kopf .sfs-unter{font-size:.76rem; line-height:1.3}
  .sfs-rumpf{grid-template-columns:1fr !important; gap:8px}
  .sfs-w .sfs-nav{margin-bottom:5px; gap:6px}
  .sfs-w .sfs-zurueck-knopf{height:28px !important; padding:0 10px !important; font-size:.76rem !important}
  .sfs-schritt{font-size:.68rem; padding:1px 6px 1px 2px; gap:3px}
  .sfs-schritt i{width:16px; height:16px; font-size:.62rem}
  .sfs-w .sfs-knopf{font-size:.86rem !important; padding:6px 12px !important; min-height:36px !important; gap:6px !important}
  .sfs-knopfzeile{margin-top:6px; gap:6px}
  .sfs-w .sfs-reiter-knopf{padding:5px 8px !important; font-size:.8rem !important}

  /* Start */
  .sfs-start{grid-template-columns:1fr; grid-template-rows:minmax(80px,1fr) auto; gap:8px}
  .sfs-start-panel{justify-content:flex-start; gap:7px}
  .sfs-w .sfs-seitentitel{font-size:1.4rem !important; text-align:center !important}
  .sfs-einleitung{font-size:.8rem !important; line-height:1.35 !important; text-align:center}
  .sfs-w .sfs-heute{font-size:.8rem !important; padding:5px 8px 5px 5px !important; gap:8px !important; line-height:1.3 !important}
  .sfs-heute-ic{flex-basis:34px; height:34px; font-size:1.05rem}
  .sfs-kacheln{gap:6px}
  .sfs-w .sfs-kachel{padding:6px 7px !important; gap:7px !important; border-radius:13px !important}
  .sfs-kachel-ic{flex-basis:30px; width:30px; height:30px; font-size:1rem}
  .sfs-kachel-text b{font-size:.86rem}
  .sfs-kachel-text small{font-size:.68rem; line-height:1.2}

  .sfs-dia-legende{font-size:.68rem !important}
  .sfs-knoten-name{font-size:21px}
  .sfs-knoten-zahl{font-size:19px; font-weight:700}

  /* Wohnung */
  .sfs-wohnung-rumpf{grid-template-rows:minmax(150px,42%) minmax(0,1fr)}
  .sfs-wohnung-satz{font-size:.76rem !important; line-height:1.3 !important}
  .sfs-w .sfs-raumkarte{padding:5px 9px !important}

  /* Anlegen */
  .sfs-anlegen-rumpf{grid-template-rows:auto minmax(0,1fr); gap:6px}
  .sfs-anlegen-art,.sfs-anlegen-richtung{gap:5px}
  .sfs-w .sfs-chip{padding:4px 10px !important; font-size:.8rem !important}
  .sfs-w .sfs-eingabe,.sfs-w .sfs-auswahl{height:36px !important; font-size:.9rem !important; padding:4px 10px !important}
  .sfs-hinweis-text{font-size:.74rem !important; min-height:0; line-height:1.3 !important}
  .sfs-anlegen-art .sfs-hinweis-text, .sfs-sogehts{display:none}
  .sfs-feldname{font-size:.84rem !important; margin:0 0 2px !important}
  .sfs-richtungswahl{width:auto; height:100%; max-height:190px; min-height:120px}
  .sfs-anlegen-richtung .sfs-link{font-size:.78rem !important; padding:0 2px !important}

  /* Farben */
  .sfs-eingabe-rumpf{grid-template-rows:auto minmax(0,1fr); gap:6px}
  .sfs-eingabe-bild{gap:4px}
  .sfs-raumbild-box{height:128px; border-radius:12px; justify-content:center}
  .sfs-raumbild{height:100%; width:auto; max-width:100%}
  .sfs-live-legende{font-size:.68rem; gap:2px 8px}
  .sfs-w .sfs-raumtitel{font-size:1.05rem !important}
  .sfs-eingabe-panel .sfs-hinweis-klein{margin:3px 0 !important; font-size:.72rem !important}
  .sfs-w .sfs-farbchip-info{padding:3px 8px 3px 4px !important; gap:8px !important}
  .sfs-tupfen{width:24px; height:24px}
  .sfs-farbchip-name b{font-size:.82rem}
  .sfs-w .sfs-farbe-plus{padding:5px 12px !important; font-size:.84rem !important}
  .sfs-grund{font-size:.72rem !important}
  .sfs-waehler-kasten{padding:12px 12px 12px; height:100%}
  .sfs-felder{grid-template-columns:repeat(auto-fill,minmax(64px,1fr)); gap:4px}
  .sfs-feld-farbe{width:38px; height:38px}
  .sfs-feld-name{font-size:.68rem}
  .sfs-felder.material{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}

  /* Ergebnis */
  .sfs-ergebnis-rumpf{grid-template-rows:minmax(150px,36%) minmax(0,1fr); gap:4px}
  .sfs-ergebnis-links{gap:0}
  .sfs-gespeichert{display:none}
  .sfs-wert{flex-basis:46px; width:46px; height:46px}
  .sfs-wert b{font-size:.95rem}
  .sfs-ergebnis-kopf h2{font-size:1.08rem !important}
  .sfs-ergebnis-kopf .sfs-unter{font-size:.72rem; line-height:1.25}
  .sfs-tafel{padding-top:6px}
  .sfs-raum-text{font-size:.74rem !important; margin-bottom:5px !important}
  .sfs-befunde li{font-size:.76rem; padding:5px 8px; gap:6px; line-height:1.35}
  .sfs-befunde li .sfs-ic{font-size:1rem}
  .sfs-pal-zeile{gap:8px}
  .sfs-pal-farbe{flex-basis:56px; height:40px; font-size:.68rem}
  .sfs-pal-farbe.haupt{flex-basis:64px; height:44px}
  .sfs-pal-text{font-size:.8rem}
  .sfs-pal-text small{font-size:.7rem}
  .sfs-beispiel{font-size:.74rem !important}
  .sfs-mat-karte{padding:6px 9px; gap:8px}
  .sfs-mat-karte small{font-size:.72rem}
  .sfs-ergebnis .sfs-knopfzeile .sfs-knopf{padding:5px 10px !important; font-size:.78rem !important}

  /* Bagua */
  .sfs-bagua-rumpf{grid-template-rows:minmax(0,1.15fr) minmax(0,1fr); gap:6px}
  .sfs-bagua-links{gap:5px}
  .sfs-bagua-panel{justify-content:flex-start}
  .sfs-bagua-leer p{font-size:.78rem !important; margin-bottom:5px !important}
  .sfs-zonen-karte{padding:8px 10px; border-left-width:5px}
  .sfs-zonen-kopf{margin-bottom:4px; gap:8px}
  .sfs-zonen-zahl{flex-basis:36px; width:36px; height:36px; font-size:1.2rem}
  .sfs-zonen-kopf h3{font-size:1rem !important}
  .sfs-zonen-kopf p{font-size:.72rem !important}
  .sfs-zonen-karte > p{font-size:.78rem !important; margin-bottom:4px !important; line-height:1.35 !important}
  .sfs-zonen-zeile{font-size:.74rem; margin-bottom:4px; gap:2px 10px}
  .sfs-zonen-karte li{font-size:.76rem}

  /* Kua */
  .sfs-kua-rumpf{grid-template-rows:minmax(150px,38%) minmax(0,1fr); gap:6px}
  .sfs-kua-panel{justify-content:flex-start; overflow:auto}
  .sfs-datum{grid-template-columns:64px minmax(0,1fr) 84px; gap:6px}
  .sfs-w .sfs-chip.gross{padding:5px 14px !important; font-size:.86rem !important}
  .sfs-kua-kopf{padding:5px 9px}
  .sfs-kua-zahl{flex-basis:42px; width:42px; height:42px; font-size:1.4rem}
  .sfs-kua-kopf h3{font-size:1rem !important}
  .sfs-kua-kopf p{font-size:.74rem !important}
  .sfs-kua-ergebnis{gap:5px}
  .sfs-kua-ergebnis .sfs-hinweis-klein{font-size:.7rem !important}
  .sfs-w .sfs-kua-richtung{font-size:.72rem !important; padding:2px 5px !important; gap:5px !important}
  .sfs-w .sfs-kua-richtung b{flex-basis:26px; font-size:.74rem}
  .sfs-kua-liste{gap:6px}
  .sfs-kua-spalte{gap:3px}
  .sfs-kua-spalte .sfs-feldname{font-size:.72rem !important}
  .sfs-kua-detail{font-size:.74rem !important; padding:5px 8px; min-height:0}
  .sfs-w .sfs-kua-anders{width:36px !important; padding:0 !important}
  .sfs-w .sfs-kua-anders span{display:none}

  /* Elemente */
  .sfs-elemente-rumpf{grid-template-rows:minmax(0,1fr) auto; gap:6px}
  .sfs-el-links{gap:3px}
  .sfs-w .sfs-schalter-knopf{padding:4px 12px !important; font-size:.78rem !important}
  .sfs-zyklus-satz{font-size:.7rem !important; min-height:0; line-height:1.3 !important}
  .sfs-el-karte{padding:8px 10px}
  .sfs-el-karte .sfs-el-kopf{margin-bottom:5px; gap:8px}
  .sfs-el-gross{flex-basis:40px; width:40px; height:40px; font-size:1.35rem}
  .sfs-el-kopf h3{font-size:1rem !important}
  .sfs-el-kopf p{font-size:.72rem !important}
  .sfs-el-raster{gap:3px 10px; margin-bottom:4px}
  .sfs-el-raster > div{font-size:.72rem; line-height:1.3}
  .sfs-el-raster i{font-size:.64rem}
  .sfs-el-raster > div.breit:nth-last-child(1){display:none}
  .sfs-el-balance{display:none}
  .sfs-form{width:18px; height:18px}

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

  /* Impuls */
  .sfs-impuls-karte{padding:18px 16px 16px; border-radius:20px}
  .sfs-impuls-zeichen{width:64px; height:64px; font-size:2rem; margin-bottom:6px}
  .sfs-impuls-text{font-size:1.08rem !important}
  .sfs-impuls .sfs-knopfzeile .sfs-link{flex-basis:100%; justify-content:center; align-self:center}
}

@media (max-width:380px){
  .sfs-w .sfs-leisten-knopf{width:36px !important; height:36px !important; flex:0 0 36px !important; font-size:1.05rem !important}
  .sfs-w .sfs-fussleiste{gap:1px; padding:5px 2px 7px}
}

@media (prefers-reduced-motion:reduce){
  .sfs-w *, .sfs-box *{animation:none !important; transition:none !important}
}

/* --- „Ton erlauben" (14.10.2026), im Stil des Zauberwalds --- */
.sfs-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}
.sfs-tonfrage.offen{opacity:1}
.sfs-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}
.sfs-tonfrage.offen .sfs-tonfrage-kasten{transform:none}
.sfs-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}
.sfs-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}
.sfs-tonfrage-reihe{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.sfs-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}
.sfs-tonfrage-reihe .sfs-tonfrage-ja{background:#6f9c80 !important; border-color:#cfe6d6 !important}
.sfs-tonfrage-reihe button:hover,.sfs-tonfrage-reihe button:focus-visible{background:#86b496 !important; outline:none}
@media (prefers-reduced-motion:reduce){.sfs-tonfrage,.sfs-tonfrage-kasten{transition:none}}

/* ======================================================================
   1.0.9 – große Farbbibliothek, Druckansicht/PDF, Leuchtkasten, Leiste
   ====================================================================== */

/* --- Der Farbwähler mit 294 Farben und 81 Materialien ------------------ */
.sfs-waehler-kasten{max-width:760px; height:min(640px,100%)}
.sfs-w .sfs-farbsuche{height:38px !important; flex:0 0 auto; margin:2px 0 0 !important}
.sfs-waehler-flaeche{padding-top:4px}
.sfs-bib{display:flex; flex-direction:column; gap:6px}
.sfs-fam-chips{position:sticky; top:-4px; z-index:2; display:flex !important; gap:5px; flex-wrap:nowrap; overflow-x:auto; padding:4px 0 6px; background:#fffdf8; scrollbar-width:thin}
.sfs-w .sfs-fam{display:inline-flex !important; align-items:center; gap:6px !important; white-space:nowrap; padding:4px 10px 4px 6px !important; border-radius:999px !important;
  border:1px solid var(--w-rand) !important; background:#fffaf0 !important; color:var(--w-tinte) !important; font-size:.8rem !important; flex:0 0 auto}
.sfs-w .sfs-fam small{font-size:.68rem; color:var(--w-leise)}
.sfs-w .sfs-fam[aria-pressed="true"]{background:var(--w-moos) !important; color:#fff !important; border-color:var(--w-moos-tief) !important}
.sfs-w .sfs-fam[aria-pressed="true"] small{color:#e6eedf}
.sfs-fam-tupfen{display:inline-flex}
.sfs-fam-tupfen i{width:11px; height:11px; border-radius:50%; border:1.5px solid #fff; margin-left:-4px; box-shadow:0 0 0 .5px rgba(0,0,0,.2)}
.sfs-fam-tupfen i:first-child{margin-left:0}
.sfs-waehler .sfs-felder{grid-template-columns:repeat(auto-fill,minmax(70px,1fr)); gap:4px}
.sfs-waehler .sfs-felder.material{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
.sfs-w .sfs-waehler .sfs-feld{padding:4px 2px 3px !important; gap:2px !important}
.sfs-waehler .sfs-feld-farbe{width:36px; height:36px; border-width:2px}
.sfs-waehler .sfs-felder.material .sfs-feld-farbe, .sfs-waehler .sfs-feld.ist-material .sfs-feld-farbe{width:100%; height:28px; border-radius:8px}
.sfs-waehler .sfs-feld-name{font-size:.7rem; line-height:1.15}
.sfs-feld-el{display:flex; gap:2px; justify-content:center; height:6px}
.sfs-feld-el i{width:6px; height:6px; border-radius:50%; display:block}
.sfs-treffer{margin:2px 0 4px !important}
.sfs-pal-alt{display:block; font-size:.76rem; color:var(--w-leise); margin-top:2px}
.sfs-pal-alt .sfs-mini-tupfen{margin-left:3px}

/* --- Fußleiste: läuft nie über ----------------------------------------- */
.sfs-w .sfs-leisten-knopf{min-width:0; flex-shrink:0}
.sfs-w .sfs-musik-knopf span{max-width:130px}
.sfs-w .sfs-fussleiste.eng .sfs-leisten-knopf:not(.sfs-musik-knopf):not([aria-current="page"]) span{display:none}
.sfs-w .sfs-fussleiste.eng .sfs-leisten-knopf{padding:0 10px !important}
.sfs-w .sfs-fussleiste.eng .sfs-musik-knopf{margin-left:6px !important}
.sfs-w .sfs-fussleiste.enger .sfs-leisten-knopf span{display:none}
.sfs-w .sfs-fussleiste.enger{gap:2px}

/* --- Geschichte: Bilder wachsen beim Drüberfahren, Klick = Leuchtkasten - */
.sfs-hist-bild{cursor:zoom-in; position:relative; outline:none}
.sfs-hist-bild img{transition:transform .35s ease, box-shadow .35s ease !important; position:relative}
.sfs-hist-bild:hover img,.sfs-hist-bild:focus-visible img{transform:scale(1.07); box-shadow:0 16px 32px -14px rgba(47,68,52,.6) !important; z-index:2}
.sfs-hist-bild::after{content:""; position:absolute; right:8px; bottom:8px; width:30px; height:30px; border-radius:50%; z-index:3; pointer-events:none;
  background:#fffdf8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f6f52' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l5 5M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E") center/18px no-repeat;
  border:1px solid #d8c99d; opacity:.85; transition:opacity .3s}
.sfs-hist-bild:hover::after{opacity:1}
.sfs-leuchtkasten{position:fixed !important; inset:0 !important; z-index:2147482000 !important; display:flex !important; align-items:center; justify-content:center;
  padding:18px !important; margin:0 !important; background:rgba(20,26,20,.82) !important; opacity:0; transition:opacity .25s ease; cursor:zoom-out}
.sfs-leuchtkasten.offen{opacity:1}
.sfs-leuchtkasten figure{margin:0 !important; padding:0 !important; max-width:94vw; max-height:90vh; display:flex; flex-direction:column; align-items:center; transform:scale(.94); transition:transform .3s ease}
.sfs-leuchtkasten.offen figure{transform:none}
.sfs-leuchtkasten img{display:block !important; max-width:94vw !important; max-height:82vh !important; width:min(92vw,130vh,1200px) !important; height:auto !important; object-fit:contain; margin:0 !important;
  border:0 !important; border-radius:12px !important; background:#fbf6ea !important; box-shadow:0 20px 50px -10px rgba(0,0,0,.7) !important}
.sfs-leuchtkasten figcaption{margin-top:10px !important; color:#f3efe2 !important; font:400 .95rem/1.4 "Comic Sans MS","Comic Neue",cursive !important; text-align:center !important; max-width:80vw}
.sfs-leuchtkasten .sfs-leuchtkasten-zu{position:absolute !important; top:14px !important; right:14px !important; width:44px !important; height:44px !important; padding:0 !important; margin:0 !important;
  display:flex !important; align-items:center; justify-content:center; border-radius:50% !important; border:2px solid #f3efe2 !important; background:rgba(0,0,0,.35) !important;
  color:#fff !important; font:400 1.6rem/1 "Comic Sans MS","Comic Neue",cursive !important; box-shadow:none !important; letter-spacing:0 !important; cursor:pointer}

/* --- Druckwahl-Fenster -------------------------------------------------- */
.sfs-druckwahl{display:flex; flex-direction:column; gap:10px}
.sfs-druckwahl h3{display:flex; align-items:center; gap:8px}
.sfs-druck-haken{display:flex !important; gap:8px; align-items:center; font-size:.92rem; margin:0 !important; cursor:pointer}
.sfs-w .sfs-druck-haken input{width:18px !important; height:18px !important; padding:0 !important; flex:0 0 auto; accent-color:#4f6f52}
.sfs-druckwahl .sfs-knopf{align-self:flex-start}

@media (min-width:761px){
  .sfs-fam-chips{flex-wrap:wrap; overflow-x:visible}
}
@media (max-width:760px){
  .sfs-waehler .sfs-felder{grid-template-columns:repeat(auto-fill,minmax(62px,1fr))}
  .sfs-waehler .sfs-feld-farbe{width:32px; height:32px}
  .sfs-waehler .sfs-feld-name{font-size:.68rem}
  .sfs-w .sfs-fam{font-size:.74rem !important}
  .sfs-pal-alt{font-size:.68rem}
  .sfs-hist-bild::after{width:26px; height:26px; background-size:15px}
}

/* --- Die Druckansicht (A4) ---------------------------------------------- */
@media print{
  @page{size:A4; margin:12mm 12mm 14mm}
  html.sfs-drucken, html.sfs-drucken body{background:#fff !important; margin:0 !important; padding:0 !important}
  html.sfs-drucken .sfs-druck{padding:0 !important}
  .sfs-druck, .sfs-druck *{font-family:"Comic Sans MS","Comic Neue","Comic Sans",cursive !important; -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important;
    animation:none !important; transition:none !important; box-sizing:border-box; letter-spacing:normal !important; text-transform:none !important}
  .sfs-druck svg{max-width:none !important; overflow:visible}
  .sfs-druck img{max-width:100% !important; border:0 !important; box-shadow:none !important}
  .sfs-dk-seite{break-after:page; page-break-after:always}
  .sfs-dk-seite:last-child{break-after:auto; page-break-after:auto}
  .sfs-dk-kopf{display:flex; align-items:center; gap:3mm; border-bottom:.6mm solid #bfa24f; padding:0 0 2mm; margin:0 0 4mm}
  .sfs-dk-logo{width:11mm; height:11mm}
  .sfs-dk-kopf b{display:block; font-size:11pt; color:#2f4434}
  .sfs-dk-kopf span{display:block; font-size:8.5pt; color:#6b6b6b}
  .sfs-druck h1{font-size:19pt !important; margin:0 0 1mm !important; color:#2f4434; border:0 !important; padding:0 !important}
  .sfs-druck h2{font-size:12pt !important; margin:4mm 0 2mm !important; color:#2f4434; border:0 !important; padding:0 !important}
  .sfs-dk-unter{font-size:10pt; color:#555; margin:0 0 3mm !important}
  .sfs-dk-zwei{display:flex; gap:6mm; align-items:center; break-inside:avoid}
  .sfs-dk-zwei > div{min-width:0}
  .sfs-dk-bild{flex:0 0 100mm}
  .sfs-dk-bild svg{width:100mm !important; height:auto !important; border:.3mm solid #e3d7bd; border-radius:3mm}
  .sfs-dk-dia{flex:1 1 auto; text-align:center}
  .sfs-dk-dia svg{width:70mm !important; height:68mm !important}
  .sfs-dk-dia.gross{flex:0 0 85mm}
  .sfs-dk-dia.gross svg{width:85mm !important; height:82mm !important}
  .sfs-dk-legende{font-size:8pt; color:#777; margin:1mm 0 0 !important}
  .sfs-druck .sfs-zyklus-n{opacity:.45}
  .sfs-druck .sfs-zyklus-k line{opacity:0}
  .sfs-druck .sfs-zyklus-k line.konflikt{opacity:1; stroke:#b5584a; stroke-width:3}
  .sfs-dk-text{font-size:10pt; color:#444; font-style:italic; margin:3mm 0 0 !important}
  .sfs-dk-tab{width:100%; border-collapse:collapse; font-size:9.5pt; margin:0}
  .sfs-dk-tab th{text-align:left; font-size:8.5pt; color:#6b6b6b; border-bottom:.4mm solid #bfa24f; padding:1mm 2mm}
  .sfs-dk-tab td{border-bottom:.3mm solid #eadfc6; padding:1.3mm 2mm; vertical-align:middle}
  .sfs-dk-tab small{color:#777; font-size:8pt}
  .sfs-dk-tab.klein{font-size:9pt}
  .sfs-dk-tab tr{break-inside:avoid}
  .sfs-dk-feld{display:inline-block; width:10mm; height:6.5mm; border-radius:1.5mm; border:.3mm solid #999}
  .sfs-dk-el{white-space:nowrap; margin-right:2mm; font-size:8.5pt}
  .sfs-dk-el i{display:inline-block; width:2.6mm; height:2.6mm; border-radius:50%; margin-right:.8mm; vertical-align:-.2mm}
  .sfs-dk-block{break-inside:avoid}
  .sfs-dk-befund{margin:0 0 0 5mm !important; padding:0 !important; font-size:9.5pt}
  .sfs-dk-befund li{margin:0 0 1.2mm !important}
  .sfs-dk-pal{display:flex; gap:4mm; align-items:center; margin:0 0 2.5mm; break-inside:avoid; font-size:10pt}
  .sfs-dk-pal small{font-size:8.5pt; color:#555}
  .sfs-dk-pal em{font-style:normal; font-size:8pt; background:#f1ead8; border-radius:2mm; padding:0 1.5mm}
  .sfs-dk-pal-feld{flex:0 0 24mm; height:14mm; border-radius:2.5mm; border:.3mm solid #999; display:flex; align-items:flex-end; justify-content:center; font-size:8pt; font-weight:700; padding-bottom:1mm}
  .sfs-dk-mini{display:inline-block; width:3.6mm; height:3.6mm; border-radius:50%; border:.3mm solid #999; margin:0 1mm 0 1.5mm; vertical-align:-.6mm}
  .sfs-dk-mat{display:grid; grid-template-columns:repeat(3,1fr); gap:4mm}
  .sfs-dk-mat > div{display:flex; gap:2mm; align-items:flex-start; font-size:8.5pt; line-height:1.35}
  .sfs-dk-mat .sfs-form{width:10mm !important; height:10mm !important; flex:0 0 10mm}
  .sfs-dk-mat p{margin:0 !important}
  .sfs-dk-bagua{flex:0 0 92mm}
  .sfs-dk-bagua svg{width:92mm !important; height:92mm !important}
  .sfs-dk-rose{flex:0 0 82mm}
  .sfs-dk-rose svg{width:82mm !important; height:82mm !important}
  .sfs-druck .sfs-zone-flaeche{opacity:.5}
  .sfs-dk-fuss{margin-top:4mm !important; color:#888; font-size:8pt}
}

/* ======================================================================
   1.1.0 – Pa-Kua (Achteck), Grundregeln, Räume, Möbel-Planer, „Mehr“
   ====================================================================== */

/* --- Fußleiste mit „Mehr“ ------------------------------------------------ */
.sfs-w .sfs-mehr-knopf[data-akt="ja"]{background:var(--w-moos) !important; color:#f6f1e3 !important; border-color:var(--w-moos-tief) !important}
.sfs-mehr-raster{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:6px}
.sfs-w .sfs-mehr-kachel{display:flex !important; align-items:center; gap:10px !important; width:100% !important; padding:8px 10px !important; border-radius:14px !important; text-align:left;
  border:1px solid var(--w-rand) !important; background:#fffaf0 !important; color:var(--w-tinte) !important; font-size:.95rem !important; line-height:1.2 !important; transition:transform .2s,border-color .2s; animation:sfsAuf .4s both}
.sfs-w .sfs-mehr-kachel:hover{transform:translateY(-2px); border-color:var(--w-gold) !important}
.sfs-w .sfs-mehr-kachel.an{background:var(--w-moos) !important; color:#fff !important}
.sfs-mehr-kachel .sfs-kachel-ic{flex:0 0 34px; width:34px; height:34px; font-size:1.1rem}
.sfs-mehr-kachel span:last-child{min-width:0; white-space:normal}

/* --- Das Achteck ----------------------------------------------------------- */
.sfs-ak{height:100%; width:auto; max-width:100%; aspect-ratio:1; display:block}
.sfs-ak-ring{animation:sfsDreh 80s linear infinite; transform-box:fill-box; transform-origin:center}
.sfs-ak-sek,.sfs-ak-mitte{cursor:pointer; outline:none; transition:transform .45s cubic-bezier(.3,1.4,.5,1), opacity .4s, filter .4s}
.sfs-ak-sek.an{transform:translate(var(--dx),var(--dy))}
.sfs-ak-rein{animation:sfsAkRein .7s cubic-bezier(.3,1.3,.5,1) both; transform-box:fill-box; transform-origin:center}
@keyframes sfsAkRein{from{opacity:0; transform:scale(.55) rotate(-12deg)}to{opacity:1; transform:none}}
.sfs-ak-f{stroke:#fffdf8; stroke-width:1.6; transition:filter .25s, stroke .25s}
.sfs-ak-sek:hover .sfs-ak-f,.sfs-ak-sek:focus-visible .sfs-ak-f{filter:brightness(.96) saturate(1.35)}
.sfs-ak-sek.an .sfs-ak-f.aussen{stroke:var(--t); stroke-width:3}
.sfs-ak-sek.an .sfs-ak-f{filter:saturate(1.3)}
.sfs-ak-mitte:hover circle,.sfs-ak-mitte.an > circle{stroke:#8a6a1f; stroke-width:3}
.sfs-ak-bereich{font-size:13.5px; font-weight:700; fill:#2f3a2c}
.sfs-ak-el{font-size:11.5px; fill:#33402f}
.sfs-ak-organ{font-size:9.6px; fill:#4a4a42; font-style:italic}
.sfs-ak-richt{font-size:13px; font-weight:700; fill:#2f4434}
.sfs-ak text{pointer-events:none}
.sfs-ak.mini .sfs-ak-sek.aus,.sfs-ak.mini .sfs-ak-mitte.aus{opacity:.32; filter:saturate(.5)}
.sfs-ak.mini .sfs-ak-sek.an .sfs-ak-rein{animation:sfsAkRein .7s both, sfsAkPuls 2.4s 1s ease-in-out infinite}
@keyframes sfsAkPuls{0%,100%{filter:none}50%{filter:drop-shadow(0 0 6px rgba(191,162,79,.9))}}
.sfs-bagua-schalter{align-self:center}
.sfs-w .sfs-bagua-schalter .sfs-schalter-knopf{font-size:.86rem !important; padding:6px 14px !important}
.sfs-kurz{display:none}
.sfs-bagua.ist-kompass .sfs-tuer-wahl{display:none !important}
.sfs-bagua-unter{font-size:.8rem !important; color:var(--w-leise); text-align:center; flex:0 0 auto; max-width:470px; line-height:1.35 !important}
.sfs-bagua .sfs-plan{min-height:0}
.sfs-ak-zeichen svg{width:34px; height:34px}
.sfs-tri{width:100%; height:100%}
.sfs-ak-zeilen{display:grid; grid-template-columns:1fr 1fr; gap:4px 14px; font-size:.86rem; margin:0 0 8px}
.sfs-ak-zeilen i,.sfs-ak-toene i{display:block; font-style:normal; font-weight:700; font-size:.72rem; color:var(--el-tief,#5f6f5c)}
.sfs-ak-toene{display:flex; flex-direction:column; gap:5px; margin:0 0 8px; padding:7px 10px; border-radius:12px; background:rgba(255,253,248,.85); border:1px dashed var(--el,#e3d7bd)}
.sfs-ak-toene > span{display:flex; flex-wrap:wrap; align-items:center; gap:3px 10px; font-size:.82rem}
.sfs-ak-toene > span > i{flex:0 0 100%}
.sfs-ton{display:inline-flex; align-items:center; gap:5px; white-space:nowrap}
.sfs-ton i{display:inline-block; width:20px; height:20px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.18)}
.sfs-ak-btb{margin-top:6px !important; font-style:italic}
.sfs-zonen-karte{overflow:auto; max-height:100%}

/* --- Ergebnis: Reiter „Bagua“ -------------------------------------------- */
.sfs-bg-erg{display:grid; grid-template-columns:200px minmax(0,1fr); gap:16px; align-items:start}
.sfs-bg-mini{width:200px; height:200px; cursor:pointer}
.sfs-bg-text{display:flex; flex-direction:column; gap:6px; min-width:0}
.sfs-bg-satz{font-size:.92rem !important; color:var(--w-leise)}
.sfs-bg-gross{display:flex; align-items:center; flex-wrap:wrap; gap:4px 10px; font-size:1.15rem !important; line-height:1.3 !important; color:var(--t)}
.sfs-bg-gross b{color:var(--t)}
.sfs-bg-gross span:last-child{color:var(--w-moos-tief)}
.sfs-bg-farbe{width:34px; height:34px; border-radius:50%; background:var(--f); border:3px solid #fff; box-shadow:0 0 0 1px var(--t) !important; animation:sfsPop .7s both}
.sfs-bg-weg{font-size:.82rem !important; color:var(--w-leise); background:#fbf6ea; border-radius:10px; padding:6px 10px}
.sfs-bg-text .sfs-knopf{align-self:flex-start}

/* --- Grundregeln ----------------------------------------------------------- */
.sfs-rg-chips{display:flex !important; gap:6px; flex:0 0 auto; flex-wrap:wrap; margin:0 0 10px}
.sfs-w .sfs-rg-chip{display:inline-flex !important; align-items:center; gap:7px !important; padding:5px 12px 5px 5px !important; border-radius:999px !important; font-size:.88rem !important;
  border:1px solid var(--w-rand) !important; background:rgba(255,253,248,.92) !important; color:var(--w-tinte) !important; transition:background .2s,border-color .2s,transform .2s; animation:sfsAuf .45s both; white-space:nowrap}
.sfs-w .sfs-rg-chip:hover{border-color:var(--w-gold) !important; transform:translateY(-1px)}
.sfs-w .sfs-rg-chip[aria-selected="true"]{background:var(--w-moos) !important; color:#fff !important; border-color:var(--w-moos-tief) !important}
.sfs-rg-chip-ic{width:28px; height:28px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:#eef3e6; color:var(--w-moos); font-size:1rem}
.sfs-rg-chip[aria-selected="true"] .sfs-rg-chip-ic{background:#fffdf8}
.sfs-regeln-rumpf{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.sfs-rg-buehne{display:flex; align-items:center; justify-content:center; min-height:0; border-radius:20px; background:rgba(255,253,248,.6); border:1px solid var(--w-rand); padding:8px}
.sfs-rg-buehne.neu .sfs-rg-svg{animation:sfsRein .6s both}
.sfs-rg-svg{width:100%; height:100%; max-height:100%; display:block}
.sfs-rg-karte{overflow:auto; min-height:0; padding:4px 6px 4px 2px}
.sfs-rg-karte.neu > *{animation:sfsAuf .45s both}
.sfs-rg-karte h3{margin:0 0 4px !important}
.sfs-rg-kurz{font-weight:700; color:var(--w-moos); font-size:.98rem !important; margin:0 0 6px !important}
.sfs-rg-text{font-size:.92rem !important; margin:0 0 8px !important}
.sfs-rg-liste{list-style:none !important; display:flex; flex-direction:column; gap:4px}
.sfs-rg-liste li{display:flex; gap:8px; align-items:flex-start; font-size:.9rem; margin:0 !important; animation:sfsAuf .45s both}
.sfs-rg-liste li .sfs-ic{color:#5d9a5a; margin-top:2px}
.sfs-rg-klein{font-size:11px; fill:#8a6d22}
/* Kommandoposition: richtig / falsch */
.sfs-rg-bett{transition:transform 1s cubic-bezier(.4,1.3,.5,1)}
.sfs-rg-kommando.falsch .sfs-rg-bett{transform:translate(182px,0)}
.sfs-rg-sicht{stroke-dashoffset:0; animation:sfsFluss 1.4s linear infinite; transition:opacity .5s}
.sfs-rg-sicht.schlecht,.sfs-rg-kreuz{opacity:0; transition:opacity .5s}
.sfs-rg-kommando.falsch .sfs-rg-sicht.gut,.sfs-rg-kommando.falsch .sfs-rg-haken,.sfs-rg-kommando.falsch .sfs-rg-auge,.sfs-rg-kommando.falsch .sfs-rg-ruecken{opacity:0}
.sfs-rg-kommando.falsch .sfs-rg-sicht.schlecht,.sfs-rg-kommando.falsch .sfs-rg-kreuz{opacity:1}
.sfs-rg-haken,.sfs-rg-auge,.sfs-rg-ruecken{transition:opacity .5s}
.sfs-rg-auge{animation:sfsAtmen 2.4s ease-in-out infinite}
/* Mitte */
.sfs-rg-qi{animation:sfsDreh 14s linear infinite; transform-box:view-box; transform-origin:160px 120px}
/* Formen */
.sfs-rg-pfeile{animation:sfsAtmen 1.4s ease-in-out infinite; transition:opacity .6s}
.sfs-rg-pflanze{opacity:0; transform:scale(.3); transform-box:fill-box; transform-origin:center bottom; transition:opacity .6s, transform .7s cubic-bezier(.3,1.5,.5,1)}
.sfs-rg-formen.weich .sfs-rg-pfeile{opacity:0 !important; animation:none}
.sfs-rg-formen.weich .sfs-rg-pflanze{opacity:1; transform:none}
.sfs-rg-welle{animation:sfsFluss 2s linear infinite}
/* Ordnung */
.sfs-rg-lohn{opacity:0; transform:translateY(20px) scale(.3); transform-box:fill-box; transform-origin:center bottom; transition:opacity .8s, transform .9s cubic-bezier(.3,1.5,.5,1)}
.sfs-rg-ordnung.fertig .sfs-rg-lohn{opacity:1; transform:none}
.sfs-rg-sonne2{animation:sfsAtmen 4s ease-in-out infinite}
.sfs-rg-zeug > g{transition:opacity .7s, transform .7s; transform-box:fill-box; transform-origin:center}
.sfs-rg-zeug > g.weg{opacity:0; transform:translateY(-14px) scale(.6)}
.sfs-rg-spirale{opacity:.25; transition:opacity 1s; animation:sfsFluss 2.2s linear infinite}
.sfs-rg-ordnung.fertig .sfs-rg-spirale{opacity:.9}
.sfs-rg-glanz path{opacity:0}
.sfs-rg-ordnung.fertig .sfs-rg-glanz path{animation:sfsGlanz 2s ease-in-out infinite}
@keyframes sfsGlanz{0%,100%{opacity:0}50%{opacity:1}}
/* Lüften */
.sfs-rg-sonne{animation:sfsDreh 30s linear infinite; transform-box:fill-box; transform-origin:center}
.sfs-rg-luft path{stroke-dasharray:18 12; animation:sfsWind 2.6s linear infinite}
/* Yin & Yang */
.sfs-rg-yin{opacity:var(--yin,.31); transition:opacity .3s}
.sfs-rg-schein{opacity:calc(var(--yang,.5) * .75); transition:opacity .3s}
.sfs-rg-mond{opacity:calc(1 - var(--yang,.5)); transition:opacity .3s}
.sfs-rg-yy-dreh{animation:sfsDreh 24s linear infinite; transform-box:fill-box; transform-origin:center}
.sfs-yy{margin:4px 0 8px; display:flex; flex-direction:column; gap:4px}
.sfs-yy-zeile{display:flex; align-items:center; gap:8px; font-size:.85rem; font-weight:700; color:var(--w-moos-tief)}
.sfs-w .sfs-yy-regler{flex:1 1 auto; width:100% !important; accent-color:#5d7f62; height:26px; padding:0 !important; border:0 !important; background:transparent !important; cursor:pointer}
.sfs-yy-skala{position:relative; height:18px; margin:0 34px; border-radius:9px; background:linear-gradient(90deg,#2f3a52,#a9b4dc 35%,#f9e2a0 70%,#fff3d6)}
.sfs-yy-skala i{position:absolute; top:3px; width:12px; height:12px; margin-left:-6px; border-radius:50%; background:#fffdf8; border:2px solid #8a7d5c; transition:transform .3s}
.sfs-yy-skala i.an{transform:scale(1.45); border-color:#bfa24f; background:#e6cf8d}
.sfs-yy-satz{font-size:.86rem !important; color:var(--w-leise)}
.sfs-yy-bahn{position:relative; flex:1 1 auto; display:flex; align-items:center}
.sfs-yy-ziel{position:absolute; top:-6px; width:0; height:0; margin-left:-6px; border:6px solid transparent; border-top-color:#bfa24f; pointer-events:none}
.sfs-yy.klein{padding:6px 10px; border-radius:14px; background:linear-gradient(90deg,rgba(47,58,82,.12),rgba(255,243,214,.6)); border:1px solid var(--w-rand); flex:0 0 auto}
/* Ordnung-Checkliste */
.sfs-ordnung{display:flex; flex-direction:column; gap:6px; margin:0 0 6px}
.sfs-ordnung-kopf{display:flex; gap:10px; align-items:center}
.sfs-ordnung-kopf svg{flex:0 0 42px; width:42px; height:42px}
.sfs-ordnung-ring{transition:stroke-dasharray .6s}
.sfs-ordnung-kopf b{display:block; color:var(--w-moos-tief)}
.sfs-ordnung-kopf small{display:block; font-size:.8rem; color:var(--w-leise)}
.sfs-ordnung-liste{display:grid; grid-template-columns:1fr 1fr; gap:4px 10px}
.sfs-ordnung-punkt{display:flex !important; gap:7px; align-items:flex-start; font-size:.84rem; line-height:1.3; cursor:pointer; margin:0 !important; padding:4px 6px; border-radius:10px; transition:background .2s}
.sfs-ordnung-punkt:hover{background:rgba(255,253,248,.9)}
.sfs-ordnung-punkt input{position:absolute; opacity:0; width:1px; height:1px}
.sfs-ordnung-kasten{flex:0 0 20px; width:20px; height:20px; border-radius:6px; border:2px solid #b79a48; background:#fffdf8; display:inline-flex; align-items:center; justify-content:center; color:transparent; font-size:.85rem; transition:background .2s,color .2s}
.sfs-ordnung-punkt.an .sfs-ordnung-kasten{background:var(--w-moos); border-color:var(--w-moos); color:#fff; animation:sfsPop .35s both}
.sfs-ordnung-punkt.an > span:last-child{color:var(--w-leise); text-decoration:line-through; text-decoration-color:rgba(93,127,98,.5)}
.sfs-ordnung-punkt input:focus-visible + .sfs-ordnung-kasten{outline:2px solid #b79a48; outline-offset:2px}

/* --- Räume ---------------------------------------------------------------- */
.sfs-raum-chips{flex:0 0 auto; margin:0 0 10px}
.sfs-raeume-rumpf{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
.sfs-raeume-links{display:flex; flex-direction:column; gap:8px; min-height:0}
.sfs-raeume-plan{position:relative; flex:1 1 auto; min-height:0; display:flex; align-items:center; justify-content:center; border-radius:18px; background:rgba(255,253,248,.6); border:1px solid var(--w-rand); padding:10px 8px 24px}
.sfs-raeume-plan.neu svg{animation:sfsRein .55s both}
.sfs-raeume-plan-titel{position:absolute; left:0; right:0; bottom:5px; text-align:center; font-size:.76rem; color:var(--w-leise)}
.sfs-raeume-panel{display:flex; flex-direction:column; min-height:0}
.sfs-raeume-kopf h3{margin:0 0 2px !important}
.sfs-raeume-kopf p{font-size:.92rem !important; color:var(--w-moos); font-weight:700}
.sfs-rr-platz{list-style:none !important; margin:0 !important; padding:0 !important; display:flex; flex-direction:column; gap:6px}
.sfs-rr-platz li{display:flex; gap:9px; align-items:flex-start; font-size:.92rem; margin:0 !important; animation:sfsAuf .45s both}
.sfs-rr-platz b{flex:0 0 24px; height:24px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:#e6cf8d; color:#5a4a1a; font-size:.8rem}
.sfs-rr-farben{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:0 0 8px}
.sfs-rr-feld{display:flex; flex-direction:column; align-items:center; text-align:center; gap:3px; animation:sfsAuf .5s both}
.sfs-rr-feld i{width:100%; height:58px; border-radius:14px; border:3px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.14), 0 6px 14px -10px rgba(0,0,0,.5) !important}
.sfs-rr-feld b{font-size:.8rem; line-height:1.2}
.sfs-rr-feld small{font-size:.68rem; color:var(--w-leise)}
.sfs-rr-dosis,.sfs-rr-mat{font-size:.86rem !important; margin:0 0 6px !important; display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px}
.sfs-rr-dd{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.sfs-rr-dd ul{list-style:none !important; display:flex; flex-direction:column; gap:5px}
.sfs-rr-dd li{display:flex; gap:7px; align-items:flex-start; font-size:.86rem; line-height:1.35; margin:0 !important}
.sfs-rr-dd .tun .sfs-ic{color:#5d9a5a; margin-top:2px}
.sfs-rr-dd .lassen .sfs-ic{color:#c8463b; margin-top:2px}

/* --- Der Möbel-Planer ------------------------------------------------------ */
.sfs-pl-oben{display:flex; gap:10px; align-items:center; flex:0 0 auto; margin:0 0 8px}
.sfs-pl-titel{flex:1 1 auto; min-width:0}
.sfs-pl-titel .sfs-unter{font-size:.86rem}
.sfs-w .sfs-pl-raumwahl{width:auto !important; max-width:230px; flex:0 1 auto; height:38px !important}
.sfs-planer-rumpf{grid-template-columns:minmax(0,1.25fr) minmax(0,.95fr); gap:16px}
.sfs-pl-links{display:flex; flex-direction:column; gap:4px; min-height:0}
.sfs-pl-flaeche{flex:1 1 auto; min-height:0; display:flex; align-items:center; justify-content:center; border-radius:18px; background:rgba(255,253,248,.55); border:1px solid var(--w-rand); padding:4px; outline:none; touch-action:none; user-select:none; -webkit-user-select:none}
.sfs-pl-flaeche:focus-visible{border-color:var(--w-gold)}
.sfs-pl-svg{height:100%; width:100%; max-height:100%; display:block}
.sfs-pl-m{cursor:grab}
.sfs-pl-m:active{cursor:grabbing}
.sfs-pl-m .sfs-pl-umriss{transition:stroke .2s}
.sfs-pl-m:hover .sfs-pl-umriss{stroke:#bfa24f; stroke-width:3}
.sfs-pl-m.wahl .sfs-pl-umriss{stroke:#2f4434; stroke-width:4; stroke-dasharray:9 5; animation:sfsFluss 1.2s linear infinite}
.sfs-pl-m.markiert .sfs-pl-pop{animation:sfsMarkiert .6s ease-in-out 3}
@keyframes sfsMarkiert{50%{filter:drop-shadow(0 0 10px rgba(200,70,59,.9))}}
.sfs-pl-m.neu .sfs-pl-pop{animation:sfsPop .55s cubic-bezier(.3,1.4,.5,1) both; transform-box:fill-box; transform-origin:center}
.sfs-pl-schein{animation:sfsAtmen 3s ease-in-out infinite}
.sfs-pl-name{font-size:15px; font-weight:700; fill:#2f3a2c; paint-order:stroke; stroke:rgba(255,253,248,.88); stroke-width:4px; pointer-events:none}
.sfs-pl-name.boden{font-size:13px; font-weight:400; fill:#5f6f5c}
.sfs-pl-nord text{font-size:16px; font-weight:700; fill:#8a6d22}
.sfs-pl-mass,.sfs-pl-tuertext{font-size:15px; fill:#8a7d5c; pointer-events:none}
.sfs-pl-bg-text{font-size:15px; font-weight:700; fill:#2f3a2c; opacity:.75; pointer-events:none}
.sfs-pl-bagua{opacity:.6; pointer-events:none}
.sfs-pl-pruef{pointer-events:none}
.sfs-pl-linie{stroke-linecap:round; fill:none}
.sfs-pl-linie.sicht{stroke-width:4; stroke-dasharray:12 8; animation:sfsFluss 1.4s linear infinite}
.sfs-pl-linie.wand{stroke-width:10; opacity:.55}
.sfs-pl-linie.spiegel{stroke-width:2.5; stroke-dasharray:4 7; opacity:.75}
.sfs-pl-linie.pfeil{stroke-width:4; stroke-dasharray:8 5; animation:sfsFluss .9s linear infinite}
.sfs-pl-linie.gut{stroke:#5d9a5a} .sfs-pl-linie.mittel{stroke:#d9a03a} .sfs-pl-linie.schlecht{stroke:#c8463b}
.sfs-pl-auge{stroke:#fffdf8; stroke-width:3}
.sfs-pl-auge.gut{fill:#5d9a5a} .sfs-pl-auge.mittel{fill:#d9a03a} .sfs-pl-auge.schlecht{fill:#c8463b}
.sfs-pl-mitte{fill:none; stroke-width:3; stroke-dasharray:6 6; animation:sfsFluss 3s linear infinite}
.sfs-pl-mitte.gut{stroke:#bfa24f} .sfs-pl-mitte.mittel{stroke:#d9a03a} .sfs-pl-mitte.schlecht{stroke:#c8463b; fill:rgba(200,70,59,.08)}
.sfs-pl-dunkel circle{fill:rgba(47,58,82,.12); stroke:#6f7f99; stroke-width:2; stroke-dasharray:4 4}
.sfs-pl-dunkel path{fill:#6f7f99}
.sfs-pl-legende{flex:0 0 auto; font-size:.74rem !important; color:var(--w-leise); text-align:center; line-height:1.5 !important}
.sfs-pl-legende i{display:inline-block; vertical-align:middle; margin:0 4px 0 10px}
.sfs-pl-legende .l-sicht{width:18px; height:0; border-top:3px dashed #5d9a5a}
.sfs-pl-legende .l-wand{width:16px; height:6px; border-radius:3px; background:#5d9a5a; opacity:.6}
.sfs-pl-legende .l-pfeil{width:18px; height:0; border-top:3px dashed #c8463b}
.sfs-pl-legende .l-mond{width:12px; height:12px; border-radius:50%; border:2px dashed #6f7f99}
.sfs-pl-panel{display:flex; flex-direction:column; min-height:0}
.sfs-pl-ampel{display:flex; gap:12px; align-items:center; padding:6px 12px; border-radius:16px; background:rgba(255,253,248,.92); border:1px solid var(--w-rand); flex:0 0 auto; transition:border-color .3s, background .3s}
.sfs-pl-ampel.gut{border-color:#9fca95; background:linear-gradient(100deg,#eef6e8,#fffdf8)}
.sfs-pl-ampel.mittel{border-color:#e9c77a; background:linear-gradient(100deg,#fbf2da,#fffdf8)}
.sfs-pl-ampel.schlecht{border-color:#e4a497; background:linear-gradient(100deg,#fbe6e0,#fffdf8)}
.sfs-pl-ampel b{display:block; color:var(--w-moos-tief); font-size:1rem}
.sfs-pl-ampel small{display:block; font-size:.8rem; color:var(--w-leise)}
.sfs-ampel{flex:0 0 24px; width:24px; height:60px}
.sfs-ampel circle{fill:#2c302b; transition:fill .4s, filter .4s}
.sfs-ampel.schlecht .rot{fill:#e2574a; filter:drop-shadow(0 0 4px #e2574a)}
.sfs-ampel.mittel .gelb{fill:#f2c14e; filter:drop-shadow(0 0 4px #f2c14e)}
.sfs-ampel.gut .gruen{fill:#6cc36a; filter:drop-shadow(0 0 4px #6cc36a)}
.sfs-pl-tafel{padding-top:8px}
.sfs-pl-pruef{list-style:none !important; display:flex; flex-direction:column; gap:5px}
.sfs-pl-pruef li{display:flex; gap:9px; align-items:flex-start; padding:6px 9px; border-radius:12px; background:rgba(255,253,248,.92); border:1px solid var(--w-rand); margin:0 !important; cursor:pointer; transition:border-color .2s, transform .2s; animation:sfsAuf .35s both; outline:none}
.sfs-pl-pruef li:hover,.sfs-pl-pruef li:focus-visible{border-color:var(--w-gold); transform:translateX(2px)}
.sfs-pl-pruef b{display:block; font-size:.88rem; color:var(--w-moos-tief)}
.sfs-pl-pruef small{display:block; font-size:.8rem; line-height:1.35; color:var(--w-tinte)}
.sfs-pl-punkt{flex:0 0 14px; width:14px; height:14px; border-radius:50%; margin-top:3px; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.2) !important}
.sfs-pl-pruef li.gut .sfs-pl-punkt{background:#6cc36a}
.sfs-pl-pruef li.mittel .sfs-pl-punkt{background:#f2c14e}
.sfs-pl-pruef li.schlecht .sfs-pl-punkt{background:#e2574a}
.sfs-pl-pruef li.schlecht{border-left:4px solid #e2574a}
.sfs-pl-pruef li.mittel{border-left:4px solid #f2c14e}
.sfs-pl-wahl{margin:0 0 8px; padding:8px 10px; border-radius:14px; background:#fbf6ea}
.sfs-pl-wahl .sfs-feldname small{font-weight:400; color:var(--w-leise); font-size:.78rem}
.sfs-pl-knoepfe{display:flex !important; flex-wrap:wrap; gap:6px; margin:4px 0}
.sfs-w .sfs-pl-knoepfe .sfs-knopf{max-width:100%}
.sfs-w .sfs-pl-knoepfe .sfs-knopf span:last-child{overflow:hidden; text-overflow:ellipsis}
.sfs-w .sfs-knopf.sfs-weg:hover{background:#b5584a !important; border-color:#8a3e30 !important}
.sfs-w .sfs-knopf.frage{background:#fbe6e0 !important; border-color:#c8463b !important}
.sfs-pl-masse{display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:4px}
.sfs-pl-mass-zeile{display:inline-flex; align-items:center; gap:6px; font-size:.84rem}
.sfs-pl-mass-zeile i{font-style:normal; color:var(--w-leise)}
.sfs-pl-mass-zeile b{min-width:52px; text-align:center}
.sfs-pl-auswahl{display:grid; grid-template-columns:repeat(auto-fill,minmax(76px,1fr)); gap:6px}
.sfs-w .sfs-pl-typ{display:flex !important; flex-direction:column; align-items:center; gap:3px !important; padding:6px 4px !important; border-radius:12px !important; border:1px solid var(--w-rand) !important;
  background:rgba(255,253,248,.92) !important; color:var(--w-tinte) !important; font-size:.74rem !important; line-height:1.15 !important; transition:transform .2s,border-color .2s}
.sfs-w .sfs-pl-typ:hover{transform:translateY(-2px); border-color:var(--w-gold) !important}
.sfs-pl-ic{width:38px; height:38px; display:block}
.sfs-pl-raum{display:flex; flex-direction:column; gap:7px}
.sfs-pl-zeile{display:grid; grid-template-columns:72px minmax(0,1fr); gap:8px; align-items:center}
.sfs-pl-zeile-name{font-size:.84rem; font-weight:700; color:var(--w-moos-tief)}
.sfs-pl-regel{display:flex; align-items:center; gap:8px}
.sfs-w .sfs-pl-regel input{flex:1 1 auto; width:100% !important; accent-color:#5d7f62; padding:0 !important; border:0 !important; background:transparent !important; height:24px}
.sfs-pl-regel b{flex:0 0 58px; font-size:.84rem; text-align:right}
.sfs-pl-neu .sfs-chips{margin-top:8px}

/* --- Start: neue Kacheln --------------------------------------------------- */
.sfs-kacheln{grid-auto-rows:minmax(0,auto)}
.sfs-kacheln > .sfs-kachel:last-child:nth-child(even){grid-column:1 / -1}

/* --- Niedrige Bildschirme am Rechner ------------------------------------- */
@media (min-width:761px) and (max-height:820px){
  .sfs-w .sfs-kachel{padding:5px 9px !important}
  .sfs-kachel-ic{flex-basis:34px; width:34px; height:34px; font-size:1.1rem}
  .sfs-kachel-text small{font-size:.74rem}
  .sfs-rg-chips{margin-bottom:6px}
  .sfs-pl-legende{display:none}
}
@media (min-width:761px) and (max-width:940px){
  .sfs-w .sfs-rg-chip{font-size:.8rem !important; padding:4px 9px 4px 4px !important}
  .sfs-rg-chip-ic{width:24px; height:24px}
}

/* --- Handy ------------------------------------------------------------------ */
@media (max-width:760px){
  .sfs-w .sfs-leisten-knopf.nur-gross{display:none !important}
  .sfs-w .sfs-mehr-knopf[data-akt="klein"]{background:var(--w-moos) !important; color:#f6f1e3 !important}
  .sfs-mehr-raster{gap:6px}
  .sfs-w .sfs-mehr-kachel{font-size:.86rem !important; padding:6px 8px !important}
  /* Start: kompakte Kacheln in drei Spalten */
  .sfs-kacheln{grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px}
  .sfs-w .sfs-kachel{flex-direction:column; gap:3px !important; padding:5px 3px !important; text-align:center; justify-content:center}
  .sfs-w .sfs-kachel.herz{flex-direction:row; text-align:left; padding:6px 8px !important}
  .sfs-kachel:not(.herz) .sfs-kachel-text small{display:none}
  .sfs-kachel:not(.herz) .sfs-kachel-text b{font-size:.76rem; line-height:1.15}
  .sfs-kachel-ic{flex-basis:28px; width:28px; height:28px; font-size:.95rem}
  /* Bagua */
  .sfs-lang{display:none} .sfs-kurz{display:inline}
  .sfs-ak .sfs-ak-organ{display:none}
  .sfs-ak-bereich{font-size:15px}
  .sfs-ak-el{font-size:13px}
  .sfs-bagua-unter{font-size:.68rem !important}
  .sfs-ak-zeilen{font-size:.74rem; gap:2px 10px; margin-bottom:5px}
  .sfs-ak-toene{padding:5px 8px; gap:3px; margin-bottom:5px}
  .sfs-ak-toene > span{font-size:.72rem; gap:2px 8px}
  .sfs-ton i{width:16px; height:16px}
  .sfs-ak-zeichen svg{width:26px; height:26px}
  .sfs-bagua-rumpf{grid-template-rows:minmax(0,1.1fr) minmax(0,1fr)}
  /* Ergebnis Bagua */
  .sfs-bg-erg{grid-template-columns:92px minmax(0,1fr); gap:8px}
  .sfs-bg-mini{width:92px; height:92px}
  .sfs-bg-satz{font-size:.76rem !important}
  .sfs-bg-gross{font-size:.92rem !important}
  .sfs-bg-farbe{width:24px; height:24px}
  .sfs-bg-weg{font-size:.7rem !important}
  .sfs-ergebnis .sfs-knopfzeile{gap:4px}
  .sfs-w .sfs-ergebnis .sfs-knopfzeile .sfs-knopf:not(.haupt) span{display:none}
  .sfs-w .sfs-ergebnis .sfs-knopfzeile .sfs-knopf:not(.haupt){padding:4px 12px !important}
  .sfs-regeln .sfs-kopf .sfs-unter,.sfs-raeume .sfs-kopf .sfs-unter{display:none}
  /* Regeln */
  .sfs-rg-chips{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-bottom:6px; padding-bottom:2px}
  .sfs-rg-chips::-webkit-scrollbar{display:none}
  .sfs-w .sfs-rg-chip{font-size:.76rem !important; padding:3px 9px 3px 3px !important; gap:5px !important}
  .sfs-rg-chip-ic{width:22px; height:22px; font-size:.85rem}
  .sfs-regeln-rumpf{grid-template-rows:minmax(110px,34%) minmax(0,1fr); gap:6px}
  .sfs-rg-buehne{padding:4px; border-radius:14px}
  .sfs-rg-kurz{font-size:.84rem !important; margin-bottom:3px !important}
  .sfs-rg-text{font-size:.78rem !important; line-height:1.4 !important; margin-bottom:5px !important}
  .sfs-rg-liste li{font-size:.78rem}
  .sfs-ordnung-liste{grid-template-columns:1fr; gap:1px}
  .sfs-ordnung-punkt{font-size:.76rem; padding:2px 4px}
  .sfs-ordnung-kopf svg{flex-basis:34px; width:34px; height:34px}
  .sfs-ordnung-kopf small{font-size:.7rem}
  .sfs-yy-satz{font-size:.74rem !important}
  .sfs-yy-skala{margin:0 30px; height:14px}
  .sfs-yy-skala i{width:9px; height:9px; top:2.5px; margin-left:-4.5px}
  /* Räume */
  .sfs-raum-chips{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-bottom:6px; padding-bottom:2px}
  .sfs-raum-chips::-webkit-scrollbar{display:none}
  .sfs-raum-chips .sfs-chip{flex:0 0 auto; white-space:nowrap}
  .sfs-raeume-rumpf{grid-template-rows:minmax(120px,40%) minmax(0,1fr); gap:6px}
  .sfs-raeume-links{gap:4px}
  .sfs-raeume-plan{padding:4px 4px 18px; border-radius:14px}
  .sfs-raeume-plan-titel{font-size:.66rem; bottom:2px}
  .sfs-yy.klein{padding:3px 8px; gap:1px}
  .sfs-yy-zeile{font-size:.74rem}
  .sfs-raeume-kopf h3{font-size:1rem !important}
  .sfs-raeume-kopf p{font-size:.76rem !important}
  .sfs-rr-platz li{font-size:.78rem}
  .sfs-rr-platz b{flex-basis:20px; height:20px; font-size:.7rem}
  .sfs-rr-farben{gap:5px}
  .sfs-rr-feld i{height:40px; border-radius:10px}
  .sfs-rr-feld b{font-size:.68rem}
  .sfs-rr-feld small{display:none}
  .sfs-rr-dosis,.sfs-rr-mat{font-size:.74rem !important}
  .sfs-rr-dd{grid-template-columns:1fr; gap:6px}
  .sfs-rr-dd li{font-size:.76rem}
  /* Planer */
  .sfs-pl-oben{gap:7px; margin-bottom:5px}
  .sfs-pl-titel .sfs-unter{display:none}
  .sfs-pl-titel h2{font-size:1.1rem}
  .sfs-w .sfs-pl-raumwahl{max-width:150px; height:34px !important; font-size:.82rem !important}
  .sfs-planer-rumpf{grid-template-rows:minmax(190px,50%) minmax(0,1fr); gap:6px}
  .sfs-pl-legende{display:none}
  .sfs-pl-flaeche{border-radius:12px; padding:2px}
  .sfs-pl-ampel{padding:3px 9px; gap:8px; border-radius:12px}
  .sfs-ampel{flex-basis:16px; width:16px; height:40px}
  .sfs-pl-ampel b{font-size:.84rem}
  .sfs-pl-ampel small{font-size:.7rem}
  .sfs-pl-tafel{padding-top:5px}
  .sfs-pl-pruef li{padding:4px 7px; gap:7px}
  .sfs-pl-pruef b{font-size:.78rem}
  .sfs-pl-pruef small{font-size:.72rem}
  .sfs-pl-auswahl{grid-template-columns:repeat(auto-fill,minmax(62px,1fr)); gap:4px}
  .sfs-pl-ic{width:30px; height:30px}
  .sfs-w .sfs-pl-typ{font-size:.66rem !important; padding:4px 2px !important}
  .sfs-pl-zeile{grid-template-columns:58px minmax(0,1fr); gap:5px}
  .sfs-pl-zeile-name{font-size:.74rem}
  .sfs-pl-raum{gap:4px}
  .sfs-planer .sfs-knopfzeile .sfs-knopf{padding:4px 10px !important; font-size:.76rem !important; min-height:32px !important}
}
@media (max-width:380px){
  .sfs-kacheln{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sfs-kachel:not(.herz) .sfs-kachel-text b{font-size:.7rem}
}

/* --- Druck: neue Seiten ----------------------------------------------------- */
.sfs-druck-haken-liste{display:flex; flex-direction:column; gap:5px}
@media print{
  .sfs-druck .sfs-ak-organ{display:inline}
  .sfs-dk-ak{flex:0 0 90mm}
  .sfs-dk-ak svg{width:90mm !important; height:90mm !important}
  .sfs-dk-nw{white-space:nowrap}
  .sfs-druck .sfs-dk-tab.klein td{padding:.9mm 1.6mm}
  .sfs-dk-bagua.klein{flex:0 0 58mm}
  .sfs-dk-bagua.klein svg{width:58mm !important; height:58mm !important}
  .sfs-dk-bagua-satz{display:flex; gap:4mm; align-items:center; margin:3mm 0 0; padding:2mm 3mm; border:.3mm solid #e3d7bd; border-radius:3mm; break-inside:avoid; font-size:10pt}
  .sfs-dk-ak-mini{flex:0 0 30mm}
  .sfs-dk-ak-mini svg{width:30mm !important; height:30mm !important}
  .sfs-dk-plan-zeile{align-items:flex-start}
  .sfs-dk-plan svg{width:100% !important; height:100% !important}
  .sfs-dk-plan-rechts{flex:1 1 auto; font-size:10pt}
  .sfs-dk-plan-rechts .sfs-ampel{width:10mm; height:25mm; display:block; margin:0 0 3mm}
  .sfs-dk-pruef{list-style:none; margin:0 !important; padding:0 !important; font-size:9.5pt}
  .sfs-dk-pruef li{display:flex; gap:2mm; margin:0 0 1.4mm !important; break-inside:avoid}
  .sfs-dk-pruef li i{flex:0 0 3.2mm; height:3.2mm; border-radius:50%; margin-top:.8mm; border:.3mm solid #777}
  .sfs-dk-pruef li.gut i{background:#6cc36a} .sfs-dk-pruef li.mittel i{background:#f2c14e} .sfs-dk-pruef li.schlecht i{background:#e2574a}
  .sfs-dk-moebel{display:grid; grid-template-columns:1fr 1fr; gap:1mm 5mm; font-size:9pt}
  .sfs-dk-moebel span{display:flex; gap:2mm; align-items:center; break-inside:avoid}
  .sfs-dk-moebel i{flex:0 0 5mm; height:5mm; border-radius:1.2mm; border:.3mm solid #999}
  .sfs-dk-moebel small{color:#777}
  .sfs-dk-rr{display:flex; gap:5mm; align-items:flex-start; margin:0 0 5mm; padding:0 0 4mm; border-bottom:.3mm solid #eadfc6; break-inside:avoid}
  .sfs-dk-rr-plan{flex:0 0 42mm}
  .sfs-dk-rr-plan svg{width:42mm !important; height:auto !important; max-height:52mm}
  .sfs-dk-rr-text{flex:1 1 auto; font-size:9pt}
  .sfs-dk-rr-text h2{margin:0 0 1.5mm !important}
  .sfs-dk-rr-text h2 small{font-size:9pt; color:#666; font-weight:400}
  .sfs-dk-rr-spalten{display:grid; grid-template-columns:1fr 1fr; gap:4mm}
  .sfs-dk-rr-text ul{margin:0 0 1.5mm 4mm !important; padding:0 !important}
  .sfs-dk-rr-text li{margin:0 0 .6mm !important}
  .sfs-dk-rr-text ul.nein li{color:#8a3e30}
  .sfs-dk-rr-farben{margin:1.5mm 0 0 !important; font-size:8.5pt}
  .sfs-dk-regeln{display:grid; grid-template-columns:1fr 1fr; gap:5mm}
  .sfs-dk-regel{display:flex; gap:3mm; align-items:flex-start; break-inside:avoid; font-size:9pt}
  .sfs-dk-regel h2{margin:0 0 1mm !important; font-size:11pt !important}
  .sfs-dk-regel p{margin:0 0 1mm !important}
  .sfs-dk-regel ul{margin:0 0 0 4mm !important; padding:0 !important}
  .sfs-dk-regel-bild{flex:0 0 38mm}
  .sfs-dk-regel-bild svg{width:38mm !important; height:28.5mm !important}
  .sfs-druck .sfs-rg-pflanze,.sfs-druck .sfs-rg-sicht.schlecht,.sfs-druck .sfs-rg-kreuz{opacity:0}
  .sfs-druck .sfs-rg-yin{opacity:.3}
  .sfs-druck .sfs-rg-schein{opacity:.4}
  .sfs-druck .sfs-rg-mond{opacity:.5}
  .sfs-druck .sfs-rg-spirale{opacity:.6}
  .sfs-druck .sfs-rg-glanz path{opacity:0}
  .sfs-dk-check{list-style:none; margin:0 !important; padding:0 !important}
  .sfs-dk-check li{display:flex; gap:1.5mm; align-items:center; margin:0 0 .5mm !important}
  .sfs-dk-check li i{flex:0 0 3mm; height:3mm; border:.35mm solid #8a7d5c; border-radius:.6mm}
  .sfs-dk-check li.an i{background:#5d7f62; border-color:#5d7f62}
  .sfs-druck .sfs-pl-name{font-size:13px}
  .sfs-druck .sfs-ak-sek.aus,.sfs-druck .sfs-ak-mitte.aus{opacity:.32}
}
.sfs-rg-kommando.falsch .sfs-rg-auge{visibility:hidden}

/* ======================================================================
   1.1.1 – Eingangs-Bagua, Glückssymbole, Fußleiste misst selbst
   ====================================================================== */
.sfs-w .sfs-leisten-knopf.ausgelagert{display:none !important}
.sfs-w .sfs-fussleiste.enger .sfs-musik-knopf span{max-width:96px}
.sfs-w .sfs-fussleiste.knapp .sfs-musik-knopf span{display:none}
.sfs-w .sfs-fussleiste.knapp .sfs-musik-knopf{margin-left:2px !important}

/* Eingangs-Bagua */
.sfs-tuer-lage{display:inline-flex !important; align-items:center; gap:6px; margin:0 0 0 8px !important; font-size:.82rem; color:var(--w-leise)}
.sfs-w .sfs-tuer-lage input{width:110px !important; padding:0 !important; border:0 !important; background:transparent !important; accent-color:#5d7f62; height:22px}
.sfs-stirnwand{animation:sfsAtmen 3s ease-in-out infinite}
.sfs-stirn-text{font-size:10.5px; font-weight:700; fill:#8a6d22; paint-order:stroke; stroke:#fbf7ee; stroke-width:3px; pointer-events:none}
.sfs-reich-marke{animation:sfsPop .6s 1.2s both; transform-box:fill-box; transform-origin:center; pointer-events:none}
.sfs-du-pfeil{stroke-dasharray:6 5; animation:sfsFluss 1.2s linear infinite}
.sfs-zone.tuerzone .sfs-zone-flaeche{stroke:#bfa24f; stroke-width:2; stroke-dasharray:5 4}
.sfs-zone.reichtum .sfs-zone-flaeche{opacity:.62}
.sfs-raster.neu .sfs-zone .sfs-zone-flaeche{animation:sfsLeuchten 1.6s ease-in-out backwards; animation-delay:inherit}
@keyframes sfsLeuchten{0%{opacity:.15}45%{opacity:.95}100%{opacity:.42}}
.sfs-eingang p{font-size:.9rem !important; margin:0 0 7px !important}
.sfs-eingang-tab{border-collapse:separate; border-spacing:4px; margin:0 0 6px; font-size:.82rem}
.sfs-eingang-tab td{padding:6px 8px; border-radius:8px; text-align:center; min-width:84px; border:0}
.sfs-eingang-tab th{font-size:.72rem; color:var(--w-leise); font-weight:400; text-align:right; padding-right:4px; border:0}
.sfs-eingang-tab tr:last-child td{background:none; font-size:.7rem; color:var(--w-leise); padding:0}
.sfs-lesarten{background:#fbf3dc; border:1px solid #e6cf8d; border-radius:12px; padding:7px 10px; margin:0 0 8px}
.sfs-lesarten p{font-size:.84rem !important; margin:0 0 5px !important}
.sfs-lesarten i{font-style:normal; font-weight:700; color:#8a6d22}

/* Glückssymbole */
.sfs-sy-filter{flex:0 0 auto; margin:0 0 8px}
.sfs-symbole-rumpf{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
.sfs-sy-raster{display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:6px; align-content:start; overflow:auto; min-height:0; padding:2px 4px 2px 0}
.sfs-w .sfs-sy-kachel{display:flex !important; flex-direction:column; align-items:center; gap:2px !important; padding:5px 4px !important; border-radius:14px !important; border:1px solid var(--w-rand) !important;
  background:rgba(255,253,248,.92) !important; color:var(--w-tinte) !important; font-size:.76rem !important; line-height:1.15 !important; text-align:center; transition:transform .2s,border-color .2s,background .2s; animation:sfsAuf .4s both}
.sfs-w .sfs-sy-kachel:hover{transform:translateY(-2px); border-color:var(--w-gold) !important}
.sfs-w .sfs-sy-kachel.an{border-color:var(--w-moos) !important; background:#eef3e6 !important; box-shadow:0 0 0 2px rgba(93,127,98,.25) !important}
.sfs-sy-kachel .sfs-sy-svg{width:52px; height:52px}
.sfs-sy-svg{display:block}
.sfs-sy-karte{overflow:auto; min-height:0; padding:10px 14px; border-radius:18px; background:linear-gradient(160deg,#fbf3dc,#fffdf8 60%); border:1px solid #e6cf8d}
.sfs-sy-karte.neu > *{animation:sfsAuf .45s both}
.sfs-sy-kopf{display:flex; gap:12px; align-items:center; margin:0 0 6px}
.sfs-sy-gross{flex:0 0 104px; width:104px; height:104px; border-radius:50%; background:radial-gradient(circle at 40% 35%,#fffdf8,#f6ead0 75%); border:2px solid #e6cf8d; padding:6px}
.sfs-sy-gross .sfs-sy-svg{width:100%; height:100%}
.sfs-sy-kopf h3{margin:0 !important}
.sfs-sy-zusatz{font-size:.84rem !important; color:var(--w-leise)}
.sfs-sy-wuensche{display:flex; flex-wrap:wrap; gap:4px; margin-top:4px !important}
.sfs-sy-wuensche span{font-size:.72rem; padding:1px 8px; border-radius:999px; background:#e6cf8d; color:#5a4a1a}
.sfs-sy-bed{font-size:.92rem !important; margin:0 0 8px !important}
.sfs-sy-wo{display:flex; gap:10px; align-items:flex-start; margin:0 0 8px}
.sfs-sy-ak{flex:0 0 96px; width:96px; height:96px}
.sfs-sy-ak .sfs-ak{width:100%; height:100%}
.sfs-sy-zeilen p{font-size:.86rem !important; margin:0 0 4px !important; line-height:1.38 !important}
.sfs-sy-zeilen i,.sfs-sy-extra dt{font-style:normal; font-weight:700; color:#8a6d22; margin-right:5px}
.sfs-sy-zeilen i{display:block; font-size:.72rem}
.sfs-sy-extra{margin:0 0 8px; padding:6px 10px; border-radius:12px; background:rgba(255,253,248,.85); border:1px dashed #e6cf8d}
.sfs-sy-extra dl{display:grid; grid-template-columns:auto 1fr; gap:2px 10px; margin:0; font-size:.82rem}
.sfs-sy-extra dd{margin:0}
.sfs-sy-meiden ul{list-style:none !important; display:flex; flex-direction:column; gap:3px}
.sfs-sy-meiden li{display:flex; gap:7px; font-size:.84rem; margin:0 !important}
.sfs-sy-meiden .sfs-ic{color:#c8463b; margin-top:2px}
/* Die Symbole leben */
.sfs-sy-pfote{animation:sfsWinken 1.4s ease-in-out infinite; transform-box:view-box; transform-origin:36px 56px}
@keyframes sfsWinken{0%,100%{transform:rotate(0)}50%{transform:rotate(-16deg)}}
.sfs-sy-pendel{animation:sfsPendel 3s ease-in-out infinite; transform-box:view-box; transform-origin:50px 6px}
@keyframes sfsPendel{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.sfs-sy-wiegen{animation:sfsPendel 4s ease-in-out infinite; transform-box:view-box; transform-origin:50px 90px}
.sfs-sy-wasser path{stroke-dasharray:6 5; animation:sfsFluss 1s linear infinite}
.sfs-sy-tropfen{animation:sfsAtmen 1s ease-in-out infinite}
.sfs-sy-fisch{animation:sfsSchwimm 5s ease-in-out infinite}
@keyframes sfsSchwimm{0%,100%{transform:translateX(0)}50%{transform:translateX(8px)}}
.sfs-sy-blasen{animation:sfsSchweben 2.4s ease-in-out infinite}
.sfs-sy-regen{animation:sfsAtmen 2.6s ease-in-out infinite}
.sfs-sy-perle,.sfs-sy-herz,.sfs-sy-glanz{animation:sfsAtmen 2s ease-in-out infinite}
.sfs-sy-ruessel{animation:sfsPendel 3.4s ease-in-out infinite; transform-box:view-box; transform-origin:24px 52px}
.sfs-sy-fluegel{animation:sfsPendel 2.6s ease-in-out infinite; transform-box:view-box; transform-origin:56px 48px}
.sfs-sy-bluete{animation:sfsSchweben 4s ease-in-out infinite}
/* Räume: Reiter Glückssymbole */
.sfs-rr-sym{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px}
.sfs-w .sfs-rr-sym-karte{display:flex !important; gap:8px !important; align-items:center; padding:5px 8px !important; border-radius:12px !important; border:1px solid var(--w-rand) !important; background:rgba(255,253,248,.92) !important;
  color:var(--w-tinte) !important; text-align:left; width:100% !important; transition:border-color .2s, transform .2s; animation:sfsAuf .4s both}
.sfs-w .sfs-rr-sym-karte:hover{border-color:var(--w-gold) !important; transform:translateY(-1px)}
.sfs-rr-sym-karte .sfs-sy-svg{flex:0 0 44px; width:44px; height:44px}
.sfs-rr-sym-karte b{display:block; font-size:.86rem}
.sfs-rr-sym-karte small{display:block; font-size:.74rem; color:var(--w-leise); line-height:1.3}
.sfs-pl-symbole .sfs-pl-ic{width:34px; height:34px}

@media (max-width:760px){
  .sfs-tuer-lage{flex-basis:100%; justify-content:center; margin:2px 0 0 !important; font-size:.72rem}
  .sfs-eingang p{font-size:.76rem !important}
  .sfs-eingang-tab{font-size:.7rem; border-spacing:2px}
  .sfs-eingang-tab td{min-width:0; padding:3px 4px}
  .sfs-lesarten p{font-size:.72rem !important}
  .sfs-sy-filter{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-bottom:5px}
  .sfs-sy-filter .sfs-chip{flex:0 0 auto}
  .sfs-symbole .sfs-kopf .sfs-unter{display:none}
  .sfs-symbole-rumpf{grid-template-rows:auto minmax(0,1fr); gap:6px}
  .sfs-sy-raster{display:flex; overflow-x:auto; overflow-y:hidden; gap:5px; padding-bottom:3px}
  .sfs-w .sfs-sy-kachel{flex:0 0 70px !important; font-size:.66rem !important; padding:3px 2px !important}
  .sfs-sy-kachel .sfs-sy-svg{width:40px; height:40px}
  .sfs-sy-karte{padding:8px 10px}
  .sfs-sy-gross{flex-basis:70px; width:70px; height:70px; padding:4px}
  .sfs-sy-kopf h3{font-size:1rem !important}
  .sfs-sy-zusatz{font-size:.72rem !important}
  .sfs-sy-bed,.sfs-sy-zeilen p{font-size:.76rem !important}
  .sfs-sy-ak{flex-basis:70px; width:70px; height:70px}
  .sfs-sy-extra dl,.sfs-sy-meiden li{font-size:.74rem}
  .sfs-rr-sym{grid-template-columns:1fr}
}
@media print{
  .sfs-dk-sym{display:grid; grid-template-columns:1fr 1fr; gap:2.5mm 5mm}
  .sfs-dk-sym-k{display:flex; gap:2.5mm; align-items:flex-start; font-size:8pt; line-height:1.3; break-inside:avoid}
  .sfs-dk-sym-k svg{flex:0 0 14mm; width:14mm !important; height:14mm !important}
  .sfs-dk-sym-k small{color:#777}
  .sfs-dk-sym-k i{font-style:normal; font-weight:700; color:#8a6d22}
  .sfs-druck .sfs-reich-marke{animation:none}
}

/* --- 14.10.2026: Musik-Knopf oben rechts, Leiste wieder mit Beschriftung --- */
.sfs-w .sfs-mehr-knopf.nach-bedarf{display:none !important}
.sfs-w .sfs-fussleiste.mit-mehr .sfs-mehr-knopf.nach-bedarf{display:inline-flex !important}
.sfs-w.mit-musik .sfs-w-buehne{padding-right:60px}
.sfs-w .sfs-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 #d8c99d !important; background:rgba(255,253,248,.95) !important; color:var(--w-moos-tief) !important; box-shadow:0 4px 12px -6px rgba(90,70,40,.5) !important; cursor:pointer}
.sfs-w .sfs-musik-oben .sfs-ic{width:20px; height:20px}
.sfs-w .sfs-musik-oben.laeuft{background:#4f6f52 !important; color:#fff !important; border-color:#2f4434 !important; animation:sfsMusikPuls 2.6s ease-in-out infinite}
.sfs-w .sfs-musik-oben.aus{color:#9a9277 !important}
.sfs-w .sfs-musik-oben.aus::after{content:""; position:absolute; left:8px; right:8px; top:50%; height:2px; background:currentColor; transform:rotate(-40deg); border-radius:2px}
@keyframes sfsMusikPuls{0%,100%{box-shadow:0 0 0 0 rgba(79,111,82,.35)}50%{box-shadow:0 0 0 6px rgba(79,111,82,0)}}
@media (max-width:760px){
  .sfs-w.mit-musik .sfs-w-buehne{padding-right:48px}
  .sfs-w .sfs-musik-oben{top:8px; right:8px; width:34px !important; height:34px !important}
  .sfs-w .sfs-mehr-knopf.nach-bedarf{display:inline-flex !important}
  .sfs-w .sfs-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}
  .sfs-w .sfs-leisten-knopf span{display:block !important; font-size:.62rem !important; line-height:1.1; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
}
@media (prefers-reduced-motion:reduce){ .sfs-w .sfs-musik-oben.laeuft{animation:none} }