/* Schmecktle. Palette und Schriften wie Zungo und Quiz. Jede Regel ist unter .sm
   gekapselt, weil Newspaper eigene Regeln für .btn, Listen, Buttons und Überschriften hat. */

@font-face{
  font-family:'SmDisplay';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(../../ws-zungo/assets/fonts/archivo-var-latin.woff2) format('woff2');
}
@font-face{
  font-family:'SmText';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(../../ws-zungo/assets/fonts/opensans-var-latin.woff2) format('woff2');
}

.sm{
  --ink:#1d1b1a;--paper:#fbf7f1;--line:#e7e1d8;--muted:#55504a;
  --rot:#e1523d;--gelb:#e0a82e;--gruen:#1e8e5a;--grau:#d9d2c7;
  font-family:'SmText',system-ui,sans-serif;color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:14px;padding:22px 20px 18px;margin:0 0 28px;
  max-width:640px;box-sizing:border-box;line-height:1.5;
}
.sm *,.sm *::before,.sm *::after{box-sizing:border-box}
.sm [hidden]{display:none !important}
.sm ol,.sm ul{list-style:none;margin:0;padding:0}
.sm li{margin:0;padding:0}
.sm li::before{content:none}
.sm a{color:inherit}

/* Kopf */
.sm .sm-kopf{text-align:center;margin-bottom:10px}
.sm .sm-marke{display:inline-flex;gap:3px;flex-wrap:wrap;justify-content:center}
.sm .sm-k{
  font-family:'SmDisplay',system-ui,sans-serif;font-weight:800;font-size:22px;line-height:1;
  width:30px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border:2px solid var(--grau);border-radius:6px;text-transform:uppercase;
}
.sm .sm-k--rot{background:var(--rot);border-color:var(--rot);color:#fff}
.sm .sm-k--gelb{background:var(--gelb);border-color:var(--gelb);color:#fff}
.sm .sm-k--gruen{background:var(--gruen);border-color:var(--gruen);color:#fff}
.sm .sm-unter{margin:8px 0 0;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sm .sm-lede{margin:6px 0 16px;text-align:center;font-size:15px;color:var(--muted)}

/* Hinweise */
.sm .sm-hinweise{display:grid;gap:8px;margin-bottom:16px}
.sm .sm-hinweis{background:#fff;border:1px solid var(--line);border-left:4px solid var(--rot);border-radius:10px;padding:10px 12px}
.sm .sm-hinweis--zu{background:transparent;border-style:dashed;border-left-width:1px;color:var(--muted)}
.sm .sm-hinweis--leer{border-left-color:var(--grau)}
.sm .sm-hart{display:block;font-family:'SmDisplay',system-ui,sans-serif;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rot);margin-bottom:2px}
.sm .sm-hinweis--zu .sm-hart{color:var(--muted)}
.sm .sm-htext{display:block;font-size:15px}
.sm .sm-hinweis--bild img{display:block;width:100%;max-height:260px;object-fit:cover;border-radius:6px;margin-top:6px}
.sm .sm-unscharf{filter:blur(9px) saturate(.85);transform:scale(1.04)}
.sm .sm-hinweis--bild{overflow:hidden}

/* Tipps */
.sm .sm-tipps{display:grid;gap:6px;margin-bottom:14px}
.sm .sm-tipp{display:flex;align-items:center;gap:10px;min-height:40px;padding:6px 12px;border-radius:8px;background:#fff;border:1px solid var(--line)}
.sm .sm-tipp--leer{background:transparent;border-style:dashed;color:#9c958b}
.sm .sm-tipp--treffer{border-color:var(--gruen);background:#e8f4ee}
.sm .sm-tipp--gruppe{border-color:var(--gelb);background:#fbf2df}
.sm .sm-tipp--daneben{border-color:#efc9c1;background:#fcefec}
.sm .sm-tname{font-weight:600;flex:1}
.sm .sm-tipp--leer .sm-tname{font-weight:400}
.sm .sm-tinfo{font-size:12px;color:var(--muted)}
.sm .sm-q{width:18px;height:18px;border-radius:4px;flex:none;background:var(--grau);display:inline-block;vertical-align:middle}
.sm .sm-q--treffer{background:var(--gruen)}
.sm .sm-q--gruppe{background:var(--gelb)}
.sm .sm-q--daneben{background:var(--rot)}

/* Eingabe */
.sm .sm-eingabe{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.sm .sm-feld{position:relative;flex:1 1 240px}
.sm .sm-feld input{
  width:100%;height:46px;padding:0 14px;font:inherit;font-size:16px;color:var(--ink);
  border:2px solid var(--ink);border-radius:10px;background:#fff;outline:none;margin:0;
}
.sm .sm-feld input:focus{border-color:var(--rot)}
.sm .sm-vorschlag{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:20;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);overflow:hidden}
.sm .sm-vorschlag li{padding:10px 14px;cursor:pointer;font-size:15px}
.sm .sm-vorschlag li.sm-aktiv,.sm .sm-vorschlag li:hover{background:#fbeae6}
.sm .sm-vorschlag li.sm-vleer{color:var(--muted);cursor:default;background:#fff}
.sm .sm-btn{
  display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 22px;
  font-family:'SmDisplay',system-ui,sans-serif;font-weight:700;font-size:16px;line-height:1;
  color:#fff;background:var(--rot);border:0;border-radius:10px;cursor:pointer;text-decoration:none;
  box-shadow:none;text-transform:none;letter-spacing:0;margin:0;
}
.sm .sm-btn:hover{background:#c9432f;color:#fff}
.sm .sm-btn:disabled{opacity:.6;cursor:wait}
.sm .sm-btn--hell{background:#fff;color:var(--ink);border:2px solid var(--ink)}
.sm .sm-btn--hell:hover{background:var(--ink);color:#fff}
.sm .sm-fehler{flex-basis:100%;margin:2px 0 0;font-size:14px;color:var(--rot)}

/* Ende */
.sm .sm-ergebnis{font-family:'SmDisplay',system-ui,sans-serif;font-weight:800;font-size:22px;text-align:center;margin:4px 0 14px}
.sm .sm-ergebnis--ja{color:var(--gruen)}
.sm .sm-lkarte{display:flex;gap:14px;align-items:stretch;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;text-decoration:none;margin-bottom:16px}
.sm a.sm-lkarte:hover{border-color:var(--rot)}
.sm .sm-lkarte img{width:38%;max-width:210px;object-fit:cover;flex:none;display:block;margin:0}
.sm .sm-ltext{padding:12px 14px 12px 0;display:flex;flex-direction:column;gap:4px}
.sm .sm-lkick{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.sm .sm-lname{font-family:'SmDisplay',system-ui,sans-serif;font-size:24px;line-height:1.1}
.sm .sm-lbeschr{font-size:14px;color:var(--muted)}
.sm .sm-lmehr{font-size:14px;font-weight:700;color:var(--rot);margin-top:auto}

.sm .sm-teilen{text-align:center;margin-bottom:18px}
.sm .sm-raster{font-family:inherit;font-size:22px;line-height:1.4;white-space:pre-wrap;background:transparent;border:0;padding:0;margin:0 0 12px;color:var(--ink);overflow:visible}
.sm .sm-teilen__knoepfe{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.sm .sm-kopiert{margin:8px 0 0;font-size:14px;color:var(--gruen)}

.sm .sm-zahlen{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;text-align:center;margin-bottom:12px}
.sm .sm-zahl span{display:block;font-family:'SmDisplay',system-ui,sans-serif;font-weight:800;font-size:24px;line-height:1.1}
.sm .sm-zahl small{display:block;font-size:12px;color:var(--muted)}
.sm .sm-heute{font-size:14px;text-align:center;margin:0 0 8px}
.sm .sm-balken{display:grid;gap:4px}
.sm .sm-balken li{display:flex;align-items:center;gap:8px;font-size:13px}
.sm .sm-bl{width:14px;text-align:right;font-weight:700}
.sm .sm-bb{display:block;background:var(--grau);color:var(--ink);border-radius:4px;padding:1px 6px;text-align:right;font-weight:700;min-width:24px}
.sm .sm-eigen .sm-bb{background:var(--gruen);color:#fff}
.sm .sm-naechstes{text-align:center;font-size:14px;color:var(--muted);margin:14px 0 0}

.sm .sm-regeln{margin-top:16px;border-top:1px solid var(--line);padding-top:10px;font-size:14px}
.sm .sm-regeln summary{cursor:pointer;font-weight:700}
.sm .sm-regeln p{margin:8px 0}
.sm .sm-regeln li{display:flex;align-items:center;gap:8px;margin:4px 0}
.sm .sm-gestern{margin:10px 0 0;font-size:13px;color:var(--muted);text-align:center}
.sm .sm-gestern a{color:var(--rot);font-weight:600}
.sm .sm-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Animation für den jeweils neuesten Tipp und Hinweis */
.sm .sm-neu{animation:sm-pop .35s ease-out}
@keyframes sm-pop{0%{transform:scale(.96);opacity:.2}100%{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.sm .sm-neu{animation:none}}

@media (max-width:480px){
  .sm{padding:16px 14px 14px;border-radius:12px}
  .sm .sm-k{width:26px;height:30px;font-size:19px}
  .sm .sm-lkarte{flex-direction:column}
  .sm .sm-lkarte img{width:100%;max-width:none;height:150px}
  .sm .sm-ltext{padding:0 14px 14px}
  .sm .sm-btn{flex:1 1 auto}
}

/* Das Mobil-Theme setzt inline .td-post-content p/li auf 17px !important. Dagegen hilft
   nur höhere Spezifität plus !important auf jeder Klasse (siehe Zungo). */
div.sm p,div.sm li{font-size:15px !important;line-height:1.5 !important}
div.sm .sm-unter{font-size:13px !important}
div.sm .sm-ergebnis{font-size:22px !important;line-height:1.25 !important}
div.sm .sm-heute,div.sm .sm-naechstes,div.sm .sm-fehler,div.sm .sm-kopiert{font-size:14px !important}
div.sm .sm-gestern{font-size:13px !important}
div.sm .sm-balken li{font-size:13px !important}
div.sm .sm-regeln p,div.sm .sm-regeln li{font-size:14px !important}