/* Sketchi 0.6.51 – Storys, Persönlichkeiten und Comic-Szenen */
.qs-sketchi {
  position: fixed;
  left: 18px;
  bottom: 62px;
  z-index: 2147483400;
  width: 420px;
  height: 210px;
  pointer-events: none;
  user-select: none;
}
.qs-sketchi[hidden] { display: none !important; }

.qs-sketchi-power-off {
  position: absolute;
  left: 118px;
  top: 8px;
  z-index: 12;
  width: 25px;
  height: 25px;
  padding: 0;
  border: 1px solid rgba(32,36,40,.18);
  border-radius: 50%;
  background: rgba(255,255,255,.93);
  color: #4f5962;
  box-shadow: 0 4px 12px rgba(20,27,33,.12);
  font: 800 11px/23px Arial, sans-serif;
  text-align: center;
  cursor: pointer;
  pointer-events: auto;
  opacity: .72;
  transition: opacity .16s ease, transform .16s ease, background .16s ease;
}
.qs-sketchi-power-off:hover {
  opacity: 1;
  transform: scale(1.08);
  background: #fff;
}
.qs-sketchi-offstate {
  display: none;
  position: absolute;
  left: 0;
  bottom: 4px;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 5px 6px 5px 10px;
  border: 1px solid #d9dee3;
  border-radius: 12px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 6px 16px rgba(19,27,34,.10);
  color: #707a83;
  font: 600 11px/1.2 Arial, sans-serif;
  white-space: nowrap;
  pointer-events: auto;
}
.qs-sketchi-offstate button {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: #202428;
  color: #fff;
  font: 800 11px/24px Arial, sans-serif;
  cursor: pointer;
}
.qs-sketchi-offstate button:hover { transform: translateY(-1px); }
.qs-sketchi.is-disabled .qs-sketchi-offstate { display: flex; }
.qs-sketchi.is-disabled .qs-sketchi-power-off,
.qs-sketchi.is-disabled .qs-sketchi-character,
.qs-sketchi.is-disabled .qs-sketchi-bubble,
.qs-sketchi.is-disabled .qs-sketchi-ask,
.qs-sketchi.is-disabled .qs-sketchi-sparkles,
.qs-sketchi.is-disabled .qs-sketchi-ground-shadow,
.qs-sketchi.is-disabled .qs-sketchi-trace,
.qs-sketchi.is-disabled .qs-sketchi-crumbs,
.qs-sketchi.is-disabled .qs-sketchi-emote { display: none !important; }

.qs-sketchi-character {
  position: absolute;
  left: 0;
  bottom: 6px;
  width: 140px;
  height: 190px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  transform-origin: 34% 90%;
  animation: qs-sketchi-breathe 3.6s ease-in-out infinite;
}
.qs-sketchi-character:focus-visible {
  outline: 3px solid #1670b8;
  outline-offset: 4px;
  border-radius: 18px;
}
.qs-sketchi-figure {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.qs-sketchi-base {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(20, 27, 33, 0.14));
}
.qs-sketchi-face {
  position: absolute;
  inset: 0;
}
.qs-sketchi-eye {
  position: absolute;
  width: 28px;
  height: 42px;
  background: #fff;
  border: 4px solid #111;
  border-radius: 52% 52% 50% 50% / 54% 54% 46% 46%;
  box-sizing: border-box;
  overflow: hidden;
  transition: transform .18s ease, opacity .18s ease;
}
.qs-sketchi-eye-left { left: 50px; top: 58px; transform: rotate(-10deg); }
.qs-sketchi-eye-right { left: 79px; top: 51px; transform: rotate(-10deg); }
.qs-sketchi-lid {
  position: absolute;
  left: -3px;
  top: -3px;
  width: calc(100% + 6px);
  height: 12px;
  background: #fff;
  border-bottom: 4px solid #111;
  box-sizing: border-box;
}
.qs-sketchi-pupil {
  position: absolute;
  left: 9px;
  top: 15px;
  width: 10px;
  height: 15px;
  background: #000;
  border-radius: 50%;
  transition: transform .18s ease, opacity .18s ease;
}
.qs-sketchi-eye-right .qs-sketchi-pupil { left: 8px; }
.qs-sketchi-mouth {
  position: absolute;
  left: 66px;
  top: 110px;
  width: 28px;
  height: 16px;
  border: 4px solid #111;
  border-top: 0;
  border-left: 0;
  background: transparent;
  border-radius: 0 0 18px 0;
  transform: rotate(-13deg);
  transition: all .18s ease;
  overflow: hidden;
}
.qs-sketchi-mouth-inner,
.qs-sketchi-tongue { display: none; }

.qs-sketchi.is-winking .qs-sketchi-eye-right {
  height: 14px;
  top: 63px;
  border-radius: 16px;
}
.qs-sketchi.is-winking .qs-sketchi-eye-right .qs-sketchi-pupil { opacity: 0; }
.qs-sketchi.is-winking .qs-sketchi-eye-right .qs-sketchi-lid {
  height: 100%;
  border-bottom-width: 4px;
}
.qs-sketchi.is-sleepy .qs-sketchi-eye {
  height: 15px;
  top: 65px;
  border-radius: 16px;
}
.qs-sketchi.is-sleepy .qs-sketchi-eye-right { top: 58px; }
.qs-sketchi.is-sleepy .qs-sketchi-pupil { opacity: 0; }
.qs-sketchi.is-sleepy .qs-sketchi-lid { height: 100%; }
.qs-sketchi.is-talking .qs-sketchi-mouth,
.qs-sketchi.is-happy .qs-sketchi-mouth {
  left: 62px;
  top: 108px;
  width: 40px;
  height: 34px;
  border: 4px solid #111;
  border-top-width: 3px;
  border-radius: 0 0 22px 22px;
  background: #111;
  transform: rotate(-12deg);
}
.qs-sketchi.is-talking .qs-sketchi-mouth-inner,
.qs-sketchi.is-happy .qs-sketchi-mouth-inner {
  display: block;
  position: absolute;
  left: -1px;
  top: -1px;
  width: calc(100% + 2px);
  height: 12px;
  background: #fff;
  border-radius: 0 0 14px 14px;
}
.qs-sketchi.is-talking .qs-sketchi-tongue,
.qs-sketchi.is-happy .qs-sketchi-tongue {
  display: block;
  position: absolute;
  right: 6px;
  bottom: 3px;
  width: 16px;
  height: 12px;
  background: #df75a0;
  border-radius: 50% 50% 60% 60%;
}
.qs-sketchi.is-look-left .qs-sketchi-pupil { transform: translateX(-3px); }
.qs-sketchi.is-look-right .qs-sketchi-pupil { transform: translateX(3px); }


.qs-sketchi[data-character="witzgum"] .qs-sketchi-eye-left {
  background: #d9ebff;
}
.qs-sketchi[data-character="witzgum"] .qs-sketchi-eye-left .qs-sketchi-lid {
  background: #d9ebff;
}
.qs-sketchi[data-character="witzgum"] .qs-sketchi-eye-left { left: 48px; top: 56px; }
.qs-sketchi[data-character="witzgum"] .qs-sketchi-eye-right { left: 78px; top: 50px; }
.qs-sketchi[data-character="witzgum"] .qs-sketchi-mouth { left: 63px; top: 108px; }
.qs-sketchi[data-character="witzgum"].is-talking .qs-sketchi-mouth,
.qs-sketchi[data-character="witzgum"].is-happy .qs-sketchi-mouth { left: 59px; top: 106px; }


.qs-sketchi-ground-shadow {
  position: absolute;
  left: 22px;
  bottom: 2px;
  width: 78px;
  height: 13px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(20,27,33,.22) 0%, rgba(20,27,33,.08) 58%, rgba(20,27,33,0) 78%);
  animation: qs-sketchi-shadow 3.6s ease-in-out infinite;
}

.qs-sketchi-emote {
  position: absolute;
  left: 86px;
  bottom: 142px;
  width: 118px;
  height: 74px;
  pointer-events: none;
}
.qs-sketchi-emote-set {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(8px) scale(.88);
  transform-origin: left bottom;
}
.qs-sketchi[data-emote="sleep"] .qs-sketchi-emote-sleep,
.qs-sketchi[data-emote="think"] .qs-sketchi-emote-think,
.qs-sketchi[data-emote="angry"] .qs-sketchi-emote-lightning,
.qs-sketchi[data-emote="hearts"] .qs-sketchi-emote-hearts {
  opacity: 1;
}
.qs-sketchi-emote-sleep span,
.qs-sketchi-emote-think span {
  position: absolute;
  font-weight: 800;
  color: #7c8791;
  text-shadow: 0 1px 0 rgba(255,255,255,.45);
}
.qs-sketchi-emote-sleep span:nth-child(1){left:2px;bottom:2px;font-size:14px;animation:qs-sketchi-emote-float 1.8s ease-in-out infinite;}
.qs-sketchi-emote-sleep span:nth-child(2){left:22px;bottom:14px;font-size:18px;animation:qs-sketchi-emote-float 1.8s ease-in-out .2s infinite;}
.qs-sketchi-emote-sleep span:nth-child(3){left:50px;bottom:28px;font-size:13px;animation:qs-sketchi-emote-float 1.8s ease-in-out .45s infinite;}
.qs-sketchi-emote-sleep span:nth-child(4){left:68px;bottom:42px;font-size:19px;animation:qs-sketchi-emote-float 1.8s ease-in-out .7s infinite;}
.qs-sketchi-emote-think span { color:#6f7891; }
.qs-sketchi-emote-think span:nth-child(1){left:4px;bottom:10px;font-size:16px;animation:qs-sketchi-emote-pop 1.4s ease-in-out infinite;}
.qs-sketchi-emote-think span:nth-child(2){left:26px;bottom:26px;font-size:18px;animation:qs-sketchi-emote-pop 1.4s ease-in-out .14s infinite;}
.qs-sketchi-emote-think span:nth-child(3){left:50px;bottom:13px;font-size:15px;animation:qs-sketchi-emote-pop 1.4s ease-in-out .28s infinite;}
.qs-sketchi-emote-think span:nth-child(4){left:72px;bottom:34px;font-size:19px;animation:qs-sketchi-emote-pop 1.4s ease-in-out .42s infinite;}
.qs-sketchi-emote-lightning {
  width: 52px;
  height: 52px;
  left: 24px;
  bottom: 8px;
  overflow: visible;
  animation: qs-sketchi-emote-bolt .9s ease-in-out infinite;
}
.qs-sketchi-emote-lightning path {
  fill: #ffd43a;
  stroke: #202428;
  stroke-width: 3;
  stroke-linejoin: round;
}
.qs-sketchi-emote-hearts {
  width: 92px;
  height: 54px;
  left: 0;
  bottom: 0;
  overflow: visible;
}
.qs-sketchi-emote-hearts path {
  fill: #f07aa6;
  stroke: #202428;
  stroke-width: 2;
  animation: qs-sketchi-heart-rise 1.8s ease-in-out infinite;
}
.qs-sketchi-emote-hearts path:nth-child(2){ animation-delay: .22s; }
.qs-sketchi-emote-hearts path:nth-child(3){ animation-delay: .44s; }

.qs-sketchi-sparkles {
  position: absolute;
  left: 4px;
  bottom: 86px;
  width: 148px;
  height: 86px;
  opacity: 0;
  pointer-events: none;
}
.qs-sketchi-sparkles span {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffd54a;
  box-shadow: 0 0 0 2px rgba(255, 213, 74, 0.18);
}
.qs-sketchi-sparkles span:nth-child(1){left:10px;top:20px}
.qs-sketchi-sparkles span:nth-child(2){left:118px;top:10px;width:6px;height:6px}
.qs-sketchi-sparkles span:nth-child(3){left:96px;top:54px;width:7px;height:7px}
.qs-sketchi-sparkles span:nth-child(4){left:28px;top:62px;width:5px;height:5px}
.qs-sketchi.is-happy .qs-sketchi-sparkles,
.qs-sketchi.is-hop .qs-sketchi-sparkles { opacity: 1; animation: qs-sketchi-sparkle 900ms ease-out; }

.qs-sketchi-trace {
  position: absolute;
  left: 72px;
  bottom: 15px;
  width: 88px;
  height: 18px;
  overflow: visible;
  opacity: 0;
}
.qs-sketchi-trace path {
  fill: none;
  stroke: #2a2f36;
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 136;
  stroke-dashoffset: 136;
}
.qs-sketchi-crumbs {
  position: absolute;
  left: 94px;
  bottom: 12px;
  width: 40px;
  height: 20px;
  opacity: 0;
  pointer-events: none;
}
.qs-sketchi-crumbs span {
  position: absolute;
  width: 7px;
  height: 5px;
  border-radius: 50%;
  background: #f1a3bc;
  box-shadow: 0 0 0 1px rgba(163,76,104,.12);
}
.qs-sketchi-crumbs span:nth-child(1){left:0;top:6px}
.qs-sketchi-crumbs span:nth-child(2){left:12px;top:2px;width:6px;height:4px}
.qs-sketchi-crumbs span:nth-child(3){left:22px;top:8px;width:5px;height:4px}
.qs-sketchi.is-drawing .qs-sketchi-trace,
.qs-sketchi.is-erasing .qs-sketchi-trace { opacity: 1; }
.qs-sketchi.is-drawing .qs-sketchi-trace path { animation: qs-sketchi-draw-line 1.2s ease-out forwards; }
.qs-sketchi.is-erasing .qs-sketchi-trace path { stroke-dashoffset: 0; animation: qs-sketchi-erase-line 1.3s ease-in forwards; }
.qs-sketchi.is-erasing .qs-sketchi-crumbs { opacity: 1; animation: qs-sketchi-crumbs 1.15s ease-out; }

.qs-sketchi.is-hop .qs-sketchi-character { animation: qs-sketchi-hop .74s cubic-bezier(.22,.86,.34,1); }
.qs-sketchi.is-nod .qs-sketchi-character { animation: qs-sketchi-nod .68s ease-in-out; }
.qs-sketchi.is-shake .qs-sketchi-character { animation: qs-sketchi-shake .56s ease-in-out; }
.qs-sketchi.is-pointing .qs-sketchi-character { animation: qs-sketchi-point .82s cubic-bezier(.25,.8,.25,1); }
.qs-sketchi.is-drawing .qs-sketchi-character { animation: qs-sketchi-draw 1.2s ease-in-out; }
.qs-sketchi.is-erasing .qs-sketchi-character { animation: qs-sketchi-erase 1.3s ease-in-out; }
.qs-sketchi.is-look-left .qs-sketchi-character { transform: rotate(-6deg) translateX(-3px) translateY(-1px); }
.qs-sketchi.is-look-right .qs-sketchi-character { transform: rotate(4deg) translateX(3px) translateY(-1px); }
.qs-sketchi.is-sleepy .qs-sketchi-character { animation: qs-sketchi-sleep 4.2s ease-in-out infinite; }

.qs-sketchi-bubble,
.qs-sketchi-ask {
  position: absolute;
  left: 156px;
  bottom: 92px;
  width: min(300px, calc(100vw - 190px));
  box-sizing: border-box;
  background: #fff;
  color: #202428;
  border: 1px solid #d9dee3;
  border-radius: 16px 16px 16px 6px;
  box-shadow: 0 16px 36px rgba(19, 27, 34, 0.16);
}
.qs-sketchi-bubble {
  min-width: 216px;
  padding: 12px 36px 12px 14px;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 650;
  opacity: 0;
  transform: translate(-6px, 10px) scale(.96);
  transform-origin: left bottom;
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
}
.qs-sketchi-bubble.is-visible { opacity: 1; transform: translate(0,0) scale(1); pointer-events: auto; }

.qs-sketchi[data-character="witzgum"] .qs-sketchi-bubble {
  background: rgba(217, 235, 255, .50);
  border-color: rgba(124, 169, 219, .55);
  backdrop-filter: blur(4px);
}
.qs-sketchi[data-character="witzgum"] .qs-sketchi-bubble::after {
  background: rgba(217, 235, 255, .50);
  border-left-color: rgba(124, 169, 219, .55);
  border-bottom-color: rgba(124, 169, 219, .55);
}
.qs-sketchi-bubble::after,
.qs-sketchi-ask::after {
  content: "";
  position: absolute;
  left: -7px;
  bottom: 14px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-left: 1px solid #d9dee3;
  border-bottom: 1px solid #d9dee3;
  transform: rotate(45deg);
}
.qs-sketchi-bubble strong { display:block; margin-bottom:3px; font-size:12px; letter-spacing:.02em; }
.qs-sketchi-ask-head button:hover { background:#f2f4f6; color:#202428; }

.qs-sketchi-ask { padding:0; pointer-events:auto; }
.qs-sketchi-ask[hidden] { display:none !important; }
.qs-sketchi-ask form { display:block; padding:0; margin:0; }
.qs-sketchi-ask-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 12px 10px 14px; border-bottom:1px solid #edf0f2; }
.qs-sketchi-ask-head strong { font-size:13px; }
.qs-sketchi-ask-head button { width:24px; height:24px; border:0; border-radius:50%; background:transparent; color:#7b838a; cursor:pointer; font:700 18px/24px sans-serif; }
.qs-sketchi-ask p { margin:0; padding:12px 14px 6px; font-size:12.5px; color:#606b75; line-height:1.45; }
.qs-sketchi-ask textarea { display:block; width:calc(100% - 28px); min-height:96px; margin:0 14px; resize:vertical; box-sizing:border-box; border:1px solid #d9dee3; border-radius:12px; padding:10px 12px; font:inherit; color:#202428; background:#fff; }
.qs-sketchi-ask textarea:focus-visible { outline:2px solid rgba(22,112,184,.25); border-color:#1670b8; }
.qs-sketchi-ask-status { min-height:22px; padding:8px 14px 0; font-size:12px; color:#55606a; }
.qs-sketchi-ask-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px 14px; }
.qs-sketchi-ask-actions span { font-size:11px; color:#7b838a; }
.qs-sketchi-ask-actions button { border:0; border-radius:11px; padding:9px 14px; background:#202428; color:#fff; cursor:pointer; font-weight:700; }
.qs-sketchi-ask-actions button:disabled { opacity:.58; cursor:wait; }

.qs-sketchi-option-card { grid-column:1 / -1; padding:4px 0; }
.qs-sketchi-option-card h3 { margin:0 0 8px; font-size:20px; }
.qs-sketchi-option-card p { margin:0 0 16px; color:#6b747c; font-size:13px; line-height:1.5; }
.qs-sketchi-option-toggle { display:flex !important; align-items:center; gap:10px !important; padding:13px 14px; border:1px solid #dfe3e7; border-radius:10px; background:#f8f9fa; }
.qs-sketchi-option-toggle input { width:18px; height:18px; }

.qs-sketchi-pause-setting {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 18px !important;
  margin-top: 16px;
  padding: 13px 14px;
  border: 1px solid #dfe3e7;
  border-radius: 10px;
  background: #f8f9fa;
}
.qs-sketchi-pause-setting > span:first-child {
  display: grid;
  gap: 3px;
}
.qs-sketchi-pause-setting strong { font-size: 13px; color: #202428; }
.qs-sketchi-pause-setting small { font-size: 12px; line-height: 1.4; color: #6b747c; }
.qs-sketchi-pause-input {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.qs-sketchi-pause-input input {
  width: 78px;
  min-height: 36px;
  box-sizing: border-box;
  border: 1px solid #cfd5da;
  border-radius: 8px;
  padding: 6px 8px;
  background: #fff;
  color: #202428;
  font: inherit;
  text-align: right;
}
.qs-sketchi-pause-input em { font-size: 12px; font-style: normal; color: #6b747c; }

.qs-sketchi-witzgum-card {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid #dfe3e7;
  border-radius: 12px;
  background: #fbfbfc;
}
.qs-sketchi-witzgum-card h4 {
  margin: 0 0 6px;
  font-size: 14px;
}
.qs-sketchi-witzgum-card p {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: #69727b;
}
.qs-sketchi-package-grid {
  display: grid;
  gap: 9px;
}
.qs-sketchi-package-item {
  display: flex !important;
  align-items: flex-start;
  gap: 8px !important;
  padding: 10px 12px;
  border: 1px solid #e0e5ea;
  border-radius: 10px;
  background: #fff;
}
.qs-sketchi-package-item input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
}
.qs-sketchi-package-item span {
  font-size: 12.5px;
  line-height: 1.45;
  color: #202428;
}
.qs-sketchi-witzgum-frequency {
  margin-top: 12px;
}

.qs-sketchi-option-note { grid-column:1 / -1; margin-top:4px; color:#7b838a; font-size:12px; }
.qs-sketchi-update-note { display:grid; gap:4px; margin-bottom:14px; padding:12px 14px; border:1px solid #e0e5ea; border-radius:12px; background:#fafbfc; }
.qs-sketchi-update-note strong { font-size:13px; color:#202428; }
.qs-sketchi-update-note span { font-size:12px; color:#66707a; line-height:1.45; }

@keyframes qs-sketchi-breathe { 0%,100% { transform:translateY(0) rotate(-1deg); } 50% { transform:translateY(-3px) rotate(1.2deg); } }
@keyframes qs-sketchi-shadow { 0%,100% { transform:scaleX(1); opacity:.22; } 50% { transform:scaleX(.9); opacity:.13; } }
@keyframes qs-sketchi-hop { 0%,100% { transform:translateY(0) rotate(-2deg); } 28% { transform:translateY(-18px) rotate(-8deg); } 54% { transform:translateY(-22px) rotate(7deg); } 74% { transform:translateY(0) rotate(-3deg); } }
@keyframes qs-sketchi-nod { 0%,100% { transform:rotate(-2deg) translateY(0); } 30% { transform:rotate(4deg) translateY(3px); } 60% { transform:rotate(-5deg) translateY(-1px); } }
@keyframes qs-sketchi-shake { 0%,100% { transform:rotate(0deg); } 18% { transform:rotate(-7deg); } 36% { transform:rotate(6deg); } 54% { transform:rotate(-6deg); } 72% { transform:rotate(4deg); } }
@keyframes qs-sketchi-point { 0%,100% { transform:rotate(-2deg) translate(0,0); } 35% { transform:rotate(-11deg) translate(10px,-3px); } 65% { transform:rotate(-8deg) translate(8px,-1px); } }
@keyframes qs-sketchi-draw { 0% { transform:rotate(-5deg) translate(0,0); } 35% { transform:rotate(6deg) translate(12px,5px); } 70% { transform:rotate(2deg) translate(18px,6px); } 100% { transform:rotate(-2deg) translate(0,0); } }
@keyframes qs-sketchi-erase { 0% { transform:rotate(8deg) translate(12px,2px); } 32% { transform:rotate(-10deg) translate(20px,8px); } 64% { transform:rotate(6deg) translate(28px,6px); } 100% { transform:rotate(-2deg) translate(0,0); } }
@keyframes qs-sketchi-draw-line { from { stroke-dashoffset:136; opacity:1; } to { stroke-dashoffset:0; opacity:1; } }
@keyframes qs-sketchi-erase-line { 0% { stroke-dashoffset:0; opacity:1; } 100% { stroke-dashoffset:136; opacity:.12; } }
@keyframes qs-sketchi-crumbs { 0% { transform:translateX(0) scale(.9); opacity:0; } 30% { opacity:1; } 100% { transform:translateX(8px) translateY(-3px) scale(1.08); opacity:0; } }
@keyframes qs-sketchi-sparkle { 0% { transform:scale(.55); opacity:0; } 28% { transform:scale(1); opacity:1; } 100% { transform:scale(1.15); opacity:0; } }
@keyframes qs-sketchi-sleep { 0%,100% { transform:translateY(0) rotate(-2deg); } 50% { transform:translateY(2px) rotate(2deg); } }
@keyframes qs-sketchi-zzz { 0%,100% { transform:translateY(0); opacity:.24; } 50% { transform:translateY(-8px); opacity:.8; } }
@keyframes qs-sketchi-emote-float { 0% { transform:translateY(6px) scale(.92); opacity:0; } 22% { opacity:1; } 100% { transform:translateY(-12px) scale(1.06); opacity:0; } }
@keyframes qs-sketchi-emote-pop { 0%,100% { transform:translateY(4px) scale(.84); opacity:0; } 30%,75% { transform:translateY(0) scale(1); opacity:1; } }
@keyframes qs-sketchi-emote-bolt { 0%,100% { transform:translateY(0) rotate(-6deg); } 50% { transform:translateY(-4px) rotate(6deg); } }
@keyframes qs-sketchi-heart-rise { 0% { transform:translateY(12px) scale(.72); opacity:0; } 28% { opacity:1; } 100% { transform:translateY(-16px) scale(1.06); opacity:0; } }

@media (max-width: 860px) {
  .qs-sketchi {
    left: 10px;
    bottom: 18px;
    width: 320px;
    height: 186px;
  }
  .qs-sketchi-character { width: 122px; height: 168px; }
  .qs-sketchi-power-off { left: 103px; top: 10px; }
  .qs-sketchi-offstate { left: 0; bottom: 0; }
  .qs-sketchi-eye-left { left: 43px; top: 51px; }
  .qs-sketchi-eye-right { left: 69px; top: 46px; }
  .qs-sketchi-mouth { left: 58px; top: 102px; }
  .qs-sketchi.is-talking .qs-sketchi-mouth,
  .qs-sketchi.is-happy .qs-sketchi-mouth { left: 55px; top: 100px; }
  .qs-sketchi[data-character="witzgum"] .qs-sketchi-eye-left { left: 42px; top: 50px; }
  .qs-sketchi[data-character="witzgum"] .qs-sketchi-eye-right { left: 69px; top: 45px; }
  .qs-sketchi[data-character="witzgum"] .qs-sketchi-mouth { left: 56px; top: 100px; }
  .qs-sketchi[data-character="witzgum"].is-talking .qs-sketchi-mouth,
  .qs-sketchi[data-character="witzgum"].is-happy .qs-sketchi-mouth { left: 53px; top: 98px; }
  .qs-sketchi-ground-shadow { width: 72px; }
  .qs-sketchi-emote { left: 74px; bottom: 126px; transform: scale(.9); transform-origin:left bottom; }
  .qs-sketchi-bubble,
  .qs-sketchi-ask {
    left: 136px;
    width: min(236px, calc(100vw - 154px));
  }
}

/* 0.6.51 – Story-Persönlichkeiten und Comic-Szenen */
.qs-sketchi.is-disabled .qs-sketchi-scene { display: none !important; }

.qs-sketchi-personality-title {
  margin: 20px 0 10px;
  font-size: 14px;
}
.qs-sketchi-personality-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.qs-sketchi-personality-card {
  display: flex !important;
  align-items: flex-start;
  gap: 9px !important;
  padding: 12px;
  border: 1px solid #dfe3e7;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}
.qs-sketchi-personality-card:has(input:checked) {
  border-color: #202428;
  box-shadow: 0 0 0 1px #202428 inset;
  background: #f8f9fa;
}
.qs-sketchi-personality-card input {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin: 1px 0 0;
}
.qs-sketchi-personality-card span { display: grid; gap: 3px; }
.qs-sketchi-personality-card strong { font-size: 12.5px; color: #202428; }
.qs-sketchi-personality-card small { font-size: 11.5px; line-height: 1.35; color: #6b747c; }

.qs-sketchi-scene {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: visible;
}
.qs-sketchi-scene > div { display: none; }
.qs-sketchi[data-scene="clouds"] .qs-sketchi-scene-clouds,
.qs-sketchi[data-scene="boom"] .qs-sketchi-scene-boom,
.qs-sketchi[data-scene="cry"] .qs-sketchi-scene-cry,
.qs-sketchi[data-scene="smoke"] .qs-sketchi-scene-smoke { display: block; }

.qs-cloud {
  position: absolute;
  display: block;
  height: 24px;
  border-radius: 22px;
  background: #dfe5ea;
  box-shadow: 12px -10px 0 2px #e7ecef, 28px -3px 0 1px #d7dee4;
  opacity: .9;
}
.qs-cloud::before {
  content: "";
  position: absolute;
  left: 12px;
  top: -10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: inherit;
}
.qs-cloud-a { left: -90px; top: 24px; width: 58px; animation: qs-sketchi-cloud-pass 8s linear forwards; }
.qs-cloud-b { left: -150px; top: 58px; width: 46px; transform: scale(.8); animation: qs-sketchi-cloud-pass 9.5s linear .7s forwards; }
.qs-cloud-c { left: -120px; top: 8px; width: 38px; transform: scale(.65); animation: qs-sketchi-cloud-pass 7.4s linear 1.2s forwards; }


.qs-sketchi-scene-boom {
  position: absolute;
  left: 5px;
  top: 18px;
  width: 150px;
  height: 150px;
  z-index: -1;
  clip-path: polygon(50% 0%,61% 28%,86% 8%,78% 36%,100% 39%,79% 52%,97% 74%,70% 69%,67% 100%,52% 75%,32% 96%,34% 68%,4% 78%,24% 54%,0 43%,27% 37%,16% 10%,40% 29%);
  background: #ffd43b;
  animation: qs-sketchi-boom-pop 1.1s cubic-bezier(.2,.8,.2,1) both;
}
.qs-sketchi-scene-boom::before {
  content: "";
  position: absolute;
  inset: 18px;
  clip-path: inherit;
  background: #ff7d39;
}
.qs-sketchi-scene-boom span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 2;
  color: #111;
  font: 900 23px/1 Arial, sans-serif;
  letter-spacing: -1px;
  transform: rotate(-10deg);
  text-shadow: 2px 2px 0 #fff;
}

.qs-sketchi-scene-cry .tear {
  position: absolute;
  top: 101px;
  width: 9px;
  height: 18px;
  border-radius: 55% 55% 65% 65%;
  background: #68b8e8;
  opacity: .9;
  animation: qs-sketchi-tear-fall 1.1s ease-in infinite;
}
.qs-sketchi-scene-cry .t1 { left: 61px; }
.qs-sketchi-scene-cry .t2 { left: 91px; animation-delay: .35s; }

.qs-sketchi-scene-smoke .cigarette {
  position: absolute;
  left: 87px;
  top: 132px;
  width: 33px;
  height: 6px;
  border: 2px solid #202428;
  border-radius: 4px;
  background: linear-gradient(90deg,#fff 0 70%,#d2a36a 70% 88%,#d94d3b 88% 100%);
  transform: rotate(-10deg);
  transform-origin: left center;
  animation: qs-sketchi-cigarette-bob 1.8s ease-in-out infinite;
}
.qs-sketchi-scene-smoke .cigarette i {
  position: absolute;
  right: -5px;
  top: -2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff7043;
  box-shadow: 0 0 8px rgba(255,112,67,.75);
}
.qs-sketchi-scene-smoke .smoke {
  position: absolute;
  left: 105px;
  top: 66px;
  width: 58px;
  height: 78px;
  overflow: visible;
  opacity: .7;
  animation: qs-sketchi-smoke-rise 2.7s ease-out infinite;
}
.qs-sketchi-scene-smoke .smoke path {
  fill: none;
  stroke: #8a949d;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 100;
  animation: qs-sketchi-smoke-line 2.7s ease-out infinite;
}
.qs-sketchi-scene-smoke .smoke path:nth-child(2) { animation-delay: .6s; }

@keyframes qs-sketchi-cloud-pass { from { transform: translateX(0); opacity: 0; } 12% { opacity: .9; } 88% { opacity: .85; } to { transform: translateX(530px); opacity: 0; } }
@keyframes qs-sketchi-boom-pop { 0% { transform: scale(.05) rotate(-18deg); opacity: 0; } 45% { transform: scale(1.12) rotate(4deg); opacity: 1; } 70% { transform: scale(.96) rotate(-2deg); } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes qs-sketchi-tear-fall { 0% { transform: translateY(0) scale(.75); opacity: 0; } 18% { opacity: .95; } 100% { transform: translateY(58px) scale(1.05); opacity: 0; } }
@keyframes qs-sketchi-cigarette-bob { 0%,100% { transform: rotate(-10deg) translateY(0); } 50% { transform: rotate(-8deg) translateY(-2px); } }
@keyframes qs-sketchi-smoke-rise { 0% { transform: translateY(16px) scale(.86); opacity: 0; } 25% { opacity: .72; } 100% { transform: translateY(-16px) scale(1.08); opacity: 0; } }
@keyframes qs-sketchi-smoke-line { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

@media (max-width: 860px) {
  .qs-sketchi-personality-grid { grid-template-columns: 1fr; }
  .qs-sketchi-scene { transform: scale(.88); transform-origin: left bottom; }
}

/* 0.7.10 – wechselnde Comic-Übergänge Sketchi/Witzgum */
.qs-witzgum-transition{
  position:absolute;
  left:2px;
  bottom:2px;
  width:156px;
  height:190px;
  z-index:40;
  display:none;
  pointer-events:none;
  transform-origin:center center;
}
.qs-witzgum-transition.is-active{display:block;}
.qs-witzgum-transition svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 8px 10px rgba(20,27,33,.18));}
.qs-witzgum-transition[data-type="boom"].is-active{animation:qs-witzgum-boom 1.45s ease both;}
.qs-witzgum-transition[data-type="rock"].is-active{animation:qs-witzgum-drop 1.45s cubic-bezier(.24,.9,.34,1) both;}
.qs-witzgum-transition[data-type="hammer"].is-active{animation:qs-witzgum-hammer 1.45s ease-in-out both;}
.qs-witzgum-transition[data-type="washer"].is-active{animation:qs-witzgum-washer 1.5s cubic-bezier(.35,.8,.25,1) both;}
.qs-witzgum-transition[data-type="anvil"].is-active{animation:qs-witzgum-anvil 1.45s cubic-bezier(.2,.9,.3,1) both;}
.qs-witzgum-transition[data-type="paint"].is-active{animation:qs-witzgum-paint 1.5s ease-in-out both;}
.qs-witzgum-transition[data-type="papers"].is-active{animation:qs-witzgum-papers 1.45s ease-in-out both;}
@keyframes qs-witzgum-boom{0%{opacity:0;transform:scale(.2) rotate(-18deg)}22%{opacity:1;transform:scale(1.18) rotate(5deg)}52%{transform:scale(.94) rotate(-2deg)}100%{opacity:0;transform:scale(1.3) rotate(8deg)}}
@keyframes qs-witzgum-drop{0%{opacity:0;transform:translateY(-230px) rotate(-15deg)}22%{opacity:1}52%{transform:translateY(12px) rotate(7deg)}67%{transform:translateY(-18px) rotate(-4deg)}100%{opacity:0;transform:translateY(80px) rotate(14deg)}}
@keyframes qs-witzgum-hammer{0%{opacity:0;transform:translate(70px,-150px) rotate(-70deg)}24%{opacity:1}52%{transform:translate(4px,18px) rotate(10deg)}64%{transform:translate(6px,-8px) rotate(-6deg)}100%{opacity:0;transform:translate(100px,-80px) rotate(55deg)}}
@keyframes qs-witzgum-washer{0%{opacity:0;transform:translateX(-250px) rotate(-25deg) scale(.65)}24%{opacity:1}56%{transform:translateX(8px) rotate(7deg) scale(1.02)}100%{opacity:0;transform:translateX(260px) rotate(44deg) scale(.7)}}
@keyframes qs-witzgum-anvil{0%{opacity:0;transform:translateY(-260px) scale(.8)}28%{opacity:1}55%{transform:translateY(8px) scale(1.05)}67%{transform:translateY(-10px) scale(.98)}100%{opacity:0;transform:translateY(65px) scale(1.08)}}
@keyframes qs-witzgum-paint{0%{opacity:0;transform:translate(-100px,-120px) rotate(-45deg)}25%{opacity:1}58%{transform:translate(5px,15px) rotate(24deg)}100%{opacity:0;transform:translate(95px,85px) rotate(80deg)}}
@keyframes qs-witzgum-papers{0%{opacity:0;transform:translate(-220px,-70px) rotate(-18deg)}20%{opacity:1}56%{transform:translate(10px,4px) rotate(12deg)}100%{opacity:0;transform:translate(250px,-100px) rotate(38deg)}}
@media(max-width:860px){.qs-witzgum-transition{width:136px;height:170px;}}