/* Kinder — shared site styles */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0; background: var(--surface-page); font-family: var(--font-primary);
  overflow-x: hidden; overflow-wrap: break-word;
}
/* Words in headlines are never split (client rule, same as trb-zentrum.com):
   kinder-fit.js shrinks a heading until its longest word fits on one line;
   overflow-wrap stays only as a last-resort guard against horizontal scrolling. */
h1, h2, h3 { overflow-wrap: break-word; -webkit-hyphens: manual; hyphens: manual; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }
img { max-width: 100%; display: block; }
.img-slot {
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 16px; font: 600 13px/1.4 var(--font-primary); color: var(--text-muted);
  background: var(--surface-tint); border: 1px dashed var(--border-strong); box-sizing: border-box;
}

/* Header — matches the main site's actual live nav: a persistent desktop bar
   (metabar + nav links + phone + CTA) that only collapses into the hamburger
   dropdown below a real breakpoint, not always. Checked directly against the
   main site's own source: it drives this with `window.matchMedia("(max-width:
   1150px)")` — confirmed live by testing at 1920px (full nav + metabar
   visible) vs 1024px (hamburger only). 1150px is the exact cutover; using a
   plain CSS media query here for the same effect. */
.kinder-metabar { background: var(--surface-dark); }
.kinder-metabar-inner {
  max-width: 1240px; margin: 0 auto; padding: 10px 40px; display: flex;
  justify-content: space-between; gap: 24px; flex-wrap: wrap; font-size: 12px;
  font-weight: 600; letter-spacing: 0.06em;
}
.kinder-metabar-left { display: flex; gap: 24px; flex-wrap: wrap; }
.kinder-metabar-inner a { color: rgba(248,248,252,0.82); }
.kinder-metabar-inner a:hover { color: var(--trb-teal); }
.kinder-metabar-main { color: var(--trb-teal) !important; font-weight: 700; }
.kinder-metabar-main:hover { color: var(--trb-offwhite) !important; }

.kinder-navbar {
  position: sticky; top: 0; z-index: 60; background: rgba(248,248,252,0.94);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-hairline);
}
.kinder-navbar-inner {
  max-width: 1240px; margin: 0 auto; padding: 12px 40px; display: flex;
  align-items: center; gap: 28px;
}
.kinder-logo { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.kinder-logo img { height: 34px; width: auto; display: block; }
.kinder-logo-label {
  font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--trb-dunkelteal); border-left: 1px solid var(--card-border); padding-left: 12px;
}
.kinder-nav-links { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.kinder-nav-links a {
  color: var(--trb-navy); font-size: 14px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; white-space: nowrap;
}
.kinder-nav-links a:hover { color: var(--trb-dunkelteal); }
.kinder-nav-actions { display: flex; align-items: center; gap: 16px; margin-left: 12px; }
.kinder-phone { color: var(--trb-navy); font-size: 15px; font-weight: 700; white-space: nowrap; }
.kinder-cta {
  background: var(--trb-orange); color: var(--trb-navy); font-size: 14px; font-weight: 800;
  padding: 12px 22px; border-radius: var(--radius-pill); white-space: nowrap;
}
.kinder-cta:hover { filter: brightness(1.06); }
.kinder-cta-short { display: none; }
.kinder-burger {
  display: none; width: 44px; height: 44px; flex: 0 0 auto; margin-left: auto;
  border: 1px solid var(--border-strong); background: transparent; border-radius: 12px;
  cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.kinder-burger span { display: block; width: 20px; height: 2px; border-radius: 1px; background: var(--trb-navy); }
.kinder-mobile-menu {
  border-top: 1px solid var(--border-hairline); background: var(--trb-offwhite);
  padding: 16px 20px 24px; display: none; flex-direction: column;
}
.kinder-mobile-menu a {
  color: var(--trb-navy); font-size: 17px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em; padding: 13px 0; border-bottom: 1px solid var(--border-hairline);
}
.kinder-mobile-secondary { display: flex; flex-wrap: wrap; gap: 4px 20px; padding-top: 10px; }
.kinder-mobile-secondary a {
  border-bottom: none; text-transform: none; letter-spacing: normal; font-size: 15px;
  font-weight: 600; padding: 8px 0;
}

/* The main site's own breakpoint (confirmed via its `matchMedia("(max-width:
   1150px)")` call) — below this, the persistent nav/metabar give way to the
   hamburger dropdown; at or above it, the full desktop bar shows. */
@media (max-width: 1150px) {
  .kinder-metabar { display: none; }
  .kinder-nav-links { display: none; }
  .kinder-navbar-inner { gap: 10px; padding: 12px 16px; }
  .kinder-logo-label { display: none; }
  .kinder-nav-actions { margin-left: auto; }
  .kinder-phone {
    border: 2px solid var(--trb-dunkelteal); border-radius: var(--radius-pill);
    padding: 12px 14px; font-size: 13px;
  }
  .kinder-cta-full { display: none; }
  .kinder-cta-short { display: inline-block; }
  .kinder-burger { display: flex; }
  .kinder-mobile-menu[hidden] { display: none; }
  .kinder-mobile-menu:not([hidden]) { display: flex; }
}

@media (max-width: 400px) {
  .kinder-logo-label { display: none; }
  .kinder-phone { padding: 12px; }
}

[data-cms-group], [data-cms-source] {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px;
}
[data-cms-faq] { display: flex; flex-direction: column; gap: 12px; }
[data-cms-cluster] { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
[data-cms-quellen] { display: flex; flex-direction: column; gap: 8px; }
.kcard, .kstat, .kstep {
  background: var(--surface-card); border: 1px solid var(--card-border);
  border-radius: var(--radius-card); padding: 24px;
  display: flex; flex-direction: column; gap: 8px; box-sizing: border-box;
  text-decoration: none; color: inherit;
}
.kcard-wert { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--trb-dunkelteal); }
.kcard-titel, .kstep-titel { font-weight: 700; font-size: 19px; color: var(--text-primary); }
.kcard-text, .kstep-text { font-size: 15px; line-height: 1.6; color: var(--text-muted); }
.kstat { background: var(--surface-dark); }
.kstat-wert { font-size: 34px; font-weight: 800; color: var(--trb-teal); line-height: 1; }
.kstat-titel { font-weight: 700; font-size: 17px; color: var(--trb-offwhite); }
.kstat-text { font-size: 15px; line-height: 1.55; color: rgba(248,248,252,0.8); }
.kstep {
  background: transparent; border: none; border-top: 4px solid var(--trb-dunkelteal);
  border-radius: 0; padding: 20px 0 0;
}
.kstep-wert { font-weight: 800; font-size: 15px; color: var(--trb-teal); }
.kchip {
  border: 1px solid var(--field-border); border-radius: var(--radius-pill); padding: 12px 20px;
  font-size: 15px; font-weight: 600; color: var(--text-primary); display: inline-block;
  text-decoration: none;
}
.kbullet {
  display: flex; gap: 12px; font-size: 16px; line-height: 1.5;
}
.kbullet::before { content: "·"; color: var(--trb-dunkelteal); font-weight: 800; }
.kfaq { background: var(--surface-page); border: 1px solid var(--card-border); border-radius: var(--radius-card); padding: 20px 24px; }
.kfaq summary { font-weight: 700; font-size: 16px; cursor: pointer; }
.kfaq p { margin: 14px 0 0; font-size: 15px; line-height: 1.6; color: var(--text-muted); }
.kcluster {
  background: var(--surface-card); border: 1px solid var(--card-border); border-radius: var(--radius-card);
  padding: 24px; display: block; font-weight: 700; font-size: 18px; color: var(--text-primary);
}
/* No fixed color: [data-cms-quellen] sits on a light background on some
   pages and a dark one on others (e.g. reflexintegration.html), and already
   carries the correct color inline for its page — inheriting keeps this
   readable on both instead of always using the light-background shade. */
.kquelle { font-size: 14px; line-height: 1.6; color: inherit; }
.k-akzent-ondark { color: var(--trb-teal); }
/* Accent color for **bold**-marked words inside CMS-driven section H2s —
   matches the color every static H2 accent span already used on this page,
   on both light and dark section backgrounds. */
.k-akzent { color: var(--trb-dunkelteal); }
.kcard-img {
  margin: -24px -24px 4px; border-radius: var(--radius-card) var(--radius-card) 0 0;
  overflow: hidden; height: 180px;
}
.kcard-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Design-system rule (Handoff-README): "Text nur auf Navy-Overlay (--overlay-photo)" —
   whenever a headline/label sits directly on a photo, wrap the photo in this class so
   the gradient keeps the text legible. Not applied anywhere by default (no Kinder
   layout currently places text over a photo) — available for a future real photo
   that needs a caption on top of it. */
.k-photo-overlay { position: relative; }
.k-photo-overlay::after {
  content: ""; position: absolute; inset: 0; background: var(--overlay-photo); pointer-events: none;
}
.k-photo-overlay > * { position: relative; z-index: 1; }

/* Four-up card rows (homepage therapy overview): 4 columns on desktop, 2 on
   tablet, single column on phones (PAGE_CSS handles <=760px) — avoids a lone
   orphan card on the second row. */
@media (max-width: 1100px) {
  .kinder-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Hero background photo (optional, via CMS field heroHintergrundBild) — the
   gradient/background-image itself is set inline by fillHeroBackground() in
   KINDER_HYDRATE_JS only when a CMS image exists, matching trb-zentrum.com's
   own hero pattern exactly (same gradient values). This rule only adds the
   cover/no-repeat mechanics so a set image always fills the section. */
[data-cms-hero-bg] { background-repeat: no-repeat; }

/* The homepage hero's decorative logo watermark — hidden on narrow screens
   so it doesn't collide with real photos or text once a hero background
   image is set (same breakpoint trb-zentrum.com uses for its own watermark). */
@media (max-width: 767px) {
  .kinder-hero-watermark { display: none; }
}

/* Homepage hero trust-bar badges ("Psychomotorisch fundiert", …) — own
   background per item so they read clearly against any hero photo, not
   just flat navy. */
.kinder-trust-pill {
  background: rgba(248,248,252,0.1); border: 1px solid rgba(248,248,252,0.2);
  border-radius: var(--radius-pill); padding: 9px 18px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
  color: rgba(248,248,252,0.92);
}

/* hover states (from design handoff) */
.hv-home-1:hover { filter: brightness(1.08) }
.hv-home-2:hover { background: rgba(133,189,179,0.15) }
.hv-home-3:hover { box-shadow: var(--shadow-card-hover); border-color: var(--trb-teal) }
.hv-home-4:hover { box-shadow: var(--shadow-card-hover); border-color: var(--trb-teal) }
.hv-home-5:hover { box-shadow: var(--shadow-card-hover); border-color: var(--trb-teal) }
.hv-home-6:hover { box-shadow: var(--shadow-card-hover); border-color: var(--trb-teal) }
.hv-home-7:hover { border-color: var(--trb-dunkelteal); background: var(--surface-page) }
.hv-home-8:hover { border-color: var(--trb-dunkelteal); background: var(--surface-page) }
.hv-home-9:hover { border-color: var(--trb-dunkelteal); background: var(--surface-page) }
.hv-home-10:hover { border-color: var(--trb-dunkelteal); background: var(--surface-page) }
.hv-home-11:hover { border-color: var(--trb-dunkelteal); background: var(--surface-page) }
.hv-home-12:hover { border-color: var(--trb-dunkelteal); background: var(--surface-page) }
.hv-home-13:hover { border-color: var(--trb-dunkelteal); background: var(--surface-page) }
.hv-home-14:hover { border-color: var(--trb-teal) }
.hv-home-15:hover { border-color: var(--trb-teal) }
.hv-home-16:hover { border-color: var(--trb-teal) }
.hv-home-17:hover { border-color: var(--trb-teal) }
.hv-home-18:hover { box-shadow: var(--shadow-card-hover) }
.hv-home-19:hover { box-shadow: var(--shadow-card-hover) }
.hv-home-20:hover { box-shadow: var(--shadow-card-hover) }
.hv-home-21:hover { box-shadow: var(--shadow-card-hover) }
.hv-home-22:hover { box-shadow: var(--shadow-card-hover) }
.hv-home-23:hover { box-shadow: var(--shadow-card-hover) }
.hv-home-24:hover { box-shadow: var(--shadow-card-hover) }
.hv-home-25:hover { box-shadow: var(--shadow-card-hover) }
.hv-home-26:hover { background: var(--trb-dunkelteal) }
.hv-home-27:hover { background: rgba(64,156,140,0.1) }
.hv-entwicklung-28:hover { filter: brightness(1.08) }
.hv-entwicklung-29:hover { background: rgba(133,189,179,0.15) }
.hv-entwicklung-30:hover { border-color: var(--trb-teal) }
.hv-entwicklung-31:hover { border-color: var(--trb-teal) }
.hv-entwicklung-32:hover { border-color: var(--trb-teal) }
.hv-entwicklung-33:hover { border-color: var(--trb-teal) }
.hv-entwicklung-34:hover { box-shadow: var(--shadow-card-hover) }
.hv-entwicklung-35:hover { box-shadow: var(--shadow-card-hover) }
.hv-entwicklung-36:hover { box-shadow: var(--shadow-card-hover) }
.hv-reflexintegration-37:hover { filter: brightness(1.08) }
.hv-reflexintegration-38:hover { background: rgba(133,189,179,0.15) }
.hv-reflexintegration-39:hover { background: var(--trb-dunkelteal) }
.hv-reflexintegration-40:hover { box-shadow: var(--shadow-card-hover) }
.hv-reflexintegration-41:hover { box-shadow: var(--shadow-card-hover) }
.hv-reflexintegration-42:hover { box-shadow: var(--shadow-card-hover) }
.hv-wasser-schwimmen-43:hover { filter: brightness(1.08) }
.hv-wasser-schwimmen-44:hover { background: rgba(133,189,179,0.15) }
.hv-wasser-schwimmen-45:hover { background: var(--trb-dunkelteal) }
.hv-wasser-schwimmen-46:hover { box-shadow: var(--shadow-card-hover) }
.hv-wasser-schwimmen-47:hover { box-shadow: var(--shadow-card-hover) }
.hv-wasser-schwimmen-48:hover { box-shadow: var(--shadow-card-hover) }
.hv-lernen-schule-49:hover { filter: brightness(1.08) }
.hv-lernen-schule-50:hover { background: rgba(133,189,179,0.15) }
.hv-lernen-schule-51:hover { border-color: var(--trb-teal) }
.hv-lernen-schule-52:hover { border-color: var(--trb-teal) }
.hv-lernen-schule-53:hover { border-color: var(--trb-teal) }
.hv-lernen-schule-54:hover { border-color: var(--trb-teal) }
.hv-lernen-schule-55:hover { box-shadow: var(--shadow-card-hover) }
.hv-lernen-schule-56:hover { box-shadow: var(--shadow-card-hover) }
.hv-lernen-schule-57:hover { box-shadow: var(--shadow-card-hover) }
.hv-entwicklungscheck-58:hover { filter: brightness(1.08) }
.hv-entwicklungscheck-59:hover { background: rgba(133,189,179,0.15) }
.hv-entwicklungscheck-60:hover { box-shadow: var(--shadow-card-hover) }
.hv-entwicklungscheck-61:hover { box-shadow: var(--shadow-card-hover) }
.hv-entwicklungscheck-62:hover { background: var(--trb-dunkelteal) }
.hv-entwicklungscheck-63:hover { background: rgba(64,156,140,0.1) }
.hv-kurse-64:hover { filter: brightness(1.08) }
.hv-kurse-65:hover { background: rgba(133,189,179,0.15) }
.hv-kurse-66:hover { background: var(--trb-dunkelteal) }
.hv-therapie-67:hover { filter: brightness(1.08) }
.hv-therapie-68:hover { background: rgba(133,189,179,0.15) }
.hv-therapie-69:hover { background: var(--trb-dunkelteal) }
.hv-therapie-70:hover { background: rgba(64,156,140,0.1) }
.hv-fuer-eltern-71:hover { background: rgba(133,189,179,0.15) }
.hv-fuer-eltern-72:hover { box-shadow: var(--shadow-card-hover) }
.hv-fuer-eltern-73:hover { background: var(--trb-dunkelteal) }
.hv-fuer-eltern-74:hover { background: rgba(64,156,140,0.1) }

@media (max-width: 760px) {
  [style*="display: grid"] { grid-template-columns: 1fr !important; }
  [style*="justify-content: space-between"] { flex-direction: column; align-items: flex-start !important; }
}
@media (max-width: 640px) {
  [style*="font-size: 60px"], [style*="font-size: 50px"] { font-size: 32px !important; line-height: 1.15 !important; }
  [style*="font-size: 42px"] { font-size: 28px !important; }
  [style*="font-size: 38px"], [style*="font-size: 40px"], [style*="font-size: 34px"] { font-size: 25px !important; }
  [style*="padding: 96px"], [style*="padding: 88px"] { padding: 48px 20px !important; }
  [style*="padding: 80px 40px"], [style*="padding: 72px 40px"] { padding: 44px 20px !important; }
  [style*="max-width: 1240px; margin: 0 auto; padding: 0 40px"] { padding-left: 20px !important; padding-right: 20px !important; }
  [style*="padding: 18px 40px"], [style*="padding: 20px 40px"] { padding-left: 20px !important; padding-right: 20px !important; }
}