/* ================================================================
   KIDS-HOME — bunte Kinder-Startseite (/kinder/)
   Wird nur von kids-home.njk geladen, alles unter .kids-home gescoped.
   ================================================================ */

.kids-home {
  /* Kinder-Palette: bunt, aber warm — passend zum Site-Grundton */
  --kh-coral:  #E8604C;
  --kh-sonne:  #E9A00E;
  --kh-blatt:  #5FA83E;
  --kh-himmel: #3E8FB0;
  --kh-beere:  #9C5BB5;

  --kh-coral-bg:  #FCEAE6;
  --kh-sonne-bg:  #FDF3DC;
  --kh-blatt-bg:  #EAF5E3;
  --kh-himmel-bg: #E4F1F6;
  --kh-beere-bg:  #F4EAF8;

  --kh-radius: 24px;
}

.kids-home .site-main {
  max-width: 960px;
  margin: 0 auto;
}

/* ── Hero ─────────────────────────────────────────────────────── */

.kids-home .kh-hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 3rem 1.5rem 3.5rem;
  margin-bottom: 3rem;
  border-radius: var(--kh-radius);
  background:
    radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.55), transparent 45%),
    linear-gradient(135deg, #FDE7B0 0%, #FBD08A 45%, #F6B96B 100%);
  border: 3px solid #F2C063;
}

.kids-home .kh-hero__pfoten {
  position: absolute;
  font-size: 4.5rem;
  opacity: 0.18;
  transform: rotate(-20deg);
  top: 8%;
  left: 4%;
  pointer-events: none;
  user-select: none;
}

.kids-home .kh-hero__pfoten--2 {
  top: auto;
  left: auto;
  bottom: 6%;
  right: 5%;
  transform: rotate(25deg);
  font-size: 3.5rem;
}

.kids-home .kh-hero__avatar {
  width: 110px;
  height: 110px;
  margin: 0 auto 1rem;
  display: grid;
  place-items: center;
  background: #FFFFFF;
  border: 4px solid var(--kh-sonne);
  border-radius: 50%;
  box-shadow: 0 6px 0 rgba(178, 90, 26, 0.25);
}

.kids-home .kh-hero__emoji {
  font-size: 3.5rem;
  line-height: 1;
  animation: kh-wackeln 2.4s ease-in-out infinite;
}

.kids-home .kh-hero__title {
  font-size: clamp(2rem, 5vw, 2.8rem);
  color: #7A4A12;
  margin: 0 0 0.75rem;
  border: none;
}

.kids-home .kh-hero__text {
  max-width: 34em;
  margin: 0 auto 1.75rem;
  font-size: 1.15rem;
  line-height: 1.6;
  color: #5C4310;
}

.kids-home .kh-hero__cta {
  font-size: 1.25rem;
  font-weight: 700;
  font-family: inherit;
  color: #FFFFFF;
  background: var(--kh-coral);
  border: none;
  border-radius: 999px;
  padding: 0.9rem 2.2rem;
  cursor: pointer;
  box-shadow: 0 5px 0 #B23A28;
  transition: transform var(--transition-quick), box-shadow var(--transition-quick);
}

.kids-home .kh-hero__cta:hover,
.kids-home .kh-hero__cta:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 8px 0 #B23A28;
}

.kids-home .kh-hero__cta:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #B23A28;
}

/* ── Sektions-Titel ───────────────────────────────────────────── */

.kids-home .kh-section-title {
  text-align: center;
  font-size: clamp(1.5rem, 4vw, 2rem);
  margin: 0 0 1.5rem;
  border: none;
}

/* ── Themen-Karten ────────────────────────────────────────────── */

.kids-home .kh-themen {
  margin-bottom: 3rem;
}

.kids-home .kh-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.25rem;
}

.kids-home .kh-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.5rem 1.4rem 1.3rem;
  border-radius: var(--kh-radius);
  border: 3px solid;
  text-decoration: none;
  color: var(--color-text);
  transition: transform var(--transition-quick), box-shadow var(--transition-quick);
}

.kids-home .kh-card:hover,
.kids-home .kh-card:focus-visible {
  transform: translateY(-5px) rotate(-1deg);
  box-shadow: 0 10px 22px rgba(44, 42, 40, 0.14);
}

.kids-home .kh-card__emoji {
  font-size: 2.6rem;
  line-height: 1;
  margin-bottom: 0.3rem;
}

.kids-home .kh-card:hover .kh-card__emoji {
  animation: kh-huepfen 0.5s ease-in-out;
}

.kids-home .kh-card__title {
  font-size: 1.3rem;
  font-weight: 800;
}

.kids-home .kh-card__text {
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.kids-home .kh-card__cta {
  margin-top: auto;
  padding-top: 0.6rem;
  font-weight: 700;
  font-size: 0.95rem;
}

/* Farbvarianten (Reihenfolge = Frontmatter-Liste) */
.kids-home .kh-card--1 { background: var(--kh-coral-bg);  border-color: var(--kh-coral); }
.kids-home .kh-card--1 .kh-card__title,
.kids-home .kh-card--1 .kh-card__cta { color: #C24432; }
.kids-home .kh-card--2 { background: var(--kh-sonne-bg);  border-color: var(--kh-sonne); }
.kids-home .kh-card--2 .kh-card__title,
.kids-home .kh-card--2 .kh-card__cta { color: #A36F0A; }
.kids-home .kh-card--3 { background: var(--kh-blatt-bg);  border-color: var(--kh-blatt); }
.kids-home .kh-card--3 .kh-card__title,
.kids-home .kh-card--3 .kh-card__cta { color: #3F7527; }
.kids-home .kh-card--4 { background: var(--kh-himmel-bg); border-color: var(--kh-himmel); }
.kids-home .kh-card--4 .kh-card__title,
.kids-home .kh-card--4 .kh-card__cta { color: #2C6A85; }
.kids-home .kh-card--5 { background: var(--kh-beere-bg);  border-color: var(--kh-beere); }
.kids-home .kh-card--5 .kh-card__title,
.kids-home .kh-card--5 .kh-card__cta { color: #7B4392; }

/* ── Neueste Geschichten ──────────────────────────────────────── */

.kids-home .kh-geschichten {
  margin-bottom: 3rem;
}

.kids-home .kh-geschichten__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}

.kids-home .kh-geschichte {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1rem 1.2rem;
  border-radius: 18px;
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  text-decoration: none;
  color: var(--color-text);
  transition: transform var(--transition-quick), border-color var(--transition-quick);
}

.kids-home .kh-geschichte:hover,
.kids-home .kh-geschichte:focus-visible {
  transform: translateX(6px);
  border-color: var(--kh-sonne);
}

.kids-home .kh-geschichte__emoji {
  font-size: 1.5rem;
  line-height: 1.3;
}

.kids-home .kh-geschichte__body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.kids-home .kh-geschichte__title {
  font-weight: 700;
  font-size: 1.05rem;
}

.kids-home .kh-geschichte__desc {
  font-size: 0.95rem;
  color: var(--color-text-muted);
}

/* ── Wichtig-Hinweis (Sprechblase) ────────────────────────────── */

.kids-home .kh-hinweis {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.kids-home .kh-hinweis__avatar {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  font-size: 2rem;
  background: var(--kh-sonne-bg);
  border: 3px solid var(--kh-sonne);
  border-radius: 50%;
}

.kids-home .kh-hinweis__bubble {
  position: relative;
  flex: 1;
  padding: 1rem 1.3rem;
  font-size: 1.05rem;
  line-height: 1.6;
  background: var(--kh-himmel-bg);
  border: 3px solid var(--kh-himmel);
  border-radius: 18px;
}

.kids-home .kh-hinweis__bubble::before {
  content: "";
  position: absolute;
  left: -13px;
  top: 22px;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-right: 11px solid var(--kh-himmel);
}

/* ── Eltern-Link ──────────────────────────────────────────────── */

.kids-home .kh-eltern {
  text-align: center;
  margin: 0 0 1rem;
}

.kids-home .kh-eltern a {
  font-weight: 600;
  color: var(--color-text-muted);
}

/* ── Animationen ──────────────────────────────────────────────── */

@keyframes kh-wackeln {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-8deg); }
  75%      { transform: rotate(8deg); }
}

@keyframes kh-huepfen {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
  .kids-home .kh-hero__emoji,
  .kids-home .kh-card:hover .kh-card__emoji {
    animation: none;
  }
  .kids-home .kh-card:hover,
  .kids-home .kh-card:focus-visible,
  .kids-home .kh-geschichte:hover,
  .kids-home .kh-hero__cta:hover {
    transform: none;
  }
}

/* ── Mobil ────────────────────────────────────────────────────── */

@media (max-width: 540px) {
  .kids-home .kh-hero {
    padding: 2.25rem 1rem 2.5rem;
  }
  .kids-home .kh-hinweis {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .kids-home .kh-hinweis__bubble::before {
    display: none;
  }
}