/* "Was schmeckt mir?" - Bewertungsseite fuer Kinder (static/js/kids_rating.js, 28.09.2026).
   Grosse Karte mit Foto, drei farbige Gesichter (orange / gelb / gelb mit Herzaugen),
   funktioniert mit Daumen auf dem Handy. Farben der Gesichter sind bewusst fest (Bilder),
   alles andere nutzt die Theme-Variablen. */
#tab-kinder-bewerten{ max-width:780px; margin:0 auto; }
.kr-panel > *{ max-width:560px; margin-left:auto; margin-right:auto; }
.kr-head{ display:flex; flex-direction:column; align-items:center; gap:.6rem; margin:.25rem 0 1rem; text-align:center; }
.kr-title{ margin:0; font-size:1.6rem; }
.kr-kids{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.4rem; }
.kr-kids-label{ font-weight:700; color:var(--ink-muted); margin-right:.2rem; }
.kr-kid{
  display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .8rem .3rem .3rem;
  border:1.5px solid var(--border); border-radius:999px; background:var(--surface); color:var(--ink);
  font:inherit; font-weight:600; cursor:pointer;
}
.kr-kid.active{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }

.kr-progress{ height:10px; border-radius:999px; background:var(--surface-hover); overflow:hidden; }
.kr-progress span{ display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg, #f6a53b, #f5cf3d); transition:width .35s ease; }
.kr-count{ text-align:center; font-size:.9rem; font-weight:600; color:var(--ink-muted); margin:.35rem 0 .75rem; }

.kr-card{
  background:var(--surface); border:1px solid var(--border); border-radius:24px;
  padding:1rem; box-shadow:0 6px 20px rgba(0,0,0,.08); text-align:center;
  animation:kr-in .28s ease both;
}
.kr-card.kr-leave{ animation:kr-out .22s ease both; }
.kr-photo{ aspect-ratio:4 / 3; max-height:min(36vh, 320px); width:100%; border-radius:18px; overflow:hidden; background:var(--surface-hover); display:flex; align-items:center; justify-content:center; }
.kr-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.kr-photo-empty .hicon{ width:72px; height:72px; background-color:var(--ink-muted); opacity:.5; }
.kr-name{ font-family:'Arvo', serif; font-size:1.45rem; font-weight:700; line-height:1.2; margin:.85rem .25rem 1rem; color:var(--ink); overflow-wrap:anywhere; }

.kr-faces{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:.6rem; }
.kr-face{
  display:flex; flex-direction:column; align-items:center; gap:.3rem; padding:.6rem .3rem .7rem;
  border:3px solid transparent; border-radius:20px; cursor:pointer; font:inherit; font-weight:700;
  font-size:.95rem; line-height:1.15; color:#3d2a14; -webkit-tap-highlight-color:transparent;
  transition:transform .12s ease, box-shadow .12s ease;
}
.kr-face-img{ width:clamp(64px, 20vw, 96px); height:auto; aspect-ratio:1; object-fit:contain; pointer-events:none; user-select:none; }
.kr-no{ background:#fde3c8; }
.kr-yes{ background:#fdf1bf; }
.kr-love{ background:#fde6c4; box-shadow:inset 0 0 0 2px #f6b3b3; }
.kr-face:hover{ transform:translateY(-2px); }
.kr-face:active{ transform:scale(.95); }
.kr-face:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
.kr-no.active{ border-color:#f08a24; }
.kr-yes.active{ border-color:#e3b818; }
.kr-love.active{ border-color:#e0494a; }
.kr-face.kr-pop .kr-face-img{ animation:kr-pop .3s ease; }

.kr-skip{
  margin-top:.9rem; background:none; border:none; font:inherit; font-weight:600;
  color:var(--ink-muted); text-decoration:underline; text-underline-offset:3px; cursor:pointer; padding:.4rem .8rem;
}

.kr-done{ padding:2rem 1rem; }
.kr-done-img{ width:110px; height:110px; border-radius:50%; margin:0 auto .6rem; display:block; }
.kr-done-title{ font-family:'Arvo', serif; font-size:1.6rem; font-weight:700; margin-bottom:.3rem; }

@keyframes kr-in{ from{ opacity:0; transform:translateY(12px) scale(.98); } to{ opacity:1; transform:none; } }
@keyframes kr-out{ to{ opacity:0; transform:translateX(-40px) rotate(-3deg); } }
@keyframes kr-pop{ 0%{ transform:scale(1); } 50%{ transform:scale(1.25); } 100%{ transform:scale(1); } }
@media (prefers-reduced-motion: reduce){
  .kr-card, .kr-card.kr-leave, .kr-face.kr-pop .kr-face-img{ animation:none; }
  .kr-face, .kr-progress span{ transition:none; }
}
@media (max-width:860px){
  .kr-title{ font-size:1.35rem; }
  .kr-card{ padding:.75rem; border-radius:20px; }
  .kr-name{ font-size:1.25rem; margin:.7rem .15rem .8rem; }
  .kr-faces{ gap:.4rem; }
  .kr-face{ font-size:.85rem; padding:.5rem .2rem .6rem; }
}

/* Lilli-Besuch alle 10 Bewertungen (kids_rating.js lilliVisit) */
.kr-lilli{
  position:fixed; left:0; bottom:18px; z-index:1200; width:150px; height:150px; pointer-events:none;
  display:flex; align-items:flex-end; justify-content:center; will-change:transform;
}
.kr-lilli img{ display:block; height:98px; width:auto; filter:drop-shadow(0 6px 10px rgba(0,0,0,.25)); }
.kr-lilli-waving img{ height:140px; }
.kr-lilli-bubble{
  position:absolute; bottom:100%; left:50%; transform:translateX(-50%) scale(.6); opacity:0;
  white-space:nowrap; background:#fff; color:#3d2a14; font-weight:800; font-size:1rem;
  padding:.45rem .8rem; border-radius:16px; border:2px solid #f5cf3d; box-shadow:0 4px 14px rgba(0,0,0,.18);
  transition:opacity .2s ease, transform .2s ease;
}
.kr-lilli-bubble::after{ content:""; position:absolute; top:100%; left:50%; margin-left:-7px; border:7px solid transparent; border-top-color:#fff; }
.kr-lilli-waving .kr-lilli-bubble{ opacity:1; transform:translateX(-50%) scale(1); }
@media (max-width:600px){
  .kr-lilli img{ height:78px; }
  .kr-lilli-waving img{ height:112px; }
}
.kr-lilli-waving img{ transform-origin:50% 100%; animation:kr-lilli-wiggle .52s ease-in-out infinite alternate; }
@keyframes kr-lilli-wiggle{ from{ rotate:-4deg; } to{ rotate:4deg; } }

/* Kategorie-Reiter (wie im Kochbuch: .rb-toptab dockt an eine Flaeche an) */
.kr-tabs{ width:auto; padding-left:1.2rem; position:relative; }
.kr-tab{ font-size:.9rem; padding:.55rem .9rem; }
.kr-tab-count{ display:inline-block; min-width:1.4em; margin-left:.2rem; padding:0 .35em; border-radius:999px; font-size:.75rem; font-weight:700; background:rgba(0,0,0,.08); text-align:center; }
.kr-panel{ background:var(--surface); border-radius:var(--radius-card, 20px); padding:1rem; box-shadow:var(--shadow); }
.kr-panel .kr-card{ box-shadow:none; }
@media (max-width:860px){
  .kr-tabs{ flex-wrap:nowrap; overflow-x:auto; padding-left:.6rem; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .kr-tabs::-webkit-scrollbar{ display:none; }
  .kr-tab{ flex:0 0 auto; }
  .kr-panel{ padding:.6rem; }
}

/* "Fuer wen?" mit Fortschritt je Person (Bewerten fuer alle, 28.09.2026) */
.kr-kid-text{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.1; }
.kr-kid-stat{ font-size:.72rem; font-weight:600; opacity:.75; }
/* Auf dem Kochbuch-Reiter "Bewerten" keine Rezept-Anlege-Knoepfe */
body:has(#tab-bewerten.active) #newDishBtn, body:has(#tab-bewerten.active) #importRecipesBtn{ display:none !important; }
#tab-bewerten{ max-width:780px; margin:0 auto; }