/* Silbermuschel Duftlexikon. Überall Comic Sans MS.
   Grundgerüst wie Buddhismus, Qigong und Hildegard (von Gordon abgenommen).
   Farben: Creme, Rosé und Salbei. */

.sdl-w, .sdl-box, .sdl-druck{
  --w-creme:#fbf3ef; --w-perg:#fffdf9; --w-tinte:#3d3335; --w-tief:#2f2628; --w-leise:#75686b;
  --w-gruen:#b0657a; --w-gruen-tief:#8e4a5e; --w-moos:#e3bcc6; --w-moos-hell:#f8e8ec; --w-moos-zart:#fcf4f6;
  --w-gold:#c9a24a; --w-gold-zart:#f7efd6; --w-burgund:#7f9f86; --w-burgund-zart:#e7f0e8; --w-rand:#ecdcd6;
  --w-salbei:#7f9f86; --w-salbei-hell:#e7f0e8;
}
.sdl-w, .sdl-w *, .sdl-box, .sdl-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 ------------------------------------------------------ */
.sdl-w{
  position:relative; overflow:hidden; isolation:isolate;
  max-width:1000px; margin:12px auto !important; border-radius:22px;
  border:1px solid var(--w-rand); color:var(--w-tinte); text-align:left;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(201,121,141,.18) 0%, rgba(201,121,141,0) 65%),
    radial-gradient(70% 60% at 100% 100%, rgba(127,159,134,.2) 0%, rgba(127,159,134,0) 70%),
    linear-gradient(180deg,#fffaf7 0%,#fbf3ef 60%,#f5efe8 100%);
  box-shadow:0 18px 40px -24px rgba(90,70,40,.55), inset 0 0 0 4px rgba(255,255,255,.55), inset 0 0 0 5px rgba(201,166,70,.28);
  height:calc(100vh - 24px); height:calc(100svh - 24px); max-height:860px; min-height:520px;
  display:flex; flex-direction:column;
}
.sdl-w-buehne{position:relative; z-index:1; flex:1 1 auto; min-height:0; display:flex; flex-direction:column; overflow:auto; padding:14px 22px 8px}
.sdl-szene{flex:1 1 auto; min-height:0; display:flex; flex-direction:column; animation:sdlRein .55s cubic-bezier(.2,.7,.2,1) both}
.sdl-szene.raus{animation:sdlRaus .24s ease both}
@keyframes sdlRein{from{opacity:0;transform:translateY(12px) scale(.99)}to{opacity:1;transform:none}}
@keyframes sdlRaus{to{opacity:0;transform:translateY(-8px)}}
@keyframes sdlAuf{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes sdlVonRechts{from{opacity:0; transform:translateX(36px)}to{opacity:1; transform:none}}
@keyframes sdlVonLinks{from{opacity:0; transform:translateX(-36px)}to{opacity:1; transform:none}}
@keyframes sdlSchweben{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

.sdl-w h2,.sdl-w h3,.sdl-w h4{color:var(--w-tief); margin:0; line-height:1.22; font-weight:700; padding:0; border:0; background:none; text-align:left}
.sdl-w h2:focus,.sdl-w h3:focus{outline:none}
.sdl-w h2{font-size:clamp(1.3rem,2.4vw,1.75rem)}
.sdl-w h3{font-size:1.15rem}
.sdl-w p{margin:0; line-height:1.5}
.sdl-w ul,.sdl-w ol{margin:0; padding:0}
.sdl-w li{margin:0}
.sdl-w a{opacity:1 !important}
.sdl-w svg{overflow:visible; max-width:100%}
.sdl-w img{border:0 !important; box-shadow:none !important; margin:0 !important; max-width:100%}
.sdl-w figure{margin:0 !important; padding:0 !important; background:none !important; border:0 !important}
.sdl-w blockquote{margin:0}
.sdl-w .sdl-ic{width:1.1em; height:1.1em; display:inline-block; vertical-align:-.16em; flex:0 0 auto}
.sdl-unter{color:var(--w-leise); font-size:.93rem}
.sdl-klein-hinweis{font-size:.8rem !important; color:var(--w-leise); line-height:1.4 !important; margin-top:8px !important}
.sdl-leer{padding:30px 10px; text-align:center; color:var(--w-leise)}
.sdl-latein{font-style:italic; color:var(--w-gruen-tief); font-size:.86rem !important}
/* Ein Hauch Handschrift: der erste Buchstabe in Burgunder */
.sdl-initiale::first-letter{color:var(--w-burgund); font-size:1.55em; font-weight:700; line-height:1}

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

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

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

.sdl-kopf{display:flex; gap:12px; align-items:center; flex:0 0 auto; margin:0 0 10px}
.sdl-kopf-ic{flex:0 0 44px; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.35rem;
  color:var(--w-gruen-tief); background:radial-gradient(circle at 35% 30%,#fff,var(--w-moos-hell) 80%); border:1px solid #e3c3cc; box-shadow:0 0 0 3px rgba(176,101,122,.18)}
.sdl-kopf-text{min-width:0}
.sdl-kopf .sdl-unter{font-size:.88rem; line-height:1.38}

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

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

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

/* --- Chips, Reiter, Eingaben -------------------------------------------- */
.sdl-chips{display:flex !important; flex-wrap:wrap; gap:6px; align-items:center}
.sdl-w .sdl-chip{display:inline-flex !important; align-items:center; gap:6px !important; padding:5px 13px !important; border-radius:999px !important; font-size:.88rem !important;
  border:1px solid var(--w-rand) !important; background:rgba(255,252,244,.95) !important; color:var(--w-tinte) !important; transition:background .2s,border-color .2s,transform .2s}
.sdl-w .sdl-chip:hover{border-color:var(--w-moos) !important; transform:translateY(-1px)}
.sdl-w .sdl-chip[aria-pressed="true"]{background:var(--w-gruen) !important; color:#fff !important; border-color:var(--w-gruen-tief) !important}
.sdl-reiter{display:flex !important; gap:3px; border-bottom:2px solid var(--w-rand); flex:0 0 auto; margin:0; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none}
.sdl-reiter::-webkit-scrollbar{display:none}
.sdl-w .sdl-reiter-knopf{display:inline-flex !important; align-items:center; padding:7px 11px !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}
.sdl-w .sdl-reiter-knopf:hover{color:var(--w-tief) !important; background:rgba(255,252,244,.7) !important}
.sdl-w .sdl-reiter-knopf[aria-selected="true"]{color:var(--w-tief) !important; border-bottom-color:var(--w-gruen) !important; font-weight:700; background:rgba(255,252,244,.9) !important}
.sdl-tafel{flex:1 1 auto; min-height:0; overflow:auto; padding:10px 6px 4px 0; scrollbar-color:var(--w-moos) #f3ead2}
.sdl-tafel.neu > *{animation:sdlAuf .4s both}
.sdl-w .sdl-eingabe, .sdl-w .sdl-auswahl{font-size:.95rem !important; padding:6px 12px !important; height:38px !important; border-radius:12px !important; border:1px solid var(--w-gold) !important;
  background:#fffdf7 !important; color:var(--w-tinte) !important; outline:none; line-height:1.2 !important; width:auto !important; min-width:0}
.sdl-w .sdl-eingabe:focus,.sdl-w .sdl-auswahl:focus{border-color:var(--w-gruen) !important}
.sdl-w .sdl-auswahl{cursor:pointer; padding-right:6px !important}

/* --- Felder und Hinweis ------------------------------------------------- */
.sdl-feld{display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-radius:14px; background:linear-gradient(160deg,var(--w-moos-zart),var(--w-perg) 70%); border:1px solid #ecd3da; margin:0 0 8px}
.sdl-feld b{display:block; color:var(--w-gruen-tief); font-size:.9rem; margin:0 0 2px}
.sdl-feld p{font-size:.96rem !important; line-height:1.5 !important}
.sdl-feld-ic{flex:0 0 32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.05rem; background:var(--w-perg); border:1px solid #ecd3da; color:var(--w-gruen)}
.sdl-feld.vorsicht{background:linear-gradient(160deg,var(--w-burgund-zart),var(--w-perg) 70%); border-color:#e8dbb4}
.sdl-feld.vorsicht b{color:var(--w-burgund)}
.sdl-feld.vorsicht .sdl-feld-ic{color:var(--w-burgund); border-color:#e8dbb4}
.sdl-feld.leise{background:linear-gradient(160deg,var(--w-gold-zart),var(--w-perg) 70%); border-color:#eadcb8}
.sdl-feld.leise b{color:#80683a}
.sdl-feld.leise .sdl-feld-ic{color:#9a7c3f; border-color:#eadcb8}
.sdl-feld.klein{padding:8px 10px; margin-top:10px}
.sdl-feld.klein p{font-size:.88rem !important; font-style:italic; color:var(--w-gruen-tief)}
.sdl-w .sdl-hinweis{display:flex !important; gap:8px; align-items:flex-start; margin:6px 0 0 !important; padding:6px 11px; border-radius:12px;
  background:rgba(255,252,244,.9); border:1px solid #e3d3b2; color:#4f4433; font-size:.82rem !important; line-height:1.4 !important; flex:0 0 auto}
.sdl-w .sdl-hinweis .sdl-ic{flex:0 0 auto; color:var(--w-burgund); margin-top:1px; width:1.15em; height:1.15em}
.sdl-w .sdl-hinweis.kurz{font-size:.78rem !important; padding:5px 9px}

/* ============ 1. START ============ */
.sdl-start{display:grid !important; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:22px}
.sdl-start-bild{min-height:0; display:flex; align-items:center; justify-content:center}
.sdl-w .sdl-start-svg{width:100%; height:100%; max-height:440px; display:block}
.sdl-w img.sdl-start-foto{display:block !important; width:auto !important; height:auto !important; max-width:100% !important; max-height:440px !important; margin:0 auto !important; padding:0 !important; border:2px solid #ecd3da !important; border-radius:22px !important; box-shadow:0 10px 26px -16px rgba(70,52,36,.55) !important; background:none !important}
.sdl-start-panel{display:flex; flex-direction:column; justify-content:center; gap:9px; min-height:0}
.sdl-w .sdl-seitentitel{font-size:clamp(1.7rem,3.2vw,2.3rem) !important}
.sdl-w .sdl-seitentitel::first-letter{color:var(--w-burgund)}
.sdl-einleitung{font-size:.97rem !important; line-height:1.5 !important}
.sdl-w .sdl-heute{display:flex !important; align-items:center; gap:10px !important; width:100% !important; text-align:left;
  padding:8px 10px !important; border-radius:16px !important; border:1px solid #ecd3da !important; background:linear-gradient(90deg,var(--w-moos-hell),var(--w-perg)) !important;
  color:var(--w-tinte) !important; font-size:.9rem !important; line-height:1.32 !important; transition:transform .25s,border-color .25s; animation:sdlAuf .6s .1s both}
.sdl-w .sdl-heute:hover{transform:translateY(-2px); border-color:var(--w-moos) !important}
.sdl-w .sdl-heute small{display:block; font-size:.74rem; color:var(--w-gruen-tief); font-weight:700}
.sdl-heute-text{display:block; min-width:0}
.sdl-heute-ic{flex:0 0 36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.15rem; background:var(--w-perg); border:1px solid #ecd3da; color:var(--w-gruen)}
.sdl-kacheln{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px}
.sdl-w .sdl-kachel,.sdl-w .sdl-g-knopf{display:flex !important; align-items:center; gap:9px !important; width:100% !important; text-align:left;
  padding:7px 9px !important; border-radius:14px !important; border:1px solid var(--w-rand) !important; background:rgba(255,252,244,.92) !important;
  color:var(--w-tinte) !important; line-height:1.22 !important; transition:transform .25s,border-color .25s; animation:sdlAuf .5s both}
.sdl-w .sdl-kachel:hover,.sdl-w .sdl-g-knopf:hover{transform:translateY(-2px); border-color:var(--w-moos) !important; background:var(--w-perg) !important}
.sdl-kachel-ic{flex:0 0 34px; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.1rem;
  background:radial-gradient(circle at 35% 30%,#fff,var(--w-moos-hell) 80%); border:1px solid #e3c3cc; color:var(--w-gruen-tief)}
.sdl-kachel-text{display:block; min-width:0}
.sdl-kachel-text b{display:block; font-size:.92rem; color:var(--w-tief)}
.sdl-kachel-text small{display:block; font-size:.75rem; color:var(--w-leise)}
.sdl-w .sdl-wunsch-knopf{display:flex !important; align-items:center; gap:9px !important; width:100% !important; padding:8px 14px !important; border-radius:999px !important;
  border:1px solid #e8dbb4 !important; background:linear-gradient(90deg,var(--w-burgund-zart),var(--w-perg)) !important; color:var(--w-burgund) !important; font-size:.95rem !important; text-align:left;
  transition:transform .25s; animation:sdlAuf .6s .35s both}
.sdl-w .sdl-wunsch-knopf span{flex:1 1 auto; min-width:0}
.sdl-w .sdl-wunsch-knopf .sdl-ic{width:1.25em; height:1.25em}
.sdl-w .sdl-wunsch-knopf:hover{transform:translateY(-2px); border-color:var(--w-burgund) !important}

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

/* ============ 3./7. LISTE UND KARTE (Heilkunde, Werke) ============ */
.sdl-lk .sdl-rumpf{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)}
.sdl-g-liste{display:flex; flex-direction:column; gap:7px; justify-content:center; min-height:0; overflow:auto; padding:2px}
.sdl-w .sdl-g-knopf{padding:9px 12px !important}
.sdl-g-knopf .sdl-kachel-text b{font-size:.98rem}
.sdl-g-knopf .sdl-kachel-text small{font-size:.8rem}
.sdl-w .sdl-g-knopf[aria-pressed="true"]{background:linear-gradient(90deg,var(--w-moos-hell),var(--w-perg)) !important; border-color:var(--w-gruen) !important}
.sdl-w .sdl-g-knopf[aria-pressed="true"] .sdl-kachel-ic{background:var(--w-gruen); color:#fff; border-color:var(--w-gruen-tief)}
.sdl-g-karte{min-height:0; overflow:auto; border-radius:20px; padding:16px 20px; background:rgba(255,252,244,.94); border:1px solid var(--w-rand); scrollbar-color:var(--w-moos) #f3ead2;
  box-shadow:inset 0 0 0 4px #fffdf6, inset 0 0 0 5px rgba(176,101,122,.25)}
.sdl-g-karte.neu > *{animation:sdlAuf .4s both}
.sdl-g-karte h3{font-size:1.3rem !important}
.sdl-g-karte h3::first-letter{color:var(--w-burgund)}
.sdl-g-karte > .sdl-unter{margin:2px 0 10px !important}
.sdl-g-punkte{list-style:none !important; display:flex; flex-direction:column; gap:8px; margin:0 !important}
.sdl-g-punkte li{position:relative; padding-left:20px; font-size:.96rem; line-height:1.5; list-style:none !important}
.sdl-g-punkte li::before{content:"" !important; display:block !important; position:absolute; left:3px; top:.55em; width:8px; height:8px; border-radius:50% 0; background:var(--w-moos); border:1px solid var(--w-gruen); transform:rotate(45deg)}
.sdl-g-foto{float:right; width:34%; max-width:180px; margin:0 0 8px 12px !important}
.sdl-g-foto img{display:block; width:100%; border-radius:12px; border:1px solid var(--w-rand) !important}

/* ============ Raster mit Seiten (Küche, Pflanzen, Steine) ============ */
.sdl-raster-feld{flex:1 1 auto; min-height:0; overflow:hidden; padding:2px}
.sdl-raster{display:grid; grid-template-columns:repeat(var(--spalten,4),minmax(0,1fr)); gap:8px}
.sdl-raster > *{animation:sdlAuf .45s both}
.sdl-raster.fuellt{grid-auto-rows:minmax(0,1fr)}
.sdl-w .sdl-raster.fuellt > .sdl-lkarte, .sdl-w .sdl-raster.fuellt > .sdl-rkarte, .sdl-w .sdl-raster.fuellt > .sdl-skarte{height:100% !important}
.sdl-raster.fuellt .sdl-rkarte-bildbox{flex:1 1 auto}
.sdl-w .sdl-lkarte{container-type:size}
@container (min-height:104px){
  .sdl-w .sdl-raster .sdl-lkarte-bild{flex-basis:84px; width:84px; height:84px}
  .sdl-w .sdl-raster .sdl-lkarte-bild svg{width:84px; height:84px}
  .sdl-w .sdl-raster .sdl-lkarte-text b{font-size:1.02rem}
}
.sdl-w .sdl-skarte{container-type:size}
@container (min-height:104px){
  .sdl-w .sdl-raster .sdl-skarte-bild, .sdl-w .sdl-raster .sdl-skarte-bild svg, .sdl-w .sdl-raster .sdl-skarte-bild img{width:70px; height:70px}
}
.sdl-koch-unten{display:flex; align-items:center; justify-content:center; gap:4px 14px; flex-wrap:wrap; flex:0 0 auto}
.sdl-koch-unten .sdl-knopfzeile{margin-top:6px}
.sdl-koch-notiz{font-size:.76rem !important; color:var(--w-leise); text-align:center; margin-top:4px !important}

.sdl-w .sdl-lkarte{display:flex !important; align-items:center; gap:9px !important; width:100% !important; height:92px; text-align:left; padding:7px 10px !important;
  border-radius:16px !important; border:1px solid var(--w-rand) !important; background:rgba(255,252,244,.94) !important; color:var(--w-tinte) !important;
  line-height:1.22 !important; transition:transform .25s,border-color .25s,background .25s; overflow:hidden}
.sdl-w .sdl-lkarte:hover{transform:translateY(-2px); border-color:var(--w-moos) !important; background:linear-gradient(90deg,var(--w-moos-zart),var(--w-perg)) !important}
.sdl-lkarte-bild{flex:0 0 64px; width:64px; height:64px; display:flex; align-items:center; justify-content:center; border-radius:50%; overflow:hidden}
.sdl-w .sdl-lkarte-bild svg{width:64px; height:64px}
.sdl-w .sdl-lkarte-bild img{width:100%; height:100%; object-fit:cover}
.sdl-lkarte-text{display:block; min-width:0}
.sdl-lkarte-text b{display:block; font-size:.95rem; color:var(--w-tief); line-height:1.2}
.sdl-lkarte-text small{display:block; font-size:.78rem; color:var(--w-leise); margin-top:2px; line-height:1.25}
.sdl-w .sdl-lkarte.mass .sdl-lkarte-text small{color:var(--w-burgund)}
.sdl-w .sdl-lkarte.gifte{background:linear-gradient(135deg,var(--w-burgund-zart),var(--w-perg)) !important; border-color:#e8dbb4 !important}
.sdl-w .sdl-lkarte.gifte .sdl-lkarte-bild{background:#fff; border:1px solid #e8dbb4; color:var(--w-burgund); font-size:1.8rem}

/* Küche */
.sdl-koch-oben{display:flex !important; gap:8px 14px; align-items:center; flex:0 0 auto; flex-wrap:wrap; margin:0 0 6px}
.sdl-w .sdl-koch-titel{display:flex !important; align-items:center; gap:9px; font-size:clamp(1.25rem,2.3vw,1.6rem) !important; white-space:nowrap; flex:0 0 auto}
.sdl-w .sdl-koch-titel .sdl-ic{color:var(--w-gruen-tief); width:1.25em; height:1.25em}
.sdl-koch-wahl{margin-left:auto}
.sdl-koch-filter{display:flex; gap:8px; align-items:center; flex-wrap:wrap; flex:0 0 auto; margin:0 0 8px; min-height:38px}
.sdl-w .sdl-koch-filter .sdl-suche{flex:1 1 240px !important; max-width:440px}
.sdl-w .sdl-koch-filter .sdl-auswahl{flex:0 1 200px}
.sdl-koch-satz{font-size:.88rem !important}
.sdl-w .sdl-rkarte{display:flex !important; flex-direction:column; width:100% !important; height:132px; padding:0 !important; text-align:left; overflow:hidden; align-items:stretch;
  border-radius:16px !important; border:1px solid var(--w-rand) !important; background:rgba(255,252,244,.96) !important; color:var(--w-tinte) !important; transition:transform .25s,border-color .25s}
.sdl-w .sdl-rkarte:hover{transform:translateY(-3px); border-color:var(--w-gold) !important}
.sdl-rkarte-bildbox{position:relative; display:block; flex:0 0 68px; height:68px; overflow:hidden; background:linear-gradient(160deg,#fbf3df,#f2e6c8)}
.sdl-w .sdl-rkarte-bild{position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; max-width:none !important; object-fit:contain; display:block; padding:4px}
.sdl-w .sdl-rkarte-bild.ist-foto{object-fit:cover; padding:0}
.sdl-rkarte-text{display:flex; flex-direction:column; gap:3px; padding:6px 9px 8px; min-height:0; flex:1 1 auto}
.sdl-rkarte-text b{font-size:.86rem; line-height:1.22; display:-webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; white-space:normal}
.sdl-rkarte-text small{display:block; font-size:.72rem; line-height:1.25; color:var(--w-leise); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* Kleines Fenster für Lebensmittel und Steine */
.sdl-df-kopf{display:flex; gap:14px; align-items:center; margin:0 40px 10px 0}
.sdl-df-kopf h3{margin:0 !important; font-size:1.35rem !important}
.sdl-df-kopf .sdl-unter{margin:2px 0 0 !important; font-size:.88rem}
.sdl-df-bild{flex:0 0 96px; width:96px; height:96px; display:flex; align-items:center; justify-content:center; border-radius:50%; overflow:hidden; background:#fcf4f6; border:1px solid var(--w-rand)}
.sdl-w .sdl-df-bild svg{width:96px; height:96px}
.sdl-w .sdl-df-bild img{width:100%; height:100%; object-fit:cover}
.sdl-df-bild figcaption{display:none}
.sdl-df-bild.stein{border-radius:22px; background:radial-gradient(circle at 50% 40%,#fff,#f3ead2)}
.sdl-w .sdl-df-bild.stein svg{width:84px; height:84px}
.sdl-df-ic{flex:0 0 60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.8rem; color:var(--w-burgund); background:#fff; border:1px solid #e8dbb4}
.sdl-df-text{font-size:.98rem !important; line-height:1.55 !important; margin:0 0 10px !important}
.sdl-gifte{list-style:none !important; display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px !important}
.sdl-gifte li{padding:3px 12px; border-radius:999px; background:var(--w-burgund-zart); border:1px solid #e8dbb4; color:var(--w-burgund); font-size:.9rem; list-style:none !important}

/* Ein Rezept */
.sdl-rezept-rumpf{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.sdl-r-links{display:flex; flex-direction:column; gap:7px; min-height:0}
.sdl-r-bild{flex:1 1 auto; min-height:80px; border-radius:18px; overflow:hidden; border:1px solid var(--w-rand); background:linear-gradient(160deg,#fbf3df,#f2e6c8); display:flex; align-items:center; justify-content:center}
.sdl-w .sdl-r-bild img{width:100%; height:100%; object-fit:contain; display:block; padding:8px}
.sdl-w .sdl-r-bild img.ist-foto{object-fit:cover; padding:0}
.sdl-w .sdl-r-titel{font-size:clamp(1.2rem,2.2vw,1.5rem) !important}
.sdl-r-kopf .sdl-unter{margin-top:2px !important; font-size:.9rem}
.sdl-r-meta{display:flex; flex-wrap:wrap; gap:6px 16px; align-items:center; font-size:.9rem; color:var(--w-leise)}
.sdl-r-meta > span{display:inline-flex; align-items:center; gap:5px}
.sdl-portionen{display:flex; align-items:center; gap:7px; font-size:.92rem; color:var(--w-tinte)}
.sdl-port-ic{color:var(--w-gruen)}
.sdl-port-text{min-width:96px; text-align:center; font-weight:700}
.sdl-r-knoepfe{margin-top:2px}
.sdl-r-panel{display:flex; flex-direction:column; min-height:0}
.sdl-zutaten{list-style:none !important; display:flex; flex-direction:column}
.sdl-zutaten li{display:grid; grid-template-columns:62px 1fr; gap:10px; padding:5px 4px; border-bottom:1px dashed #eadbbf; font-size:.95rem; animation:sdlAuf .35s both; list-style:none !important}
.sdl-zutaten li b{text-align:right; color:var(--w-burgund)}
.sdl-schritte{list-style:none !important; display:flex; flex-direction:column; gap:8px}
.sdl-schritte li{display:flex; gap:10px; align-items:flex-start; font-size:.95rem; line-height:1.45; animation:sdlAuf .35s both; list-style:none !important}
.sdl-schritte li i{flex:0 0 24px; height:24px; display:flex; align-items:center; justify-content:center; border-radius:50%; font-style:normal; font-weight:700; font-size:.8rem;
  background:var(--w-moos-hell); color:var(--w-gruen-tief); border:1px solid #e3c3cc; margin-top:1px}
.sdl-km-kasten{max-width:820px; height:100%; display:flex; flex-direction:column}
.sdl-kochmodus{display:flex; flex-direction:column; gap:12px; flex:1 1 auto; min-height:0}
.sdl-km-kopf{display:flex; flex-wrap:wrap; gap:4px 14px; align-items:center; padding-right:44px}
.sdl-km-kopf b{font-size:1.1rem; color:var(--w-gruen-tief)}
.sdl-km-kopf > span{font-size:.86rem; color:var(--w-leise)}
.sdl-km-punkte{display:flex; gap:4px; width:100%}
.sdl-km-punkte i{flex:1 1 0; height:6px; border-radius:3px; background:#f1e6cc}
.sdl-km-punkte i.an{background:var(--w-gruen)}
.sdl-km-schritt{flex:1 1 auto; min-height:0; display:flex; align-items:center; justify-content:center; overflow:auto; padding:6px}
.sdl-km-schritt p{font-size:clamp(1.2rem,3vw,1.8rem) !important; line-height:1.45 !important; text-align:center; color:var(--w-tief); max-width:640px}
.sdl-km-schritt p.von-rechts{animation:sdlVonRechts .4s both}
.sdl-km-schritt p.von-links{animation:sdlVonLinks .4s both}
.sdl-km-zutaten{flex:0 1 auto; max-height:40%; overflow:auto; background:#fdf6e6; border-radius:12px; padding:8px 12px; font-size:.9rem}
.sdl-km-zutaten ul{list-style:none !important; columns:2; margin-top:4px !important}
.sdl-km-zutaten li{list-style:none !important}
.sdl-km-zutaten[hidden]{display:none !important}

/* ============ 5. EINE PFLANZE ============ */
.sdl-p-rumpf{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.sdl-p-links{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-height:0; text-align:center}
.sdl-p-bild{flex:1 1 auto; min-height:0; width:100%; max-width:380px; display:flex; flex-direction:column; gap:4px; align-items:center; justify-content:center}
.sdl-w .sdl-p-bild svg{width:100%; height:100%; max-height:260px}
.sdl-w .sdl-p-bild.ist-foto img{max-height:360px; max-width:100%; border-radius:18px; object-fit:cover; box-shadow:0 10px 24px -16px rgba(70,52,36,.55)}
.sdl-p-bild figcaption{font-size:.72rem; color:var(--w-leise); font-style:italic}
.sdl-p-name{flex:0 0 auto}
.sdl-w .sdl-p-name h2{text-align:center !important}
.sdl-p-name .sdl-unter{margin-top:2px !important}
.sdl-p-tafel{padding-top:2px}

/* ============ 6. STEINE ============ */
.sdl-w .sdl-stein-vorwort{display:flex !important; gap:9px; align-items:flex-start; flex:0 0 auto; font-size:.86rem !important; line-height:1.42 !important; color:var(--w-tinte);
  padding:7px 11px; border-radius:14px; background:linear-gradient(90deg,var(--w-gold-zart),var(--w-perg)); border:1px solid #eadcb8; margin:0 0 8px !important}
.sdl-stein-vorwort .sdl-ic{color:#a0803e; width:1.3em; height:1.3em; margin-top:1px}
.sdl-w .sdl-skarte{display:flex !important; flex-direction:column; align-items:center; justify-content:center; gap:3px !important; width:100% !important; height:96px; padding:6px 4px !important;
  border-radius:16px !important; border:1px solid var(--w-rand) !important; background:radial-gradient(circle at 50% 35%,#fff,rgba(255,252,244,.92) 70%) !important; color:var(--w-tief) !important; transition:transform .25s,border-color .25s}
.sdl-w .sdl-skarte:hover{transform:translateY(-3px); border-color:var(--w-gold) !important}
.sdl-skarte-bild{width:54px; height:54px; display:flex; align-items:center; justify-content:center}
.sdl-w .sdl-skarte-bild svg{width:54px; height:54px}
.sdl-w .sdl-skarte-bild img{width:54px; height:54px; object-fit:cover; border-radius:50%}
.sdl-skarte b{font-size:.84rem; line-height:1.15; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.sdl-stein-fenster .sdl-feld{margin-bottom:8px}

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

/* ============ 9. WAS TUT MIR GUT? ============ */
.sdl-wunsch-wahl{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:7px; flex:0 0 auto; margin:0 0 10px}
.sdl-w .sdl-wunsch-chip{display:flex !important; flex-direction:column; align-items:center; justify-content:center; gap:4px !important; width:100% !important; padding:9px 4px !important;
  border-radius:16px !important; border:1px solid var(--w-rand) !important; background:rgba(255,252,244,.94) !important; color:var(--w-tinte) !important; font-size:.88rem !important; transition:transform .2s,border-color .2s}
.sdl-w .sdl-wunsch-chip .sdl-ic{width:1.6em; height:1.6em; color:var(--w-gruen)}
.sdl-w .sdl-wunsch-chip span{white-space:nowrap}
.sdl-w .sdl-wunsch-chip:hover{transform:translateY(-2px); border-color:var(--w-moos) !important}
.sdl-w .sdl-wunsch-chip[aria-pressed="true"]{background:var(--w-gruen) !important; color:#fff !important; border-color:var(--w-gruen-tief) !important}
.sdl-w .sdl-wunsch-chip[aria-pressed="true"] .sdl-ic{color:#fff}
.sdl-wunsch-karte{flex:1 1 auto; min-height:0; overflow:auto; border-radius:20px; padding:14px 20px; background:rgba(255,252,244,.94); border:1px solid var(--w-rand);
  box-shadow:inset 0 0 0 4px #fffdf6, inset 0 0 0 5px rgba(176,101,122,.25)}
.sdl-wunsch-karte.neu > *{animation:sdlAuf .4s both}
.sdl-wunsch-satz{font-size:1.02rem !important; color:var(--w-gruen-tief); margin:0 0 8px !important; font-style:italic}
.sdl-vorschlaege{list-style:none !important; display:flex; flex-direction:column; gap:6px}
.sdl-vorschlaege li{display:flex; align-items:center; gap:10px; padding:6px 4px; border-bottom:1px dashed #eadbbf; list-style:none !important; flex-wrap:wrap}
.sdl-v-punkt{flex:0 0 28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--w-moos-zart); border:1px solid #ecd3da; color:var(--w-gruen)}
.sdl-v-text{flex:1 1 240px; min-width:0; font-size:.96rem; line-height:1.4}
.sdl-w .sdl-v-link{margin-left:auto !important; font-size:.86rem !important; white-space:nowrap}

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

/* --- „Ton erlauben“ – genau wie in Qigong --- */
.sdl-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}
.sdl-tonfrage.offen{opacity:1}
.sdl-tonfrage-kasten{max-width:460px; width:100%; box-sizing:border-box; padding:22px 26px 24px; border-radius:16px; text-align:center;
  background:#24331f !important; color:#f8ecd8 !important; box-shadow:0 18px 50px -12px rgba(0,0,0,.55); border:1px solid rgba(176,101,122,.4);
  font-family:"Comic Sans MS","Comic Neue","Comic Sans","Chalkboard SE",cursive !important; transform:translateY(8px) scale(.98); transition:transform .4s ease}
.sdl-tonfrage.offen .sdl-tonfrage-kasten{transform:none}
.sdl-tonfrage-kasten h3{margin:0 0 8px !important; padding:0 !important; border:0 !important; background:none !important; color:#fbf3e3 !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}
.sdl-tonfrage-kasten p{margin:0 0 16px !important; color:#f0dcb8 !important; font:400 .95rem/1.5 "Comic Sans MS","Comic Neue",cursive !important; text-align:center !important}
.sdl-tonfrage-reihe{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.sdl-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 #f8ecd8 !important; background:transparent !important; color:#fbf3e3 !important; width:auto !important}
.sdl-tonfrage-reihe .sdl-tonfrage-ja{background:#6f8f55 !important; border-color:#ecd3a6 !important}
.sdl-tonfrage-reihe button:hover,.sdl-tonfrage-reihe button:focus-visible{background:#86a66b !important; outline:none}
@media (prefers-reduced-motion:reduce){.sdl-tonfrage,.sdl-tonfrage-kasten{transition:none}}

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

/* --- Drucken --- */
.sdl-druck{display:none}
@media print{
  html.sdl-drucken body > *:not(.sdl-druck){display:none !important}
  html.sdl-drucken .sdl-druck{display:block !important; font-family:"Comic Sans MS","Comic Neue",cursive; color:#222; padding:8mm}
  .sdl-druck h1{font-size:20pt; margin:0 0 1mm; color:#6e2c20}
  .sdl-druck h2{font-size:13pt; margin:5mm 0 2mm; color:#6e2c20}
  .sdl-druck-unter{color:#666; margin:0 0 4mm}
  .sdl-druck-zwei{display:flex; gap:8mm}
  .sdl-druck-zwei > div:first-child{flex:0 0 65mm}
  .sdl-druck li{margin:0 0 1.5mm}
  .sdl-druck-fuss{margin-top:6mm; color:#777; font-size:9pt}
}

/* ============ Niedrige Bildschirme am Rechner ============ */
@media (min-width:761px) and (max-height:820px){
  .sdl-w-buehne{padding:12px 20px 6px}
  .sdl-kopf{margin-bottom:6px}
  .sdl-kopf-ic{flex-basis:38px; width:38px; height:38px}
  .sdl-impuls-karte{padding:18px 24px 16px}
  .sdl-impuls-zeichen{width:66px; height:66px; font-size:2rem}
  .sdl-start-panel{gap:7px}
  .sdl-einleitung{font-size:.92rem !important; line-height:1.45 !important}
  .sdl-w .sdl-heute{padding:6px 10px !important}
  .sdl-g-liste{gap:5px}
  .sdl-w .sdl-g-knopf{padding:6px 10px !important}
  .sdl-g-punkte{gap:6px}
  .sdl-g-punkte li{font-size:.93rem}
  .sdl-hist-text p{font-size:.94rem !important; line-height:1.55 !important}
}

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

  .sdl-w h2{font-size:1.18rem}
  .sdl-kopf{gap:9px; margin-bottom:6px}
  .sdl-kopf-ic{flex-basis:32px; width:32px; height:32px; font-size:1.05rem}
  .sdl-kopf .sdl-unter{font-size:.76rem; line-height:1.3}
  .sdl-rumpf{grid-template-columns:1fr !important; gap:8px}
  .sdl-w .sdl-knopf{font-size:.84rem !important; padding:5px 11px !important; min-height:34px !important; gap:5px !important}
  .sdl-w .sdl-gross{font-size:.95rem !important; min-height:40px !important; padding:7px 16px !important}
  .sdl-knopfzeile{margin-top:6px; gap:6px}
  .sdl-w .sdl-reiter-knopf{padding:5px 9px !important; font-size:.82rem !important}
  .sdl-w .sdl-chip{padding:4px 10px !important; font-size:.8rem !important}
  .sdl-w .sdl-zurueck-knopf{height:30px !important; padding:0 10px 0 8px !important; font-size:.8rem !important}
  .sdl-w .sdl-mini-knopf{width:30px !important; height:30px !important}
  .sdl-w .sdl-hinweis{font-size:.72rem !important; padding:4px 8px; margin-top:4px !important}
  .sdl-w .sdl-hinweis.kurz{font-size:.7rem !important}
  .sdl-nav-text{font-size:.72rem}
  .sdl-feld{padding:7px 9px; gap:8px}
  .sdl-feld p{font-size:.86rem !important}
  .sdl-feld b{font-size:.82rem}
  .sdl-feld-ic{flex-basis:26px; height:26px; font-size:.9rem}
  .sdl-w .sdl-eingabe, .sdl-w .sdl-auswahl{height:34px !important; font-size:.84rem !important; padding:4px 9px !important}

  /* Start */
  .sdl-start{grid-template-columns:1fr; grid-template-rows:minmax(70px,1fr) auto; gap:6px}
  .sdl-w .sdl-start-svg{max-height:200px}
  .sdl-w img.sdl-start-foto{max-height:200px !important}
  .sdl-start-panel{justify-content:flex-start; gap:6px}
  .sdl-w .sdl-seitentitel{font-size:1.3rem !important; text-align:center !important}
  .sdl-einleitung{font-size:.8rem !important; line-height:1.4 !important; text-align:center}
  .sdl-w .sdl-heute{font-size:.78rem !important; padding:5px 8px !important}
  .sdl-heute-ic{flex-basis:30px; height:30px}
  .sdl-kacheln{grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px}
  .sdl-w .sdl-kachel{padding:5px 6px !important; gap:6px !important}
  .sdl-kachel-ic{flex-basis:28px; width:28px; height:28px; font-size:.95rem}
  .sdl-kachel-text b{font-size:.82rem}
  .sdl-kachel-text small{font-size:.7rem}
  .sdl-w .sdl-wunsch-knopf{font-size:.84rem !important; padding:6px 12px !important}

  /* Leben */
  .sdl-zeitleiste{margin-bottom:6px}
  .sdl-w .sdl-zeitpunkt{flex:0 0 66px !important; font-size:.68rem !important}
  .sdl-hist-karte{grid-template-columns:1fr; grid-template-rows:minmax(80px,30%) minmax(0,1fr); gap:8px; padding:10px 12px; align-items:stretch}
  .sdl-hist-text h3{font-size:1.05rem !important; margin-bottom:4px !important}
  .sdl-hist-text p{font-size:.85rem !important; line-height:1.5 !important}

  /* Liste und Karte */
  .sdl-lk .sdl-rumpf{grid-template-rows:auto minmax(0,1fr); gap:8px}
  .sdl-g-liste{display:grid; grid-template-columns:1fr 1fr; gap:5px; overflow:visible}
  .sdl-w .sdl-g-knopf{padding:4px 6px !important; gap:6px !important}
  .sdl-g-knopf .sdl-kachel-ic{flex-basis:26px; width:26px; height:26px; font-size:.85rem}
  .sdl-g-knopf .sdl-kachel-text b{font-size:.8rem}
  .sdl-g-knopf .sdl-kachel-text small{display:none}
  .sdl-g-karte{padding:10px 12px; border-radius:16px}
  .sdl-g-karte h3{font-size:1.05rem !important}
  .sdl-g-karte > .sdl-unter{font-size:.78rem; margin-bottom:6px !important}
  .sdl-g-punkte{gap:5px}
  .sdl-g-punkte li{font-size:.85rem; padding-left:16px}
  .sdl-g-foto{width:30%}

  /* Raster */
  .sdl-raster{gap:6px}
  .sdl-w .sdl-lkarte{height:64px; padding:5px 7px !important; gap:7px !important; border-radius:13px !important}
  .sdl-lkarte-bild{flex-basis:46px; width:46px; height:46px}
  .sdl-w .sdl-lkarte-bild svg{width:46px; height:46px}
  .sdl-lkarte-text b{font-size:.8rem}
  .sdl-lkarte-text small{font-size:.68rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .sdl-w .sdl-lkarte.gifte .sdl-lkarte-bild{font-size:1.3rem}
  .sdl-koch-oben{gap:6px}
  .sdl-w .sdl-koch-titel{font-size:1.08rem !important}
  .sdl-w .sdl-koch-titel .sdl-ic{display:none}
  .sdl-koch-wahl{margin-left:0}
  .sdl-koch-filter{gap:5px; margin-bottom:6px; min-height:34px}
  .sdl-w .sdl-koch-filter .sdl-suche{flex:1 1 100% !important; max-width:none}
  .sdl-w .sdl-koch-filter .sdl-auswahl{flex:1 1 100%}
  .sdl-koch-satz{font-size:.76rem !important; line-height:1.35 !important}
  .sdl-w .sdl-rkarte{height:112px}
  .sdl-rkarte-bildbox{flex-basis:54px; height:54px}
  .sdl-rkarte-text{padding:4px 7px 6px}
  .sdl-rkarte-text b{font-size:.76rem; line-height:1.18}
  .sdl-rkarte-text small{font-size:.66rem}
  .sdl-koch-notiz{display:none}
  .sdl-koch-unten .sdl-knopfzeile{margin-top:4px}
  .sdl-koch-unten .sdl-link{font-size:.8rem !important}

  /* Rezept */
  .sdl-rezept-rumpf{grid-template-rows:auto minmax(0,1fr); gap:6px}
  .sdl-r-links{display:grid; grid-template-columns:64px minmax(0,1fr); gap:3px 10px; align-items:center}
  .sdl-r-bild{grid-row:1 / span 2; min-height:0; width:64px; height:64px; border-radius:14px}
  .sdl-w .sdl-r-bild img{padding:3px}
  .sdl-w .sdl-r-titel{font-size:1.02rem !important}
  .sdl-r-kopf .sdl-unter{display:none}
  .sdl-r-meta{font-size:.78rem; gap:3px 10px}
  .sdl-portionen{font-size:.8rem; gap:5px}
  .sdl-port-text{min-width:76px}
  .sdl-r-knoepfe{grid-column:1 / -1; justify-content:center}
  .sdl-zutaten li{grid-template-columns:50px 1fr; font-size:.85rem; padding:4px 2px; gap:8px}
  .sdl-schritte li{font-size:.85rem}
  .sdl-schritte li i{flex-basis:20px; height:20px; font-size:.72rem}
  .sdl-km-zutaten ul{columns:1}

  /* Pflanze */
  .sdl-p-rumpf{grid-template-rows:auto minmax(0,1fr); gap:6px}
  .sdl-p-links{flex-direction:row; gap:10px; text-align:left; justify-content:flex-start}
  .sdl-p-bild{flex:0 0 76px; width:76px; height:76px}
  .sdl-w .sdl-p-bild svg{max-height:76px}
  .sdl-w .sdl-p-bild.ist-foto img{max-height:76px; width:76px; height:76px}
  .sdl-p-bild figcaption{display:none}
  .sdl-w .sdl-p-name h2{text-align:left !important; font-size:1.1rem}
  .sdl-latein{font-size:.74rem !important}
  .sdl-p-name .sdl-unter{font-size:.78rem}

  /* Steine */
  .sdl-w .sdl-stein-vorwort{font-size:.74rem !important; padding:5px 8px; line-height:1.35 !important; margin-bottom:6px !important}
  .sdl-w .sdl-skarte{height:78px; padding:4px 2px !important}
  .sdl-skarte-bild, .sdl-w .sdl-skarte-bild svg{width:42px; height:42px}
  .sdl-skarte b{font-size:.72rem}
  .sdl-df-kopf{gap:10px}
  .sdl-df-bild{flex-basis:70px; width:70px; height:70px}
  .sdl-w .sdl-df-bild svg{width:70px; height:70px}
  .sdl-w .sdl-df-bild.stein svg{width:62px; height:62px}
  .sdl-df-kopf h3{font-size:1.12rem !important}
  .sdl-df-text{font-size:.88rem !important}

  /* Impuls */
  .sdl-impuls-karte{padding:18px 16px 16px; border-radius:20px}
  .sdl-impuls-zeichen{width:60px; height:60px; font-size:1.8rem; margin-bottom:6px}
  .sdl-impuls-text{font-size:1.08rem !important}

  /* Wunsch */
  .sdl-wunsch-wahl{grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; margin-bottom:6px}
  .sdl-w .sdl-wunsch-chip{padding:5px 2px !important; font-size:.76rem !important; gap:2px !important; border-radius:13px !important}
  .sdl-w .sdl-wunsch-chip .sdl-ic{width:1.35em; height:1.35em}
  .sdl-wunsch-karte{padding:9px 11px; border-radius:16px}
  .sdl-wunsch-satz{font-size:.86rem !important; margin-bottom:4px !important}
  .sdl-vorschlaege{gap:2px}
  .sdl-vorschlaege li{gap:4px 8px; padding:4px 2px}
  .sdl-v-punkt{flex-basis:22px; height:22px; font-size:.8rem}
  .sdl-v-text{font-size:.82rem; flex-basis:180px}
  .sdl-w .sdl-v-link{font-size:.76rem !important; padding:0 2px !important}

  .sdl-mehr-raster{gap:6px}
  .sdl-overlay-kasten{padding:12px 12px 14px}
  .sdl-w .sdl-mehr-kachel{gap:7px !important; padding:9px 8px !important; font-size:.84rem !important}
  .sdl-w .sdl-mehr-kachel span{overflow-wrap:normal !important}
}
@media (max-width:760px) and (max-height:760px){
  .sdl-start{grid-template-rows:minmax(50px,1fr) auto}
  .sdl-kachel-text small{display:none}
  .sdl-einleitung{font-size:.76rem !important; line-height:1.36 !important}
  .sdl-kopf .sdl-unter{display:none}
  .sdl-hist-karte{grid-template-rows:minmax(60px,24%) minmax(0,1fr)}
  .sdl-w .sdl-stein-vorwort{display:none !important}
  .sdl-g-punkte li{font-size:.82rem}
}
@media (prefers-reduced-motion:reduce){
  .sdl-w *, .sdl-box *{animation:none !important; transition:none !important}
}




.sdl-w.frei{height:auto !important; max-height:none !important}
.sdl-w.frei .sdl-w-buehne{overflow:visible}
.sdl-w.frei .sdl-g-karte,.sdl-w.frei .sdl-engel-karte,.sdl-w.frei .sdl-beh-karte,.sdl-w.frei .sdl-hist-text{overflow:visible !important; max-height:none !important}
.sdl-w.frei .sdl-rumpf{flex:1 0 auto}
.sdl-vermerk{max-width:1000px; margin:2px auto 14px !important; padding:0 12px !important; text-align:center !important; font-size:.74rem !important; line-height:1.4 !important; color:#8a7f6a !important; letter-spacing:normal !important; text-transform:none !important; border:0 !important; background:none !important;
  font-family:"Comic Sans MS","Comic Neue",cursive !important}

/* =====================================================================
   DUFTLEXIKON – eigene Teile
   ===================================================================== */
.sdl-w .sdl-hinweis.kurz{background:var(--w-salbei-hell) !important; border-color:#d3e2d5 !important}
.sdl-w .sdl-marke{display:inline-block; align-self:center; background:#fff; border:1px solid #e6cbd2; border-radius:99px; padding:3px 12px; font-size:.8rem; color:var(--w-gruen-tief)}
.sdl-w .sdl-latein{font-style:italic; color:var(--w-leise); font-size:.88rem; margin:2px 0 0 !important}
.sdl-kennzeichen{display:flex; gap:5px; flex-wrap:wrap; margin:6px 0 0 !important}
.sdl-kennz{display:inline-flex; align-items:center; gap:5px; font-size:.74rem; border-radius:99px; padding:2px 9px; background:#fff; border:1px solid var(--w-rand); color:var(--w-leise)}
.sdl-kennz i{width:9px; height:9px; border-radius:50%}
/* Bild eines Öls */
.sdl-obild{margin:0 !important; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; border:2px dashed color-mix(in srgb, var(--f,#d9b3bd) 70%, #fff);
  background:radial-gradient(circle at 50% 40%, #fff, color-mix(in srgb, var(--f,#f8e8ec) 18%, #fff)); color:var(--f,#c9798d); aspect-ratio:1; flex:0 0 auto}
.sdl-obild-ic .sdl-ic{width:44%; height:44%; min-width:26px; min-height:26px; stroke-width:1.4}
.sdl-obild-ic{display:flex; align-items:center; justify-content:center; width:100%; height:100%}
.sdl-obild.ist-foto{border:2px solid #e6cbd2; background:#fff}
.sdl-w .sdl-obild.ist-foto img{width:100% !important; height:100% !important; object-fit:cover; border-radius:50% !important; display:block !important}
.sdl-obild.gross{width:min(190px,28vh)}
.sdl-obild.mittel{width:84px}
/* Start */
.sdl-start{display:grid !important; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:22px}
.sdl-tageskarte{min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; border-radius:20px; border:1px solid var(--w-rand); padding:18px; text-align:center;
  background:linear-gradient(180deg,var(--w-moos-hell),var(--w-perg) 55%,var(--w-salbei-hell)); animation:sdlAuf .5s both}
.sdl-w .sdl-oname{font-size:1.7rem; font-weight:700; color:var(--w-tief); line-height:1.2; text-align:center}
.sdl-w .sdl-oname small{display:block; font-size:.86rem; font-weight:400; font-style:italic; color:var(--w-leise)}
.sdl-tageskarte .sdl-kennzeichen{justify-content:center}
.sdl-w .sdl-tagestext{font-size:.92rem; color:var(--w-leise); max-width:320px; text-align:center}
.sdl-start-panel{display:flex; flex-direction:column; justify-content:center; gap:10px; min-height:0}
.sdl-start .sdl-kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}
.sdl-w .sdl-kachel.gross{grid-column:1 / -1; background:linear-gradient(90deg,var(--w-moos-hell),var(--w-perg)) !important; border-color:#e6cbd2 !important}
/* Tropfen-Chips einer Mischung */
.sdl-mischung{display:inline-flex; flex-wrap:wrap; gap:5px; vertical-align:middle}
.sdl-w .sdl-tropfen{display:inline-flex !important; align-items:center; gap:4px !important; width:auto !important; padding:3px 10px !important; margin:0 !important; border-radius:99px !important; font-size:.84rem !important; line-height:1.3 !important;
  border:1px solid color-mix(in srgb, var(--f,#ccc) 60%, #fff) !important; background:color-mix(in srgb, var(--f,#eee) 14%, #fff) !important; color:var(--w-tinte) !important; box-shadow:none !important}
.sdl-w .sdl-tropfen b{color:color-mix(in srgb, var(--f,#888) 70%, #000)}
.sdl-w .sdl-tropfen:hover{transform:translateY(-1px)}
.sdl-w .sdl-tropfen.still{cursor:default}
/* Kästen */
.sdl-kasten{display:flex; gap:8px; align-items:flex-start; flex-wrap:wrap; border-radius:12px; padding:7px 11px; background:var(--w-moos-zart); border:1px solid #f0dce2; font-size:.9rem; line-height:1.45; margin:0 !important}
.sdl-kasten > b{margin-right:4px}
.sdl-kasten.leicht{background:var(--w-salbei-hell); border-color:#d3e2d5}
.sdl-kasten.warn{background:#fdf2e9; border-color:#f0d2b8; flex-wrap:nowrap}
.sdl-kasten.kauf{background:#fffaf0; border-color:#ecdcb4; flex-wrap:nowrap}
.sdl-kasten .sdl-ic{flex:0 0 auto; margin-top:2px; color:var(--w-gruen-tief)}
.sdl-kasten.warn .sdl-ic{color:#b8693a}
.sdl-kasten span b{color:var(--w-tief)}
.sdl-w .sdl-zwischen{margin:0 !important; font-weight:700; color:var(--w-gruen-tief)}
/* Karte eines Öls */
.sdl-okarte{min-height:0; overflow:auto; border-radius:20px; padding:14px 18px; background:rgba(255,253,249,.96); border:1px solid var(--w-rand); display:flex; flex-direction:column; gap:8px}
.sdl-okarte.neu > *{animation:sdlAuf .35s both}
.sdl-okopf{display:flex; gap:14px; align-items:center}
.sdl-w .sdl-okarte h3{font-size:1.45rem !important; color:var(--w-gruen-tief)}
.sdl-w .sdl-text{line-height:1.55}
.sdl-fakten{display:grid; grid-template-columns:1fr 1fr; gap:3px 14px; font-size:.86rem}
.sdl-fakten span:last-child{grid-column:1 / -1}
.sdl-fakten b{color:var(--w-salbei)}
.sdl-w .sdl-knopf.an{background:var(--w-salbei-hell) !important; border-color:var(--w-salbei) !important; color:#3f5f46 !important}
/* Duftfinder */
.sdl-stimm-chips{flex:0 0 auto; margin:0 0 10px}
.sdl-finder-rumpf{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr) !important; align-items:start}
.sdl-finder-rumpf.neu > *{animation:sdlAuf .4s both}
.sdl-finder-karte{border-radius:20px; padding:14px 18px; background:var(--w-perg); border:1px solid var(--w-rand); display:flex; flex-direction:column; gap:10px}
.sdl-finder-karte .sdl-marke{align-self:flex-start}
.sdl-w .sdl-finder-karte h3{font-size:1.45rem !important; color:var(--w-gruen-tief)}
.sdl-rezept-zeile{display:flex; flex-direction:column; gap:4px; padding:8px 10px; border-radius:12px; background:var(--w-moos-zart); border:1px solid #f0dce2}
.sdl-rezept-zeile > b{color:var(--w-tief); font-size:.95rem}
.sdl-finder-oele{display:flex; flex-direction:column; gap:8px}
.sdl-mini-raster{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px}
.sdl-w .sdl-oel{display:flex !important; align-items:center; gap:8px !important; width:100% !important; height:100%; padding:6px 10px !important; border-radius:12px !important; text-align:left;
  border:1px solid var(--w-rand) !important; background:var(--w-perg) !important; color:var(--w-tinte) !important; transition:transform .2s, border-color .2s; min-width:0}
.sdl-w .sdl-oel:hover{transform:translateY(-1px); border-color:var(--w-moos) !important}
.sdl-w .sdl-oel.an{border-color:var(--w-gruen) !important; background:var(--w-moos-hell) !important}
.sdl-oel i{flex:0 0 11px; width:11px; height:11px; border-radius:50%}
.sdl-oel > span{display:block; min-width:0}
.sdl-oel b{display:block; font-size:.9rem; color:var(--w-tief); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sdl-oel small{display:block; font-size:.72rem; color:var(--w-leise); font-style:italic; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* Lexikon */
.sdl-lexikon .sdl-kopf{flex-wrap:wrap}
.sdl-lexikon .sdl-kopf-text{flex:0 1 auto}
.sdl-w .sdl-suche{margin:0 0 0 auto !important; width:min(260px,100%) !important; padding:7px 14px !important; border:1px solid var(--w-rand) !important; border-radius:99px !important; font-size:.95rem !important; background:#fff !important; color:var(--w-tinte) !important}
.sdl-w .sdl-zettel-knopf{flex:0 0 auto}
.sdl-zaehler-zettel{font-size:.8rem; margin-left:2px}
.sdl-w.mit-musik .sdl-lexikon .sdl-kopf{padding-right:48px}
.sdl-fam-chips{flex:0 0 auto; margin:0 0 8px}
.sdl-w .sdl-chip.farbig{border-color:color-mix(in srgb, var(--f) 55%, #fff) !important}
.sdl-w .sdl-chip.farbig[aria-pressed="true"]{background:var(--f) !important; color:#fff !important; border-color:var(--f) !important}
.sdl-lex-rumpf{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) !important}
.sdl-lex-links{display:flex; flex-direction:column; min-height:0}
.sdl-lex-rechts{min-height:0; display:flex; flex-direction:column}
.sdl-lex-rechts .sdl-okarte{max-height:100%}
.sdl-einzeln .sdl-nav{flex:0 0 auto}
/* Mischen und Wissen */
.sdl-tafel{flex:1 1 auto; display:flex; flex-direction:column; gap:10px; padding:10px 0 4px}
.sdl-tafel.neu > *{animation:sdlAuf .4s both}
.sdl-misch-rumpf{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:16px; align-items:start}
.sdl-w .sdl-schritte{list-style:none !important; margin:0 0 10px !important; padding:0 !important; display:flex; flex-direction:column; gap:7px}
.sdl-w .sdl-schritte li{display:flex; gap:10px; align-items:flex-start; margin:0 !important; list-style:none !important; line-height:1.5}
.sdl-schritte i{flex:0 0 26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-style:normal; font-weight:700; font-size:.85rem; background:var(--w-moos-hell); color:var(--w-gruen-tief); border:1px solid #e6cbd2}
.sdl-misch-bsp{display:flex; flex-direction:column; gap:8px}
.sdl-rechner{border-radius:18px; padding:14px 16px; background:var(--w-perg); border:1px solid var(--w-rand); display:flex; flex-direction:column; gap:8px}
.sdl-w .sdl-rechner h3{font-size:1.2rem !important; color:var(--w-gruen-tief)}
.sdl-rechner-erg{border-radius:14px; background:var(--w-salbei-hell); border:1px solid #d3e2d5; padding:10px 12px; text-align:center}
.sdl-w .sdl-gross-zahl{font-size:1.1rem}
.sdl-gross-zahl b{font-size:2rem; color:var(--w-gruen-tief)}
.sdl-liste2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
/* Einkaufszettel */
.sdl-w .sdl-zettel-liste{list-style:none !important; margin:0 0 8px !important; padding:0 !important; display:flex; flex-direction:column; gap:6px}
.sdl-w .sdl-zettel-liste li{display:flex; gap:10px; align-items:flex-start; justify-content:space-between; margin:0 !important; padding:7px 10px; border-radius:12px; background:var(--w-moos-zart); border:1px solid #f0dce2; list-style:none !important}
.sdl-zettel-liste i{color:var(--w-leise)}
.sdl-zettel-liste small{display:block; color:var(--w-leise); font-size:.78rem}
/* Geschichte ohne Foto */
.sdl-hist-zeichen{justify-content:center}
.sdl-hist-zeichen .sdl-ic{width:min(150px,60%); height:auto; aspect-ratio:1; padding:28px; border-radius:50%; color:var(--w-gruen); stroke-width:1.2;
  background:radial-gradient(circle,var(--w-perg) 0%,var(--w-moos-hell) 100%); border:1px solid #ecd3da; box-sizing:border-box}

@media (min-width:761px) and (max-height:820px){
  .sdl-obild.gross{width:min(150px,22vh)}
  .sdl-okarte{gap:6px; padding:10px 14px}
  .sdl-okarte .sdl-obild.mittel{width:58px}
  .sdl-w .sdl-okarte h3{font-size:1.25rem !important}
  .sdl-okarte .sdl-kasten{padding:5px 10px; font-size:.84rem}
  .sdl-okarte .sdl-text{font-size:.9rem; line-height:1.45 !important}
  .sdl-w .sdl-oname{font-size:1.4rem}
}
@media (max-width:760px){
  .sdl-start{grid-template-columns:1fr !important; grid-template-rows:auto auto !important; gap:8px; align-content:start}
  .sdl-tageskarte{display:grid; grid-template-columns:auto 1fr; column-gap:12px; row-gap:3px; padding:10px 54px 10px 10px; justify-items:start; align-items:center; text-align:left}
  .sdl-tageskarte .sdl-marke{grid-column:1 / -1; justify-self:start; font-size:.74rem}
  .sdl-tageskarte .sdl-obild.gross{width:66px; grid-row:2 / 4}
  .sdl-w .sdl-tageskarte .sdl-oname{font-size:1.2rem; text-align:left; grid-column:2}
  .sdl-tageskarte .sdl-kennzeichen{grid-column:2}
  .sdl-tageskarte .sdl-kennzeichen{justify-content:flex-start}
  .sdl-tageskarte .sdl-tagestext,.sdl-tageskarte .sdl-knopf{display:none !important}
  .sdl-start .sdl-einleitung{display:none}
  .sdl-finder-rumpf,.sdl-lex-rumpf,.sdl-misch-rumpf{grid-template-columns:1fr !important}
  .sdl-lex-rechts{display:none}
  .sdl-w .sdl-suche{margin:6px 0 0 !important; width:100% !important; order:3}
  .sdl-lexikon .sdl-kopf-ic{display:none}
  .sdl-mini-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sdl-mini-raster .sdl-oel b{white-space:normal; overflow-wrap:anywhere}
  .sdl-liste2{grid-template-columns:1fr}
  .sdl-fakten{grid-template-columns:1fr}
  .sdl-okarte{padding:10px 12px}
  .sdl-obild.mittel{width:64px}
}
/* Bild größer: Lupe am Rechner, Vollbild am Handy (17.10.2026) */
.sdl-w img.sdl-lupe-bild{cursor:zoom-in}
.sdl-lupe{position:fixed !important; z-index:999998 !important; pointer-events:none !important; opacity:0; transform:scale(.94); transition:opacity .18s, transform .18s;
  background:#fff !important; border:1px solid #e6cbd2 !important; border-radius:16px !important; padding:6px !important; margin:0 !important; box-shadow:0 18px 44px -12px rgba(70,40,50,.45) !important;
  display:flex !important; flex-direction:column; align-items:center; gap:4px}
.sdl-lupe.offen{opacity:1; transform:none}
.sdl-lupe img{display:block !important; width:auto !important; height:auto !important; max-width:min(380px,42vw) !important; max-height:min(380px,70vh) !important; border-radius:11px !important; border:0 !important; box-shadow:none !important; margin:0 !important; padding:0 !important}
.sdl-lupe-name{font-family:"Comic Sans MS","Comic Neue",cursive !important; font-size:.8rem !important; color:#7a5d66 !important; padding:0 4px 2px}
.sdl-vollbild{position:fixed !important; inset:0 !important; z-index:999999 !important; background:rgba(30,20,26,.94) !important; display:flex !important; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:16px !important; margin:0 !important}
.sdl-vollbild img{display:block !important; max-width:100% !important; max-height:82vh !important; width:auto !important; height:auto !important; border-radius:12px !important; border:0 !important; margin:0 !important; box-shadow:0 10px 40px rgba(0,0,0,.5) !important}
.sdl-vollbild-name{color:#f6e9ee !important; font-family:"Comic Sans MS","Comic Neue",cursive !important; font-size:1rem !important; margin:0 !important; text-align:center}
.sdl-vollbild .sdl-vollbild-zu{position:absolute !important; top:12px; right:12px; width:44px !important; height:44px !important; border-radius:50% !important; padding:0 !important; margin:0 !important;
  font-size:1.6rem !important; line-height:1 !important; background:#fff !important; color:#5b3a46 !important; border:0 !important; display:flex !important; align-items:center; justify-content:center; letter-spacing:0 !important; text-transform:none !important}
@media (prefers-reduced-motion:reduce){.sdl-lupe{transition:none}}

/* Rollbalken (Gordon am 17.10.2026): am Handy keine inneren Rollbalken -
   der Kasten wächst mit, man schiebt die Seite. Am Rechner ein deutlich
   sichtbarer Balken mit Anfasser, auch für Leute ohne Mausrad. */
@media (max-width:760px){
  .sdl-w.handy-frei{height:auto !important; max-height:none !important}
  .sdl-w.handy-frei .sdl-w-buehne{overflow:visible !important}
  .sdl-w .sdl-handy-offen{overflow:visible !important; max-height:none !important}
  .sdl-w .sdl-handy-wachsen{flex-shrink:0 !important; max-height:none !important}
}
@media (min-width:761px){
  .sdl-w ::-webkit-scrollbar{width:11px}
  .sdl-w ::-webkit-scrollbar-track{background:rgba(120,100,70,.08); border-radius:10px}
  .sdl-w ::-webkit-scrollbar-thumb{background:rgba(120,100,70,.5); border-radius:10px; border:2px solid transparent; background-clip:padding-box; min-height:40px}
  .sdl-w ::-webkit-scrollbar-thumb:hover{background:rgba(120,100,70,.75); background-clip:padding-box}
  @supports (-moz-appearance:none){ .sdl-w, .sdl-w *{scrollbar-color:rgba(120,100,70,.55) rgba(120,100,70,.08)} }
}

/* =====================================================================
   MEIN MISCHBUCH (18.10.2026)
   ===================================================================== */
.sdl-mb-oben .sdl-kopf{position:relative}
.sdl-w .sdl-mb-aendern{margin-left:auto !important; align-self:center}
.sdl-mb-weg{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin:0 0 10px; flex:0 0 auto}
.sdl-w .sdl-mb-schritt{display:flex !important; align-items:center; justify-content:center; gap:6px !important; padding:6px 8px !important; border-radius:999px !important; border:1px solid var(--w-rand) !important;
  background:#fff !important; color:var(--w-leise) !important; font-size:.84rem !important; min-width:0; width:100% !important; margin:0 !important}
.sdl-mb-schritt i{font-style:normal; width:20px; height:20px; flex:0 0 20px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--w-moos-hell); color:var(--w-gruen-tief); font-size:.75rem; font-weight:700}
.sdl-mb-schritt span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sdl-mb-schritt .sdl-ic{width:14px; height:14px; flex:0 0 14px}
.sdl-w .sdl-mb-schritt.an{background:var(--w-gruen) !important; color:#fff !important; border-color:var(--w-gruen-tief) !important}
.sdl-mb-schritt.an i{background:#fff}
.sdl-w .sdl-mb-schritt.fertig{background:var(--w-salbei-hell) !important; color:#3f5f46 !important; border-color:#c7dccb !important}
.sdl-mb-rumpf{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.95fr); gap:16px; align-items:start}
.sdl-mb-rumpf.neu > *{animation:sdlAuf .4s both}
.sdl-mb-rezept{grid-template-columns:minmax(0,1.2fr) minmax(0,.85fr)}
.sdl-mb-links{display:flex; flex-direction:column; gap:8px; min-width:0}
.sdl-mb-filter{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.sdl-w .sdl-mb-filter .sdl-suche{margin:0 !important; width:100% !important}
.sdl-mb-filter .sdl-fam-chips{margin:0}
.sdl-mb-oele{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:7px}
.sdl-w .sdl-mb-oel{position:relative; display:flex !important; flex-direction:column; align-items:center; gap:4px !important; padding:8px 4px 6px !important; border-radius:14px !important;
  border:1px solid var(--w-rand) !important; background:var(--w-perg) !important; color:var(--w-tinte) !important; font-size:.8rem !important; line-height:1.2 !important; text-align:center; width:100% !important; margin:0 !important; transition:transform .2s, border-color .2s}
.sdl-w .sdl-mb-oel:hover{transform:translateY(-2px); border-color:var(--w-moos) !important}
.sdl-w .sdl-mb-oel.an{border:2px solid var(--w-gruen) !important; background:var(--w-moos-hell) !important; padding:7px 3px 5px !important}
.sdl-mb-oel b{font-weight:400}
.sdl-mb-haken{position:absolute; top:4px; right:5px; width:20px; height:20px; border-radius:50%; background:var(--w-gruen); color:#fff; display:flex; align-items:center; justify-content:center}
.sdl-mb-haken .sdl-ic{width:13px; height:13px}
.sdl-mb-bild,.sdl-mb-punkt,.sdl-mb-tbild{flex:0 0 auto; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--f,#d9b3bd) 30%, #fff); color:var(--f,#b0657a); border:2px solid #fff; box-shadow:0 1px 5px rgba(70,40,50,.18)}
.sdl-mb-bild{width:58px; height:58px}
.sdl-mb-punkt{width:24px; height:24px; border-width:1px}
.sdl-mb-tbild{width:42px; height:42px}
.sdl-mb-bild .sdl-ic{width:46%; height:46%}.sdl-mb-punkt .sdl-ic{width:60%; height:60%}.sdl-mb-tbild .sdl-ic{width:50%; height:50%}
.sdl-w .sdl-mb-bild img,.sdl-w .sdl-mb-punkt img,.sdl-w .sdl-mb-tbild img{width:100% !important; height:100% !important; object-fit:cover; border-radius:50% !important; border:0 !important; margin:0 !important; display:block !important; box-shadow:none !important}
.sdl-mb-tbild.leer{background:var(--w-salbei-hell); color:var(--w-salbei)}
.sdl-mb-panel{border:1px solid var(--w-rand); border-radius:18px; background:var(--w-perg); padding:12px 14px; display:flex; flex-direction:column; gap:8px; min-width:0}
.sdl-w .sdl-mb-panel h3{margin:4px 0 0 !important; font-size:1.05rem !important; color:var(--w-gruen-tief)}
.sdl-w .sdl-mb-lbl{margin:4px 0 -2px !important; font-size:.84rem !important; font-weight:700; color:var(--w-tief)}
.sdl-mb-gewaehlt,.sdl-mb-gemerkt{display:flex; flex-wrap:wrap; gap:6px}
.sdl-w .sdl-mb-chip{display:inline-flex !important; align-items:center; gap:6px !important; padding:3px 10px 3px 3px !important; border-radius:999px !important; border:1px solid var(--w-moos) !important;
  background:var(--w-moos-hell) !important; color:var(--w-tinte) !important; font-size:.84rem !important; margin:0 !important}
.sdl-mb-chip i{font-style:normal; color:var(--w-gruen-tief)}
.sdl-mb-chips{margin:0}
.sdl-w .sdl-mb-los{align-self:flex-start}
.sdl-w .sdl-mb-los:disabled{opacity:.45; cursor:not-allowed}
.sdl-mb-unten{display:flex}
.sdl-w .sdl-mb-los.nur-handy{display:none !important}
.sdl-w .sdl-mb-meldung{margin:0 !important; background:#fdf2e9; border:1px solid #f0d2b8; border-radius:10px; padding:5px 10px; font-size:.84rem; color:#8a4a24}
.sdl-mb-gem-zeile{display:inline-flex; align-items:center; gap:2px}
.sdl-w .sdl-mb-gem{padding:4px 11px !important; border-radius:999px !important; border:1px solid var(--w-rand) !important; background:#fff !important; color:var(--w-tinte) !important; font-size:.8rem !important; margin:0 !important; max-width:260px}
.sdl-mb-gem span{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* Rezept */
.sdl-mb-ampel{display:flex; gap:12px; align-items:flex-start; border-radius:14px; padding:9px 13px; font-size:.9rem; line-height:1.45}
.sdl-mb-ampel b{display:block; margin-bottom:2px}
.sdl-w .sdl-mb-ampel ul{margin:2px 0 0 18px !important; padding:0 !important; list-style:disc !important}
.sdl-w .sdl-mb-ampel li{margin:0 0 3px !important; list-style:disc !important; font-size:.86rem}
.sdl-mb-licht{flex:0 0 auto; display:flex; flex-direction:column; gap:3px; padding:4px; border-radius:10px; background:#3d3335}
.sdl-mb-licht i{width:12px; height:12px; border-radius:50%; background:#5d5154}
.sdl-mb-ampel.stufe0{background:var(--w-salbei-hell); border:1px solid #c7dccb}.sdl-mb-ampel.stufe0 b{color:#3f5f46}.sdl-mb-ampel.stufe0 .sdl-mb-licht i:nth-child(3){background:#6fbf73; box-shadow:0 0 6px #6fbf73}
.sdl-mb-ampel.stufe1{background:#fff7e3; border:1px solid #efd9a3}.sdl-mb-ampel.stufe1 b{color:#8a6a18}.sdl-mb-ampel.stufe1 .sdl-mb-licht i:nth-child(2){background:#e8b93c; box-shadow:0 0 6px #e8b93c}
.sdl-mb-ampel.stufe2{background:#fdecea; border:1px solid #efc2bb}.sdl-mb-ampel.stufe2 b{color:#a0442c}.sdl-mb-ampel.stufe2 .sdl-mb-licht i:nth-child(1){background:#e0584a; box-shadow:0 0 6px #e0584a}
.sdl-mb-tabelle{display:flex; flex-direction:column}
.sdl-mb-tkopf,.sdl-mb-zeile{display:grid; grid-template-columns:48px minmax(0,1fr) 64px minmax(90px,140px); gap:8px; align-items:center; padding:6px 2px; border-bottom:1px dashed var(--w-rand)}
.sdl-mb-tkopf{font-size:.74rem; color:var(--w-leise); padding-top:0}
.sdl-mb-tname b{display:block; font-weight:700}.sdl-mb-tname small{color:var(--w-leise); font-size:.78rem}
.sdl-mb-tropfen{font-size:1.25rem; font-weight:700; color:var(--w-gruen-tief); text-align:center}
.sdl-w input.sdl-mb-regler{width:100% !important; accent-color:var(--w-gruen); padding:0 !important; margin:0 !important; border:0 !important; background:none !important; height:24px !important}
.sdl-mb-zeile.basis{border-bottom:0}
.sdl-w .sdl-mb-summe{margin:0 !important}
.sdl-w .sdl-mb-zurueck{align-self:flex-start}
.sdl-w .sdl-mb-liste,.sdl-w .sdl-mb-schritte{margin:0 0 0 20px !important; padding:0 !important; font-size:.9rem; line-height:1.5}
.sdl-w .sdl-mb-liste li{list-style:disc !important; margin:0 0 3px !important}
.sdl-w .sdl-mb-schritte li{list-style:decimal !important; margin:0 0 4px !important}
.sdl-mb-panel .sdl-knopfzeile{flex-wrap:wrap; gap:6px}
@media (max-width:760px){
  .sdl-mb-weg{gap:4px}
  .sdl-w .sdl-mb-schritt{font-size:.72rem !important; padding:5px 4px !important; gap:3px !important}
  .sdl-mb-schritt i{width:17px; height:17px; flex-basis:17px; font-size:.68rem}
  .sdl-mb-schritt .sdl-ic{display:none}
  .sdl-mb-rumpf,.sdl-mb-rezept{grid-template-columns:1fr; gap:10px}
  .sdl-mb-wahl .sdl-mb-panel{order:-1}
  .sdl-mb-oele{grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px}
  .sdl-mb-bild{width:50px; height:50px}
  .sdl-w .sdl-mb-los.nur-handy{display:inline-flex !important; margin:6px auto 0 !important}
  .sdl-mb-unten{justify-content:center}
  .sdl-mb-tkopf,.sdl-mb-zeile{grid-template-columns:40px minmax(0,1fr) 44px 92px; gap:6px}
  .sdl-mb-tbild{width:36px; height:36px}
  .sdl-w .sdl-mb-aendern span{display:none}
}
.sdl-w .sdl-mb-vorsicht ul{margin:3px 0 0 16px !important; padding:0 !important}
.sdl-w .sdl-mb-vorsicht li{list-style:disc !important; margin:0 0 2px !important; font-size:.86rem}