.kids-page {
  --kids-green: #52755a;
  --kids-green-dark: #3f6048;
  --kids-green-soft: #edf3e9;
  --kids-berry: #a7425c;
  --kids-berry-dark: #843247;
  --kids-cream: #f8f3e8;
  --kids-yellow: #f6d578;
  background: #f4f2e9;
}

.kids-page .brand-mark { background: var(--kids-green); }
.kids-page .kids-loading,
.kids-page .kids-load-error,
.kids-noscript { width: min(var(--content), calc(100% - 2rem)); margin: 3rem auto; }
.kids-load-error { border-left: 4px solid var(--kids-berry); background: #fff; padding: 1.25rem; }
.kids-load-error h1 { margin-top: 0; }

.kids-hero {
  display: grid;
  min-height: 760px;
  grid-template-columns: minmax(260px, 1fr) minmax(500px, .95fr);
  grid-template-rows: auto auto;
  gap: 1.2rem 3rem;
  align-content: center;
  background-color: var(--kids-cream);
  background-image: linear-gradient(90deg, rgba(255,252,244,.02) 0%, rgba(255,252,244,.12) 42%, rgba(255,252,244,.84) 67%, rgba(255,252,244,.97) 100%), url('/assets/kids/morgenklar-1600.webp');
  background-position: center;
  background-size: cover;
  padding: 3.5rem max(1rem, calc((100% - 1240px)/2));
}

.kids-hero-photo { display: none; }
.kids-hero-copy { grid-column: 2; min-width: 0; }
.kids-hero-copy .eyebrow { color: var(--kids-berry-dark); }
.kids-hero-copy h1 { max-width: 650px; margin: .5rem 0 1rem; font-size: clamp(3.1rem, 5.6vw, 5.45rem); line-height: .96; letter-spacing: -.055em; text-wrap: balance; }
.kids-hero-copy .lead { max-width: 690px; margin: 0; color: #5e5b51; font-size: 1.08rem; line-height: 1.62; }
.kids-proof { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.kids-proof li { border: 1px solid rgba(82,117,90,.25); border-radius: 999px; background: rgba(255,255,255,.72); padding: .48rem .68rem; color: #4e594e; font-size: .7rem; font-weight: 850; backdrop-filter: blur(8px); }

.kids-situation-panel { grid-column: 2; min-width: 0; border: 1px solid rgba(82,117,90,.22); border-radius: 20px; background: rgba(255,255,255,.93); padding: 1.1rem; box-shadow: 0 22px 65px rgba(55,55,40,.13); backdrop-filter: blur(12px); }
.kids-panel-label { display: flex; align-items: center; gap: .62rem; margin: 0 0 .8rem; font-size: .78rem; font-weight: 900; }
.kids-panel-label span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: var(--kids-green); color: #fff; }
.kids-situation-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .62rem; }
.kids-situation-button { display: grid; min-width: 0; min-height: 86px; grid-template-columns: 58px minmax(0,1fr); align-items: center; gap: .72rem; border: 1px solid rgba(82,117,90,.2); border-radius: 14px; background: #fffdf8; padding: .58rem; color: var(--ink); text-align: left; }
.kids-situation-button:hover { border-color: var(--kids-green); background: var(--kids-green-soft); }
.kids-situation-button[aria-pressed="true"] { border-color: var(--kids-green); background: var(--kids-green-soft); box-shadow: inset 0 0 0 1px var(--kids-green); }
.kids-situation-button img { width: 56px; height: 56px; }
.kids-situation-button strong,
.kids-situation-button small { display: block; }
.kids-situation-button strong { font-size: .83rem; line-height: 1.25; }
.kids-situation-button small { margin-top: .2rem; color: var(--muted); font-size: .66rem; line-height: 1.35; }
.kids-panel-foot { margin: .75rem 0 0; color: var(--muted); font-size: .7rem; line-height: 1.45; }

.kids-results,
.kids-explainer { width: min(1180px, calc(100% - 2rem)); margin-inline: auto; padding: 4rem 0; scroll-margin-top: 84px; }
.kids-results-head { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1rem; }
.kids-results-head h2,
.kids-explainer h2 { margin: .32rem 0 0; font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.05; letter-spacing: -.025em; }
.kids-results-head > p { max-width: 430px; margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.5; text-align: right; }
.kids-filter-panel > summary { display: none; }
.kids-filter-row { display: flex; flex-wrap: wrap; gap: .55rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.kids-filter-row button { display: inline-flex; min-height: 50px; align-items: center; gap: .5rem; border: 1px solid rgba(82,117,90,.28); border-radius: 999px; background: #fff; padding: .38rem .78rem .38rem .38rem; color: var(--ink); font-size: .74rem; font-weight: 850; box-shadow: 0 6px 18px rgba(55,55,40,.06); transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background-color .16s ease; }
.kids-filter-row button img { display: block; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 11px; }
.kids-filter-row button:hover { transform: translateY(-1px); border-color: var(--kids-green); box-shadow: 0 9px 22px rgba(55,55,40,.1); }
.kids-filter-row button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: #fff; box-shadow: 0 9px 22px rgba(37,34,31,.18); }
.kids-filter-row button[aria-pressed="true"] img { outline: 2px solid rgba(255,255,255,.72); outline-offset: -2px; }
.kids-filter-note { margin: .72rem 0 1.15rem; color: var(--muted); font-size: .72rem; line-height: 1.48; }

.kids-product-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .9rem; }
.kids-product-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: 0 10px 34px rgba(55,55,40,.05); }
.kids-product-card.is-first { border-top: 4px solid var(--kids-green); }
.kids-product-media { position: relative; min-height: 210px; overflow: hidden; background: var(--canvas-warm); }
.kids-product-media picture,
.kids-product-media img { display: block; width: 100%; height: 220px; }
.kids-product-media img { object-fit: cover; }
.kids-category-visual { display: grid; width: 100%; height: 220px; place-items: center; align-content: center; gap: .55rem; background: radial-gradient(circle at 50% 36%, #fff 0 18%, transparent 19%), linear-gradient(145deg, #f9f2df, #e6eee0); color: var(--kids-green-dark); }
.kids-category-visual span { display: grid; width: 78px; height: 78px; place-items: center; border: 1px solid rgba(82,117,90,.2); border-radius: 24px; background: rgba(255,255,255,.86); font-size: 2.7rem; font-weight: 900; line-height: 1; box-shadow: 0 12px 30px rgba(55,55,40,.08); }
.kids-category-visual strong { font-size: .72rem; letter-spacing: .02em; }
.kids-product-media > span { position: absolute; top: .65rem; left: .65rem; border-radius: 999px; background: rgba(255,255,255,.94); padding: .42rem .58rem; font-size: .66rem; font-weight: 900; box-shadow: 0 4px 18px rgba(0,0,0,.08); }
.kids-product-media > small { position: absolute; right: .55rem; bottom: .5rem; border-radius: 5px; background: rgba(37,34,31,.72); color: #fff; padding: .28rem .42rem; font-size: .57rem; }
.kids-product-body { display: flex; flex: 1; flex-direction: column; padding: 1rem; }
.kids-product-brand { margin: 0; color: var(--kids-berry); font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.kids-tier-note { display: inline-block; margin-left: .45rem; border-radius: 999px; background: var(--kids-green-soft); padding: .2rem .38rem; color: var(--kids-green-dark); font-size: .55rem; letter-spacing: 0; text-transform: none; }
.kids-product-body h3 { margin: .28rem 0 .82rem; font-size: 1.2rem; line-height: 1.17; overflow-wrap: anywhere; }
.kids-fit-copy,
.kids-watch-copy { margin-bottom: .68rem; border-left: 3px solid var(--kids-green); padding-left: .65rem; }
.kids-watch-copy { border-color: var(--kids-yellow); }
.kids-fit-copy strong,
.kids-watch-copy strong { display: block; font-size: .68rem; }
.kids-fit-copy p,
.kids-watch-copy p { margin: .18rem 0 0; color: var(--muted); font-size: .76rem; line-height: 1.46; }
.kids-product-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin: auto 0 .72rem; border-top: 1px solid var(--line); }
.kids-product-facts div { min-width: 0; border-bottom: 1px solid var(--line); padding: .56rem 0; }
.kids-product-facts div:nth-child(odd) { border-right: 1px solid var(--line); padding-right: .5rem; }
.kids-product-facts div:nth-child(even) { padding-left: .5rem; }
.kids-product-facts dt { color: var(--muted); font-size: .6rem; font-weight: 800; }
.kids-product-facts dd { margin: .14rem 0 0; font-size: .78rem; font-weight: 900; overflow-wrap: anywhere; }
.kids-product-data { margin: 0 0 .72rem; color: var(--muted); font-size: .62rem; line-height: 1.4; }
.kids-product-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .45rem; }
.kids-product-actions button { min-height: 44px; border: 1px solid var(--line); border-radius: 999px; background: #fff; padding: .56rem .65rem; font-size: .7rem; font-weight: 900; }
.kids-product-actions button:first-child { border-color: var(--ink); background: var(--ink); color: #fff; }
.kids-product-actions .kids-compare-button[aria-pressed="true"] { border-color: var(--kids-green); background: var(--kids-green-soft); color: var(--kids-green-dark); }

.kids-empty { grid-column: 1/-1; border: 1px dashed var(--line); border-radius: 18px; background: #fff; padding: 2.5rem 1.25rem; text-align: center; }
.kids-empty img { display: block; margin: 0 auto; }
.kids-empty h3 { margin: .8rem 0 .35rem; }
.kids-empty p { margin: 0 auto; max-width: 620px; color: var(--muted); line-height: 1.55; }
.kids-empty button { margin-top: 1rem; border: 0; border-radius: 999px; background: var(--kids-berry); color: #fff; padding: .72rem 1rem; font-weight: 900; }

.kids-basis-section { margin-top: 2rem; border-top: 1px solid var(--line); padding-top: 1.5rem; }
.kids-basis-section header { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.kids-basis-section h3 { margin: .25rem 0 0; font-size: 1.45rem; }
.kids-basis-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .7rem; }
.kids-basis-card { display: grid; min-width: 0; grid-template-columns: 54px minmax(0,1fr); gap: .75rem; border: 1px solid rgba(82,117,90,.2); border-radius: 15px; background: var(--kids-green-soft); padding: .9rem; }
.kids-basis-symbol { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 16px; background: #fff; font-size: 1.7rem; box-shadow: 0 8px 22px rgba(55,55,40,.07); }
.kids-basis-card h4 { margin: 0; font-size: .92rem; }
.kids-basis-card p { margin: .3rem 0 .48rem; color: var(--muted); font-size: .76rem; line-height: 1.48; }
.kids-basis-card small { display: block; color: #4d554d; font-size: .68rem; line-height: 1.45; }
.kids-basis-card em { display: inline-block; margin-top: .55rem; border-radius: 999px; background: rgba(255,255,255,.82); padding: .3rem .48rem; color: var(--kids-green-dark); font-size: .62rem; font-style: normal; font-weight: 900; }

.kids-explainer { border-top: 1px solid var(--line); }
.kids-explainer header { max-width: 820px; }
.kids-explainer-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .8rem; margin-top: 1.2rem; }
.kids-explainer-grid article { border-top: 4px solid var(--kids-green); border-radius: 0 0 14px 14px; background: #fff; padding: 1rem; }
.kids-explainer-grid article:nth-child(2) { border-color: var(--kids-yellow); }
.kids-explainer-grid article:nth-child(3) { border-color: var(--kids-berry); }
.kids-explainer-grid strong { font-size: .9rem; }
.kids-explainer-grid p { margin: .45rem 0 0; color: var(--muted); font-size: .8rem; line-height: 1.55; }
.kids-boundary { margin: 1rem 0 0; border-left: 4px solid var(--kids-yellow); background: #fff; padding: .9rem 1rem; color: var(--muted); font-size: .78rem; line-height: 1.55; }
.kids-boundary strong { color: var(--ink); }

.kids-compare-tray { position: fixed; z-index: 45; right: 1rem; bottom: 1rem; left: 1rem; display: flex; max-width: 820px; min-height: 72px; align-items: center; justify-content: space-between; gap: 1rem; margin-left: auto; border: 1px solid rgba(255,255,255,.18); border-radius: 14px; background: rgba(37,34,31,.96); color: #fff; padding: .78rem .9rem; box-shadow: 0 14px 50px rgba(0,0,0,.24); }
.kids-compare-tray small,
.kids-compare-tray strong { display: block; }
.kids-compare-tray small { color: rgba(255,255,255,.65); font-size: .63rem; }
.kids-compare-tray strong { max-width: 500px; margin-top: .15rem; font-size: .78rem; }
.kids-compare-tray > div:last-child { display: flex; gap: .45rem; }
.kids-compare-tray button { min-height: 42px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; background: transparent; color: #fff; padding: .55rem .75rem; font-size: .7rem; font-weight: 900; }
.kids-compare-tray button:last-child { border-color: var(--kids-yellow); background: var(--kids-yellow); color: var(--ink); }

.kids-dialog { position: relative; width: min(860px, calc(100% - 1.5rem)); max-height: calc(100dvh - 2rem); overflow: auto; border: 0; border-radius: 16px; padding: 1.2rem; color: var(--ink); box-shadow: 0 25px 90px rgba(0,0,0,.3); }
.kids-dialog::backdrop { background: rgba(31,28,25,.65); backdrop-filter: blur(4px); }
.kids-dialog-close { position: absolute; z-index: 2; top: .7rem; right: .7rem; display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: #fff; font-size: 1.35rem; line-height: 1; }
.kids-dialog-head { display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 1rem; align-items: center; padding-right: 2.5rem; }
.kids-dialog-visual { width: 190px; height: 155px; overflow: hidden; border-radius: 10px; }
.kids-dialog-visual picture,
.kids-dialog-visual img { display: block; width: 100%; height: 155px; }
.kids-dialog-visual img { object-fit: cover; }
.kids-dialog-visual .kids-category-visual { height: 155px; }
.kids-dialog-visual .kids-category-visual span { width: 58px; height: 58px; border-radius: 18px; font-size: 2rem; }
.kids-dialog-head h2,
.kids-compare-dialog h2 { margin: .25rem 0 .5rem; font-size: 1.7rem; }
.kids-dialog-head p:last-child { margin: 0; color: var(--muted); line-height: 1.5; }
.kids-dialog-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; margin-top: 1rem; }
.kids-dialog-columns section { border: 1px solid var(--line); border-radius: 10px; background: var(--canvas); padding: .9rem; }
.kids-dialog-columns h3 { margin: 0 0 .4rem; font-size: .86rem; }
.kids-dialog-columns h3:not(:first-child) { margin-top: 1rem; }
.kids-dialog-columns p { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.52; }
.kids-dialog-columns dl { margin: 0; }
.kids-dialog-columns dl div { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--line); padding: .52rem 0; font-size: .75rem; }
.kids-dialog-columns dl div:first-child { border-top: 0; }
.kids-dialog-columns dd { margin: 0; font-weight: 900; text-align: right; }
.kids-dialog-caveat { border-left: 3px solid var(--kids-yellow); background: var(--canvas-warm); padding: .72rem .82rem; color: var(--muted); font-size: .73rem; line-height: 1.48; }
.kids-dialog-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.kids-dialog-actions a { border-radius: 999px; background: var(--ink); color: #fff; padding: .7rem .85rem; font-size: .74rem; font-weight: 900; text-decoration: none; }
.kids-dialog-actions a:not(:first-child) { background: var(--kids-green); }
.kids-table-scroll { overflow-x: auto; }
.kids-compare-dialog table { width: 100%; min-width: 650px; border-collapse: collapse; }
.kids-compare-dialog th,
.kids-compare-dialog td { border-bottom: 1px solid var(--line); padding: .72rem; font-size: .76rem; line-height: 1.46; text-align: left; vertical-align: top; }
.kids-compare-dialog thead th { background: var(--ink); color: #fff; }
.kids-compare-dialog tbody th { width: 160px; background: var(--canvas); }

@media (max-width: 1040px) {
  .kids-hero { grid-template-columns: minmax(160px,.55fr) minmax(500px,1fr); }
  .kids-product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 760px) {
  .kids-page .topbar { position: sticky; top: 0; align-items: center; flex-direction: row; gap: .5rem; padding: .58rem .8rem; }
  .kids-page .topbar .brand small { display: none; }
  .kids-page .topbar nav { width: auto; flex: 1; flex-wrap: nowrap; justify-content: flex-end; overflow-x: auto; scrollbar-width: none; }
  .kids-page .topbar nav::-webkit-scrollbar { display: none; }
  .kids-page .topbar nav a { flex: 0 0 auto; padding: .48rem .56rem; font-size: .72rem; }
  .kids-page .topbar nav a:nth-child(2),
  .kids-page .topbar nav a:nth-child(3) { display: none; }
  .kids-hero { display: grid; min-height: auto; grid-template-columns: 1fr; grid-template-rows: 245px auto auto; gap: 1rem; background-image: url('/assets/kids/morgenklar-900.webp'); background-position: 37% top; background-size: auto 280px; background-repeat: no-repeat; padding: 0 1rem 2.4rem; }
  .kids-hero-photo { display: block; grid-row: 1; }
  .kids-hero-copy { grid-column: 1; grid-row: 2; padding-top: .5rem; }
  .kids-hero-copy h1 { font-size: clamp(2.55rem, 12vw, 3.75rem); }
  .kids-hero-copy .lead { font-size: .98rem; line-height: 1.55; }
  .kids-situation-panel { grid-column: 1; grid-row: 3; padding: .85rem; }
  .kids-situation-grid { grid-template-columns: 1fr; }
  .kids-situation-button { min-height: 76px; }
  .kids-results,
  .kids-explainer { padding: 2.6rem 0; scroll-margin-top: 72px; }
  .kids-results-head { display: block; }
  .kids-results-head > p { margin-top: .55rem; text-align: left; }
  .kids-filter-panel { margin-bottom: 1rem; border-top: 1px solid var(--line); padding-top: .8rem; }
  .kids-filter-panel > summary { display: flex; min-height: 46px; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 999px; background: #fff; padding: .65rem .85rem; font-size: .76rem; font-weight: 900; cursor: pointer; }
  .kids-filter-panel > summary small { color: var(--muted); font-size: .62rem; }
  .kids-filter-panel[open] > summary { border-color: var(--kids-green); background: var(--kids-green-soft); }
  .kids-filter-panel .kids-filter-row { margin-top: .7rem; border-top: 0; padding-top: 0; }
  .kids-filter-panel .kids-filter-note { margin-bottom: 0; }
  .kids-product-grid,
  .kids-explainer-grid,
  .kids-basis-grid { grid-template-columns: 1fr; }
  .kids-compare-tray { right: .5rem; bottom: .5rem; left: .5rem; display: block; }
  .kids-compare-tray > div:last-child { margin-top: .55rem; }
  .kids-compare-tray button { flex: 1; }
  .kids-dialog-head,
  .kids-dialog-columns { grid-template-columns: 1fr; }
  .kids-dialog-visual { width: 100%; height: 190px; }
  .kids-dialog-visual picture,
  .kids-dialog-visual img,
  .kids-dialog-visual .kids-category-visual { height: 190px; }
}

@media (max-width: 390px) {
  .kids-page .brand-mark { width: 34px; height: 34px; }
  .kids-page .topbar nav a { padding-inline: .48rem; font-size: .68rem; }
  .kids-page .topbar nav a:first-child { display: none; }
  .kids-hero { grid-template-rows: 210px auto auto; background-size: auto 245px; }
  .kids-proof { flex-wrap: nowrap; gap: .25rem; }
  .kids-proof li { padding: .38rem .42rem; font-size: .56rem; white-space: nowrap; }
  .kids-filter-row { display: grid; grid-template-columns: 1fr; }
  .kids-filter-row button { width: 100%; justify-content: flex-start; text-align: left; }
  .kids-product-actions { grid-template-columns: 1fr; }
  .kids-compare-tray > div:last-child { display: grid; grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}