/* ==========================================================
   SEITEN-STYLES (nutzen die Tokens aus design-system.css)
   ========================================================== */

/* ---------- Views (Hub / Kinderland / Familienwelt) ---------- */
.view{ display:none; }
.view.is-active{ display:block; animation:view-in .45s ease both; }
@keyframes view-in{
  from{ opacity:0; transform:translateY(14px); }
  to  { opacity:1; transform:none; }
}

/* ---------- HUB: geteilte Startwelt (gerade Trennung) ---------- */
.hub-split{
  position:relative;
  display:grid; grid-template-columns:1fr 1fr;
  min-height:100svh; overflow:hidden;
}
.hub-side{
  position:relative;
  display:grid; align-content:center; justify-items:center;
  text-align:center;
  padding:110px 7vw 110px;
}
/* Beide Hälften sind durchgehende Farbflächen mit rein horizontalem Fade
   (außen dunkler → zur Mitte hin die Grundfarbe). Vertikal ändert sich
   nichts, daher keine Querkanten – Hub und Landing-Spalten nutzen
   exakt denselben Verlauf. */
.hub-kl{ background:linear-gradient(90deg, var(--brand-blue-deep), var(--brand-blue) 70%); color:#fff; }
.hub-fw{ background:linear-gradient(90deg, var(--brand-yellow) 30%, #ffff00); color:var(--brand-blue-deep); }

/* Beide Hub-Hälften teilen sich die Zeilen (Subgrid): Eyebrow, Titel, Motto,
   Text und Button stehen links und rechts exakt auf gleicher Höhe. */
@media (min-width:861px){
  @supports (grid-template-rows: subgrid){
    .hub-split{
      grid-template-rows:repeat(6, auto); align-content:center;
      /* Restflächen ober-/unterhalb der zentrierten Zeilen in denselben
         Farben füllen wie die Hälften – sonst blitzt der Papierton durch */
      background:linear-gradient(90deg,
        var(--brand-blue-deep) 0%, var(--brand-blue) 35%, var(--brand-blue) 50%,
        var(--brand-yellow) 50%, var(--brand-yellow) 65%, #ffff00 100%);
    }
    .hub-kl{ grid-column:1; }
    .hub-fw{ grid-column:2; }
    .hub-side{
      grid-row:1 / span 6;
      grid-template-rows:subgrid;
      align-content:center; align-items:center;
    }
  }
}

/* Logos über den beiden Welten */
.hub-logo{ display:block; margin:0 auto 24px; width:auto; max-width:100%; }
.hub-kl .hub-logo{ height:clamp(110px, 13vw, 160px); filter:drop-shadow(0 6px 14px rgba(0,32,94,.45)); }
.hub-fw .hub-logo{ height:clamp(190px, 21vw, 260px); filter:drop-shadow(0 6px 14px rgba(184,116,0,.35)); }
@media (max-width:860px){
  .hub-kl .hub-logo{ height:104px; }
  .hub-fw .hub-logo{ height:180px; }
}

.hub-side .ks-h1{ margin:18px 0 6px; }
/* Die Wortmarke ist die H1 der Startseite (Überschrift = Logo mit Alt-Text) */
.hub-logo-h1{ margin:0; line-height:0; font-size:inherit; }
.hub-kl .ks-h1{ color:#fff; text-shadow:0 4px 0 rgba(0,32,94,.45); }
.hub-fw .ks-h1{ color:var(--brand-blue-deep); text-shadow:0 4px 0 rgba(255,255,255,.4); }
.hub-side .ks-motto{ opacity:.95; }
.hub-side .hub-text{ max-width:44ch; margin:16px 0 30px; font-size:1.06rem; }
.hub-kl .hub-text{ color:rgba(255,255,255,.88); }
.hub-fw .hub-text{ color:#5C4A08; }
.hub-kl .ks-eyebrow{ background:var(--brand-yellow); color:var(--brand-blue-deep); }
.hub-fw .ks-eyebrow{ background:#fff; color:var(--brand-amber-deep); }

/* Verstreute Deko-Emojis im Hintergrund (Hub + Landing-Spalten) –
   Position, Größe, Drehung, Bewegung und Tempo werden per JS bei jedem
   Seitenaufruf zu 100% zufällig vergeben (Container mit data-emojis). */
/* Unterste Ebene: nur über der Hintergrundfarbe, nie über Text/Inhalt */
.hub-deco, .land-deco{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.hub-side > *:not(.hub-deco),
.land-col > *:not(.land-deco){ position:relative; z-index:1; }
.hub-deco span, .land-deco span{
  position:absolute; opacity:.75; --float-rot:0deg;
  animation:ks-drift 6s ease-in-out infinite;
}

/* Lebhafteres Treiben: auf und ab, leicht seitlich, mit Pendel-Drehung */
@keyframes ks-drift{
  0%, 100%{ transform:translate(0, 0) rotate(var(--float-rot)); }
  30%     { transform:translate(12px, -22px) rotate(calc(var(--float-rot) + 8deg)); }
  65%     { transform:translate(-10px, -8px) rotate(calc(var(--float-rot) - 7deg)); }
}

/* Hub mobil: untereinander, Badge zwischen den Hälften */
@media (max-width:860px){
  .hub-split{ grid-template-columns:1fr; min-height:0; }
  .hub-side{ min-height:74svh; padding:100px 24px 80px; }
}

/* ---------- Landing-Split unter dem Hub ----------
   Die gerade Trennlinie des Hubs läuft als Farbkante
   (Blau-Wash | Gelb-Wash) bis zum Footer durch. */
.land-split{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
.land-col{ position:relative; overflow:hidden; padding:56px clamp(20px, 4vw, 56px) 68px; }

/* Größere Sticker in den Landing-Karten */
.land-col .ks-card .ks-sticker{ width:84px; height:84px; font-size:2.5rem; border-radius:28px; }

/* Beide Spalten teilen sich ein Zeilen-Raster: Badge, Kopf, Inhalt, CTA.
   Dadurch stehen die Texte links und rechts parallel. */
.land-badge-row{ text-align:center; margin:0 0 26px; }
@media (min-width:861px){
  .land-col{ display:flex; flex-direction:column; }
  .land-col .land-end{ margin-top:auto; padding-top:24px; }
  @supports (grid-template-rows: subgrid){
    .land-split{ grid-template-rows:auto auto 1fr auto; }
    .land-col{
      display:grid; grid-template-rows:subgrid;
      grid-row:1 / span 4;
      align-content:start;
    }
    .land-col .land-end{ margin-top:0; align-self:end; }
  }
}

/* Sanfte Scroll-Reveals (per JS aktiviert, respektiert Reduced Motion) */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

/* Exakt derselbe horizontale Fade wie im Hub darüber – nahtloser Übergang */
.land-col--blue{
  background:linear-gradient(90deg, var(--brand-blue-deep), var(--brand-blue) 70%);
  color:#fff;
}
.land-col--yellow{
  background:linear-gradient(90deg, var(--brand-yellow) 30%, #ffff00);
  color:var(--brand-blue-deep);
}
.land-col--blue .ks-section-head .ks-h2{ color:#fff; text-shadow:0 3px 0 rgba(0,32,94,.4); }
.land-col--blue .ks-lede{ color:rgba(255,255,255,.88); }
.land-col--blue .ks-eyebrow{ background:var(--brand-yellow); color:var(--brand-blue-deep); }
.land-col--blue .ks-squiggle{ color:rgba(255,255,255,.5); }
.land-col--yellow .ks-section-head .ks-h2{ color:var(--brand-blue-deep); text-shadow:0 3px 0 rgba(255,255,255,.4); }
.land-col--yellow .ks-lede{ color:#5C4A08; }
.land-col--yellow .ks-eyebrow{ background:#fff; color:var(--brand-amber-deep); }
.land-col--yellow .ks-squiggle{ color:rgba(184,116,0,.55); }

.land-col .ks-section-head{ margin-bottom:24px; }
.land-text{ max-width:560px; margin:22px auto 0; line-height:1.7; }
.land-col--yellow .land-text{ color:#5C4A08; }
.land-col--blue .land-text{ color:rgba(255,255,255,.88); }
.land-col .ks-grid,
.land-col .ks-factbox{ max-width:560px; margin-inline:auto; }
.land-col .ks-factbox{ margin-top:20px; }
.land-facts{ justify-content:center; margin:0 auto 26px; max-width:560px; }
.land-facts .ks-chip{ background:var(--surface); border-color:transparent; box-shadow:var(--shadow); }
.land-cta{ text-align:center; margin-top:28px; }
.land-cta .ks-btn{ margin:6px; }

/* Badge-Variante auf Gelb: blau, damit sie sich abhebt */
.land-col--yellow .free-badge{
  background:var(--brand-blue); color:#fff;
  box-shadow:0 5px 0 var(--brand-blue-deep), var(--shadow);
}

/* „Freie Plätze"-Badge */
.free-badge{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--brand-yellow); color:var(--brand-blue-deep);
  font-family:var(--font-display); font-weight:800; font-size:.98rem;
  padding:12px 22px; border-radius:var(--radius-round);
  box-shadow:0 5px 0 var(--brand-amber), var(--shadow);
  text-decoration:none; rotate:-2deg;
  transition:transform .15s, rotate .15s;
}
.free-badge:hover{ transform:scale(1.06); rotate:0deg; }
.free-badge:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--brand-amber); }

/* Kleingedrucktes in den Landing-Spalten */
.land-note{ text-align:center; font-size:.88rem; max-width:54ch; margin:14px auto 24px; line-height:1.6; }
.land-note:last-child{ margin-bottom:0; }
.land-col--blue .land-note{ color:rgba(255,255,255,.78); }
.land-col--yellow .land-note{ color:#8A6D10; }
.land-teamfoto{
  display:block;
  width:min(880px, 100%);
  height:auto;
  margin:4px auto 34px;
}
.land-col .ks-squiggle{ margin:28px auto; }
.land-col .ks-room{ max-width:560px; margin-inline:auto; }
.land-col .ks-room + .ks-room{ margin-top:12px; }
.land-col .ks-room .ks-price{ flex:0 0 auto; }
@media (max-width:860px){ .land-split{ grid-template-columns:1fr; } }

/* ==========================================================
   WELTSEITEN VOLLFLÄCHIG EINGEFÄRBT
   Wie die beiden Hälften der Startseite: die KOMPLETTE Seite trägt die
   Weltfarbe – Kinderland durchgehend Blau, Familienwelt durchgehend Gelb.
   Weiß bleiben nur die Kacheln (Karten, Faktenboxen, Räume, Navi).
   ========================================================== */
/* Der Verlauf läuft WAAGERECHT – außen dunkler, zur Mitte hin die
   Grundfarbe. Genau wie die beiden Hälften der Startseite. Das ist von
   der Seitenhöhe unabhängig (ein senkrechter Verlauf würde auf einer
   4000 px langen Seite auseinandergezogen) und wird vom Browser genau
   EINMAL gezeichnet – kein background-attachment:fixed, das bei jedem
   Scroll-Frame die komplette Fläche neu malen müsste. */
#kinderland{
  background:linear-gradient(90deg,
    #6caed0 0%, #84c5e2 38%,
    #84c5e2 62%, #6caed0 100%);
  color:#fff;
}
#familienwelt{
  background:linear-gradient(90deg,
    #ffff00 0%, var(--brand-yellow) 38%,
    var(--brand-yellow) 62%, #ffff00 100%);
  color:var(--brand-blue-deep);
}
/* Überscroll-Fläche in derselben Farbe, damit oben/unten nichts weiß blitzt */
body[data-world="kinderland"]{ background-color:var(--brand-blue); }
body[data-world="familienwelt"]{ background-color:var(--brand-yellow); }

/* ---- Texte auf der farbigen Fläche (Karteninhalte bleiben unberührt) ---- */
#kinderland .ks-section-head .ks-h2{ color:#003399; text-shadow:none; }
#kinderland .ks-section-head .ks-lede{ color:rgba(255,255,255,.88); }
#kinderland .ks-eyebrow{ background:var(--brand-yellow); color:var(--brand-blue-deep); }
#kinderland .ks-squiggle{ color:rgba(255,255,255,.45); }

#familienwelt .ks-section-head .ks-h2{ color:var(--brand-blue-deep); text-shadow:0 2px 0 rgba(255,255,255,.32), 0 6px 16px rgba(255,255,255,.16); }
#familienwelt .ks-section-head .ks-lede{ color:#5C4A08; }
#familienwelt .ks-squiggle{ color:rgba(184,116,0,.55); }
/* Die Standard-Überzeile ist blassgelb – auf der gelben Fläche unsichtbar */
#familienwelt .ks-section-head .ks-eyebrow{ background:#fff; color:var(--brand-amber-deep); }

/* Die Weiß-auf-Blau-Regel oben darf nicht in die weißen Kacheln
   hineinwirken – dort gelten weiter die Karten-Farben. */
#kinderland .ks-card .ks-eyebrow{ background:var(--world-wash); color:var(--world-deep); }

/* Der Hero war ein eigenes Farb-Panel – auf der nun durchgehend farbigen
   Seite wirkte das wie ein abgesetzter Ausschnitt. Er läuft jetzt offen
   in die Seitenfarbe, genau wie die Hälften der Startseite. */
#kinderland .world-hero,
#familienwelt .world-hero{
  background:none;
  border-radius:0;
  margin-top:0;
  padding:52px 20px 30px;
}
/* Auf Gelb muss die Hero-Schrift dunkel sein – Weiß wäre unlesbar */
#familienwelt .world-hero,
#familienwelt .world-hero h1,
#familienwelt .world-hero .ks-motto{ color:var(--brand-blue-deep); }
#familienwelt .world-hero h1{ text-shadow:0 4px 0 rgba(255,255,255,.4); }
#familienwelt .world-hero .world-lede{ color:#5C4A08; }
#familienwelt .world-hero .ks-eyebrow{ background:#fff; color:var(--brand-amber-deep); }
#familienwelt .world-hero .ks-chip--onblue{
  background:rgba(255,255,255,.75); color:var(--brand-blue-deep); border-color:transparent;
}

/* Der cremefarbene Tint-Block wäre auf der Vollfläche ein Fleck – jetzt
   nur noch eine zarte Aufhellung, die den Abschnitt gruppiert. */
#kinderland .ks-tint{
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.16);
}

/* Jahresplan „Termine & Schließzeiten": ein gedrucktes Blatt, deshalb
   bewusst weiß mit Papier-Schatten statt Karten-Wash. Breite begrenzt,
   damit die A4-Seite auf dem Desktop nicht bildschirmhoch wird. */
.cal-sheet{ margin:24px auto 0; max-width:620px; text-align:center; }
.cal-sheet > a{ display:block; line-height:0; }
.cal-sheet img{
  width:100%; height:auto;
  background:#fff;
  border:6px solid var(--surface);
  border-radius:var(--radius-m);
  box-shadow:var(--shadow);
  rotate:-.6deg;
  transition:rotate .2s ease;
}
.cal-sheet > a:hover img, .cal-sheet > a:focus-visible img{ rotate:0deg; }
.cal-sheet figcaption{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  margin-top:22px;
}
/* Dunkelblau statt Weiß: auf dem hellblauen Kinderland-Grund (#84C5E2)
   hätte Weiß nur ~1,9:1 Kontrast. */
.cal-hint{ font-size:.88rem; font-weight:700; color:var(--brand-blue-deep); }
@media (prefers-reduced-motion:reduce){ .cal-sheet img{ transition:none; } }

/* ---------- Preisseite (#fw-preise) ----------
   Muster aus der Recherche: Preis groß OBEN in der Karte, darunter was
   drin ist, Anfrage-Button unten bündig (Endless Tools / Artboard
   Studio); Bedingungen, die für alle Optionen gelten, als eigener Block
   unter den Karten statt in jeder Karte (Stable Audio: Lizenzen getrennt
   von den Plänen). Farben = helle Akzente der Wegweiser-Kacheln, die auf
   dem Blauverlauf ≥ 4,6:1 erreichen – je Option eine eigene Farbe. */
.price-block{ margin-top:38px; }
.price-block + .price-block{ margin-top:56px; }
.price-block-head{ display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.price-block-head .ks-sticker{ flex:0 0 auto; }
.price-block-head h3{
  margin:0; font-family:var(--font-hero); font-weight:400;
  font-size:clamp(1.6rem, 3vw, 2.1rem); color:var(--brand-blue-deep);
}
.price-block-head p{ margin:4px 0 0; color:#5C4A08; font-weight:600; text-wrap:pretty; }

.price-tiers{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-3); align-items:stretch; }
.price-tier, .price-rate{
  background:linear-gradient(150deg, #143F9E 0%, var(--brand-blue) 48%, var(--brand-blue-deep) 100%);
  color:#fff;
  border-radius:var(--radius-l);
  box-shadow:var(--shadow);
}
.price-tier{
  display:flex; flex-direction:column; align-items:flex-start;
  border-top:6px solid var(--tier, var(--brand-yellow));
  padding:22px 24px 24px;
}
.tier-name{ margin:0; font-family:var(--font-display); font-weight:800; font-size:1.08rem; color:var(--tier, #fff); }
.tier-price{
  margin:6px 0 2px; font-family:var(--font-hero); font-size:2.7rem; line-height:1;
  color:var(--brand-yellow);
}
.tier-price small{ font-family:var(--font-display); font-size:1rem; font-weight:800; color:rgba(255,255,255,.8); }
.tier-price--text{ font-size:1.9rem; }
.tier-sub{ margin:6px 0 0; color:rgba(255,255,255,.86); font-size:.95rem; }
.tier-list{
  list-style:none; margin:16px 0 0; padding:14px 0 0; width:100%;
  border-top:1px solid rgba(255,255,255,.2);
  display:grid; gap:8px;
}
.tier-list li{ position:relative; padding-left:24px; color:rgba(255,255,255,.9); font-size:.95rem; }
.tier-list li::before{ content:"✓"; position:absolute; left:0; font-weight:900; color:var(--tier, #fff); }
/* Was die teurere Option ZUSÄTZLICH bringt, bekommt ein Plus statt Haken */
.tier-list li.is-plus{ color:#fff; font-weight:700; }
.tier-list li.is-plus::before{ content:"+"; font-size:1.15em; line-height:1; top:1px; }
/* Buttons aller Karten einer Reihe unten auf einer Linie */
.price-tier > :nth-last-child(2){ margin-bottom:20px; }
.price-tier > .ks-btn{ margin-top:auto; }

/* Bedingungen: eine Leiste, vier gleich breite Felder */
.price-terms{
  margin-top:20px; padding:18px 22px;
  background:var(--brand-blue-deep); color:#fff;
  border-radius:var(--radius-l);
}
.price-terms-title{ margin:0 0 12px; font-family:var(--font-display); font-weight:800; color:var(--brand-yellow); }
.price-terms dl{ margin:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; }
.price-terms dl > div{ background:rgba(255,255,255,.08); border-radius:14px; padding:10px 14px; }
.price-terms dt{ font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:rgba(255,255,255,.72); }
.price-terms dd{ margin:2px 0 0; font-family:var(--font-display); font-weight:800; font-size:1.15rem; color:#fff; }

.price-extras{ margin:16px 4px 0; color:var(--brand-blue-deep); font-size:.98rem; text-wrap:pretty; }

/* Gartenservice: Stundensatz als breite Leiste über den Paketen */
.price-rate{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 28px;
  border-left:8px solid var(--brand-yellow);
  padding:22px 26px;
}
.price-rate .tier-name{ color:#fff; }
.price-rate-free{
  margin:0; padding:10px 16px; border-radius:var(--radius-round);
  background:var(--brand-yellow); color:var(--brand-blue-deep); font-weight:700;
}
.price-rate-free strong{ color:var(--brand-blue-deep); }
.price-subtitle{
  margin:28px 0 12px; font-family:var(--font-display); font-weight:800;
  font-size:1.2rem; color:var(--brand-blue-deep);
}

@media (max-width:860px){
  .price-tiers{ grid-template-columns:1fr; }
  .price-terms dl{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:420px){
  .price-terms dl{ grid-template-columns:1fr; }
  .tier-price{ font-size:2.3rem; }
}

/* ---------- Welt-Seiten (Kinderland / Familienwelt) ---------- */
.world-hero{
  position:relative; overflow:hidden;
  border-radius:var(--radius-l);
  margin-top:26px;
  padding:64px 30px 70px;
  text-align:center; color:#fff;
}
.world-hero--blue{ background:radial-gradient(120% 100% at 50% -20%, var(--brand-blue-mid), var(--brand-blue) 45%, var(--brand-blue-deep)); }
.world-hero--amber{ background:radial-gradient(120% 100% at 50% -20%, #FFCE3D, var(--brand-amber) 55%, var(--brand-amber-deep)); }
.world-hero .ks-eyebrow{ background:rgba(255,255,255,.92); }
.world-hero--blue .ks-eyebrow{ color:var(--brand-blue-deep); }
.world-hero--amber .ks-eyebrow{ color:var(--brand-amber-deep); }
.world-hero h1{
  font-family:var(--font-hero); font-weight:400; color:#ffff00;
  font-size:clamp(2.4rem, 6vw, 4rem); line-height:1.05;
  margin:20px auto 0; max-width:20ch;
}
.world-hero .ks-motto{ margin-top:12px; }
.hero-care .ks-motto{ color:#ffff00; }
.world-hero .world-lede{ max-width:56ch; margin:16px auto 0; color:rgba(255,255,255,.92); font-size:1.06rem; }
.world-hero .ks-chips{ justify-content:center; margin-top:24px; }
.world-hero .hero-actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:28px; }
.world-hero .hero-stickers{ display:flex; justify-content:center; gap:16px; margin-bottom:8px; }
.world-hero .hero-stickers .ks-sticker{ animation:ks-float 5.5s ease-in-out infinite; }
.world-hero .hero-stickers .ks-sticker:nth-child(2){ animation-delay:.8s; }
.world-hero .hero-stickers .ks-sticker:nth-child(3){ animation-delay:1.6s; }

/* ---------- Betreuungs-Header (Kinderland) ----------
   Der Header beantwortet die Eltern-Fragen direkt: Für welches Alter,
   zu welchen Zeiten, wie lange, wann bringen, wie eingewöhnt, was zu
   essen. Dafür eine kompakte Faktenkachel-Reihe statt loser Chips. */
.hero-care .hero-free{ margin-top:26px; }
.care-facts{
  display:grid; gap:12px;
  grid-template-columns:repeat(3, 1fr);
  max-width:800px; margin:30px auto 0;
  text-align:left;
}
.care-fact{
  display:grid; grid-template-columns:auto 1fr; gap:2px 14px;
  align-items:center;
  background:#003399;
  border:1px solid rgba(255,255,255,.22);
  border-radius:var(--radius-m);
  padding:14px 16px;
}
.care-ico{ grid-row:1 / span 2; font-size:1.7rem; line-height:1; }
.care-fact b{
  font-family:var(--font-display); font-weight:800; font-size:1rem;
  color:var(--brand-yellow); line-height:1.25;
}
.care-fact small{
  font-size:.74rem; letter-spacing:.05em; text-transform:uppercase;
  color:rgba(255,255,255,.75);
}
@media (max-width:860px){ .care-facts{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:520px){ .care-facts{ grid-template-columns:1fr; } }

.hero-meta{
  margin-top:22px; font-size:.88rem;
  color:rgba(255,255,255,.75);
}

/* Räume-Split */
.split{ display:grid; grid-template-columns:1.1fr .9fr; gap:30px; align-items:start; }
@media (max-width:820px){ .split{ grid-template-columns:1fr; } }
.room-list{ display:grid; gap:12px; }

/* Inhaltsseiten (Die Kita / Konzept / Pädagogik): Text-Karten */
.prose-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-bottom:5px solid var(--world-wash);
  border-radius:var(--radius-l);
  box-shadow:var(--shadow);
  padding:clamp(24px, 4vw, 40px);
  max-width:860px;
  margin:0 auto 22px;
}
.prose-card h3{
  display:flex; align-items:center; gap:12px;
  font-size:1.35rem; margin-bottom:12px;
}
.prose-card h3 .ks-sticker--s{ flex:0 0 auto; }
.prose-card p{ color:var(--ink-soft); margin:10px 0; line-height:1.75; max-width:70ch; }
.prose-card ul{ color:var(--ink-soft); margin:10px 0; padding-left:24px; line-height:1.75; }
.prose-card strong{ color:var(--ink); }

/* Farbige Karten-Varianten + Füll-Elemente (Kita-Seite) */
.prose-card--yellow{ background:var(--wash-yellow); }
.prose-card--mint{ background:var(--wash-mint); }
.prose-card--pink{ background:var(--wash-pink); }
.prose-card .ks-chips{ margin-top:16px; }
.prose-card .ks-factbox{ margin-top:20px; }
.prose-card .ks-price{ margin-top:14px; }
.mini-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:18px; }
.mini-gallery img{ width:100%; height:150px; }
.mini-gallery img:nth-child(even){ rotate:1.5deg; }
@media (max-width:620px){ .mini-gallery{ grid-template-columns:1fr; } .mini-gallery img{ height:190px; } }

/* Menü-Dropdown (Überpunkt „Die Kita" – öffnet nur das Untermenü, kein Direktlink) */
.menu-drop{ position:relative; }
.menu-drop-btn{
  font-family:var(--font-display); font-weight:700; font-size:.9rem;
  color:var(--ink-soft); background:none; border:0; cursor:pointer;
  padding:9px 14px; border-radius:var(--radius-round);
  transition:background .15s, color .15s;
}
.menu-drop-btn:hover{ background:var(--world-wash); color:var(--world-deep); }
.menu-drop-panel{
  position:absolute; top:100%; left:0; z-index:60;
  min-width:180px; padding:8px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow-lift);
  display:none;
}
.menu-drop:hover .menu-drop-panel,
.menu-drop:focus-within .menu-drop-panel{ display:grid; }
.menu-drop-panel a{ display:block; }

/* Team mit Fotos */
.team-grid .ks-member p{ margin-top:2px; }
.member-quote{ font-size:.8rem; font-style:italic; color:var(--ink-faint); margin-top:8px; }

/* Aufklappbare Mitarbeiter-Texte (1:1 von der Original-Teamseite) */
.ks-member details{ margin-top:12px; }
.ks-member summary{
  cursor:pointer; list-style:none; text-align:center;
  font-family:var(--font-display); font-weight:700; font-size:.84rem;
  color:var(--world);
}
.ks-member summary::-webkit-details-marker{ display:none; }
.ks-member summary::after{ content:" ▾"; }
.ks-member details[open] summary::after{ content:" ▴"; }
.ks-member details p{
  text-align:left; font-size:.86rem; line-height:1.65;
  color:var(--ink-soft); margin-top:9px;
}

/* Galerie Außenbereich */
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:720px){ .gallery{ grid-template-columns:repeat(2,1fr); } }
.gallery img{ width:100%; height:210px; }
.gallery img:nth-child(even){ rotate:1.5deg; }
.gallery .pano{ grid-column:1 / -1; height:180px; }

/* Nummerierte Abschnitts-Titel (Familienwelt: Angebote 01–03) */
.title-row{ display:flex; gap:18px; align-items:center; margin:0 0 26px; }
.title-row > .num{
  flex:0 0 58px; width:58px; height:58px;
  display:grid; place-items:center;
  border-radius:18px; rotate:-4deg;
  background:var(--brand-yellow); color:var(--brand-blue-deep);
  font-family:var(--font-display); font-weight:800; font-size:1.3rem;
  box-shadow:0 4px 0 var(--brand-amber);
}
.title-row .ks-eyebrow{ background:none; padding:0; }

/* Zwischenüberschrift innerhalb eines Farbbands („Unsere Themenkisten“) */
.sub-head{
  margin:38px 0 6px;
  font-family:var(--font-hero); font-weight:400;
  font-size:clamp(1.4rem, 2.6vw, 1.9rem);
}
.page-band--yellow .sub-head{ color:var(--brand-blue-deep); }
.page-band--blue .sub-head{ color:#fff; }

/* Liste mit Häkchen statt Punkten (Boxeninhalt) */
.tick-list{ list-style:none; padding-left:0; }
.tick-list li{ padding-left:26px; position:relative; }
.tick-list li::before{
  content:"✨"; position:absolute; left:0; top:0;
  font-size:.9em;
}

/* Vollflächige Farbbänder auf Unterseiten – Übergänge per Wellen-Band */
.page-band{ padding:52px 0 60px; }
.page-band--blue{ background:var(--brand-blue); color:#fff; }
.page-band--blue .ks-section-head .ks-h2{ color:#fff; text-shadow:0 3px 0 rgba(0,32,94,.4); }
.page-band--blue .ks-lede{ color:rgba(255,255,255,.88); }
.page-band--blue .ks-eyebrow{ background:var(--brand-yellow); color:var(--brand-blue-deep); }
.page-band--yellow{ background:var(--brand-yellow); color:var(--brand-blue-deep); }
.page-band--yellow .ks-section-head .ks-h2{ color:var(--brand-blue-deep); text-shadow:0 3px 0 rgba(255,255,255,.4); }
.page-band--yellow .ks-lede{ color:#5C4A08; }
.page-band--yellow .ks-eyebrow{ background:#fff; color:var(--brand-amber-deep); }
.page-band .ks-section-head{ margin-bottom:26px; }
.page-band .ks-section{ padding:0; }

/* Auf dem gelben Band würden gelbe Elemente verschwinden – hier drehen
   wir sie auf Blau, damit sie sich weiterhin abheben. */
.page-band--yellow .title-row > .num{
  background:var(--brand-blue); color:#fff;
  box-shadow:0 4px 0 var(--brand-blue-deep);
}
.page-band--yellow .ks-squiggle{ color:rgba(184,116,0,.55); }
.page-band--yellow .cross-links .ks-kick{ color:var(--brand-blue-deep); }
.page-band--yellow .ks-lede{ margin-inline:auto; }
.page-band--yellow .title-row + .ks-lede{ margin-inline:0; }

/* Aktueller Menüpunkt (Familienwelt-Unterseiten) */
.ks-menu a.is-current{
  background:var(--world-wash); color:var(--world-deep);
  box-shadow:inset 0 -3px 0 var(--world);
}

/* Querverweise auf die Schwester-Seiten (ganz unten über dem Footer) */
.cross-links{ text-align:center; margin-top:30px; }
.cross-links .ks-kick{ display:block; margin-bottom:14px; color:var(--brand-yellow); }
.cross-links .ks-btn{ margin:6px; }

/* ---------- Familienwelt-Landing: Wegweiser-Kacheln ----------
   Die Landing trägt keine Inhalte mehr, sondern führt in die fünf
   Unterseiten. Zwei breite Kacheln oben (die beiden Angebote),
   drei schmalere darunter. */
.fw-tiles{
  display:grid; gap:var(--space-3);
  grid-template-columns:repeat(6, 1fr);
}
/* Reihe 1: drei gleich breite Kacheln (die Inhaltsseiten).
   Reihe 2: zwei gleich breite (Team, Kontakt).
   Über das 6-Spalten-Raster füllen BEIDE Reihen die volle Breite und
   schließen links wie rechts bündig ab. */
.fw-tile{
  grid-column:span 2;
  display:flex; flex-direction:column; align-items:flex-start;
  text-decoration:none;
  /* Blauverlauf wie auf der Betreuungsseite – deutlich weniger Weiß auf
     der gelben Fläche. Bewusst nicht bis ins Dunkelste: der hellste
     Punkt liegt bei 9,3:1 Kontrast zu weißer Schrift. */
  background:linear-gradient(150deg, #143F9E 0%, var(--brand-blue) 48%, var(--brand-blue-deep) 100%);
  color:#fff;
  border:0;
  border-bottom:5px solid var(--tile-glow, var(--brand-yellow));
  border-radius:var(--radius-l);
  padding:28px 26px 26px;
  box-shadow:var(--shadow);
  transition:transform .22s, box-shadow .22s;
}
.fw-tile--half{ grid-column:span 3; }
.fw-tile:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lift); }
/* Feste Höhe für zwei Zeilen: dadurch beginnen die Beschreibungstexte
   in allen Kacheln einer Reihe auf derselben Höhe, egal ob die
   Überschrift ein- oder zweizeilig ist. */
.fw-tile h3{ margin:12px 0 8px; font-size:1.28rem; color:#fff; min-height:2.3em; }
.fw-tile p{ color:rgba(255,255,255,.85); font-size:.98rem; }
/* Der Pfeil unten wird durch margin-top:auto auf eine Linie gezogen –
   zusammen mit der gleichen Kachelhöhe im Raster sitzt damit jedes
   Element auf gleicher Höhe. */
.fw-tile .ks-eyebrow{ background:var(--brand-yellow); color:var(--brand-blue-deep); }
.fw-tile .ks-sticker{ width:74px; height:74px; font-size:2.2rem; border-radius:24px; }
.fw-tile-go{
  margin-top:auto; padding-top:18px;
  font-family:var(--font-display); font-weight:800; font-size:.95rem;
  color:var(--tile-glow, var(--brand-yellow));
}
.fw-tile:hover .fw-tile-go{ text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:3px; }

/* Je Kachel ein heller Akzent für Unterkante und Pfeil. Bewusst helle
   Töne – auf dem Blau liegen alle zwischen 4,5:1 und 7,4:1. */
.fw-tile--pink  { --tile-glow:#FF9EC4; }
.fw-tile--mint  { --tile-glow:#63E0BE; }
.fw-tile--blue  { --tile-glow:#8FB6FF; }
.fw-tile--yellow{ --tile-glow:var(--brand-yellow); }
.fw-tile--amber { --tile-glow:#FFC14D; }

@media (max-width:960px){
  .fw-tiles{ grid-template-columns:repeat(2, 1fr); }
  .fw-tile, .fw-tile--half{ grid-column:span 1; }
}
@media (max-width:620px){
  .fw-tiles{ grid-template-columns:1fr; }
}

/* ---------- Familienwelt-Team als Farbkleckse ----------
   Statt gleichförmiger Kacheln bekommt jedes Teammitglied einen eigenen
   Farbklecks. Ein Klick öffnet ein Popup – ebenfalls ein Klecks – mit dem
   Originaltext der Person. Ein kleiner Sammel-Fortschritt oben macht aus
   dem Kennenlernen ein Spiel. */
.team-progress{ text-align:center; margin:0 0 30px; }
.team-progress-label{
  font-family:var(--font-display); font-weight:700; font-size:1rem;
  color:var(--brand-blue-deep);
}
.team-progress-label b{ font-size:1.3rem; color:var(--accent-pink); }
/* Balken statt Sternen – skaliert von 4 bis 16 Personen gleich gut */
.team-bar{
  width:min(320px, 80%); height:12px;
  margin:10px auto 0;
  border-radius:var(--radius-round);
  background:rgba(0,32,94,.14);
  overflow:hidden;
}
.team-bar-fill{
  display:block; width:0; height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg, var(--accent-pink), var(--brand-amber));
  transition:width .45s cubic-bezier(.34,1.4,.64,1);
}
.team-done{
  margin-top:14px;
  display:inline-block;
  font-family:var(--font-display); font-weight:800;
  background:var(--brand-blue); color:#fff;
  padding:11px 22px; border-radius:var(--radius-round);
  animation:splat-pop .5s cubic-bezier(.34,1.56,.64,1) both;
}
.team-done[hidden]{ display:none; }

.blob-team{
  display:grid; gap:var(--space-3);
  grid-template-columns:repeat(4, 1fr);
}
@media (max-width:960px){ .blob-team{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:520px){ .blob-team{ grid-template-columns:1fr; } }

.blob-card{
  position:relative;
  display:grid; justify-items:center; gap:4px;
  width:100%; padding:26px 18px 22px;
  border:0; cursor:pointer; font:inherit; text-align:center;
  background:var(--surface);
  border-radius:var(--radius-l);
  box-shadow:var(--shadow);
  transition:transform .22s, box-shadow .22s;
}
.blob-card:hover{ transform:translateY(-6px) rotate(-1deg); box-shadow:var(--shadow-lift); }
.blob-card:active{ transform:translateY(-1px) rotate(0deg); }

/* Der Klecks selbst: eine organische Form statt eines Kreises.
   Er atmet leicht, damit die Seite lebendig wirkt. */
.blob-shape{
  display:grid; place-items:center; overflow:hidden;
  width:118px; height:118px;
  background:var(--m-color);
  border-radius:58% 42% 47% 53% / 45% 40% 60% 55%;
  animation:blob-morph 9s ease-in-out infinite;
  box-shadow:0 10px 26px -12px var(--m-color);
}
.blob-shape img{ width:100%; height:100%; object-fit:cover; }
.blob-shape--letter{
  font-family:var(--font-hero); font-size:3rem; color:#fff;
}
@keyframes blob-morph{
  0%, 100%{ border-radius:58% 42% 47% 53% / 45% 40% 60% 55%; }
  33%     { border-radius:44% 56% 62% 38% / 55% 48% 52% 45%; }
  66%     { border-radius:52% 48% 38% 62% / 40% 58% 42% 60%; }
}
/* Versetzt starten, damit die Kleckse nicht im Gleichschritt atmen */
.blob-member:nth-child(4n+2) .blob-shape{ animation-delay:-2.2s; }
.blob-member:nth-child(4n+3) .blob-shape{ animation-delay:-4.5s; }
.blob-member:nth-child(4n+4) .blob-shape{ animation-delay:-6.8s; }

/* Kinderland-Team: 16 Personen in 3 Spalten */
.blob-team--3{ grid-template-columns:repeat(3, 1fr); }
@media (max-width:960px){ .blob-team--3{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:520px){ .blob-team--3{ grid-template-columns:1fr; } }

/* Fortschritt auf dem blauen Band (Kinderland-Teamseite) */
.page-band--blue .team-progress-label{ color:#fff; }
.page-band--blue .team-progress-label b{ color:var(--brand-yellow); }
.page-band--blue .team-bar{ background:rgba(255,255,255,.22); }
.page-band--blue .team-done{ background:var(--brand-yellow); color:var(--brand-blue-deep); }

.blob-name{
  margin-top:14px;
  font-family:var(--font-display); font-weight:800; font-size:1.15rem;
  color:var(--ink);
}
.blob-role{ font-size:.86rem; color:var(--ink-soft); }
.blob-go{
  margin-top:10px;
  font-family:var(--font-display); font-weight:800; font-size:.86rem;
  color:var(--m-color);
}
.blob-card:hover .blob-go{ text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:3px; }

/* Sammel-Stempel: erscheint, sobald der Klecks einmal geöffnet war */
.blob-stamp{
  position:absolute; top:14px; right:14px;
  display:grid; place-items:center;
  width:34px; height:34px; border-radius:50%;
  background:var(--brand-yellow);
  font-size:1rem; rotate:-12deg;
  opacity:0; transform:scale(.4);
  transition:opacity .3s, transform .3s cubic-bezier(.34,1.56,.64,1);
}
.blob-member.is-found .blob-stamp{ opacity:1; transform:scale(1); }
/* Ring statt Rahmen – so verschiebt sich beim Einsammeln nichts */
.blob-member.is-found .blob-card{ box-shadow:0 0 0 3px var(--m-color), var(--shadow); }
.blob-member.is-found .blob-card:hover{ box-shadow:0 0 0 3px var(--m-color), var(--shadow-lift); }

/* Farbwelt je Mitglied.
   --m-color = die helle Klecksfarbe auf den Karten.
   --m-deep  = die dunkle Variante für das Popup, in dem WEISSE SCHRIFT
   steht. Die hellen Töne reichen dafür nicht: Weiß auf Amber #E39400
   käme nur auf rund 2,3:1 Kontrast, auf Mint auf 3,4:1 – beides
   unlesbar. Die dunklen Varianten liegen alle über 7:1. */
.blob--pink { --m-color:var(--accent-pink);     --m-deep:#8C2B50; }
.blob--mint { --m-color:var(--accent-mint);     --m-deep:#14614D; }
.blob--blue { --m-color:var(--brand-blue-mid);  --m-deep:var(--brand-blue-deep); }
.blob--amber{ --m-color:var(--brand-amber);     --m-deep:#7A4E00; }

/* ---------- Popup („Farbklecks") ---------- */
.splat-modal{
  position:fixed; inset:0; z-index:100;
  display:grid; place-items:center;
  /* Klecks und Spritzer ragen über den Dialog hinaus – Luft lassen und
     überstehendes abschneiden, damit nie eine Bildlaufleiste entsteht. */
  padding:38px 30px;
  overflow:hidden;
}
.splat-modal[hidden]{ display:none; }
.splat-backdrop{
  position:absolute; inset:0;
  background:rgba(0,32,94,.55);
  backdrop-filter:blur(3px);
  animation:fade-in .25s ease both;
}
.splat-dialog{
  position:relative; z-index:1;
  width:min(620px, 100%);
  animation:splat-pop .42s cubic-bezier(.34,1.56,.64,1) both;
  /* drop-shadow folgt der tatsächlich gemalten Klecksform –
     ein box-shadow würde ein Rechteck werfen. */
  filter:drop-shadow(0 22px 38px rgba(0,32,94,.45));
}
/* Der Klecks besteht aus ZWEI überlappenden, unterschiedlich gedrehten
   Blobs. Ein einzelner wirkt schnell wie ein Ei – erst die Überlagerung
   ergibt eine unregelmäßige Kleckssilhouette. */
.splat-dialog::before,
.splat-dialog::after{
  content:""; position:absolute;
  background:var(--m-deep, var(--brand-amber-deep));
}
/* Der TRAGENDE Klecks – muss den Text vollständig umschließen. Deshalb
   moderate Pixelradien statt Prozent: Prozentradien schneiden bei einem
   hohen Popup riesige Ellipsen aus den Ecken, in die der Text hineinliefe. */
.splat-dialog::before{
  inset:-24px -20px;
  border-radius:132px 96px 148px 108px / 104px 140px 92px 132px;
  rotate:-2deg;
}
/* Rein dekorativ, sitzt versetzt nach außen und bricht die Ei-Form auf.
   Ragt nur heraus – schneidet nirgends in den Textbereich hinein. */
.splat-dialog::after{
  inset:14px -50px -44px -26px;
  border-radius:46% 54% 58% 42% / 55% 44% 56% 45%;
  rotate:7deg;
}
/* Spritzer rundherum */
.splat-dot{
  position:absolute; z-index:1;
  border-radius:50%;
  background:var(--m-deep, var(--brand-amber-deep));
}
.splat-dot--1{ width:34px; height:34px; top:-58px; left:16%; }
.splat-dot--2{ width:19px; height:19px; top:-40px; left:27%; }
.splat-dot--3{ width:46px; height:46px; bottom:-66px; right:16%; rotate:8deg; border-radius:52% 48% 44% 56%; }
.splat-dot--4{ width:24px; height:24px; bottom:-46px; right:31%; }
.splat-dot--5{ width:15px; height:15px; top:32%; right:-52px; }

/* Keine weiße Karte mehr – der Text steht direkt IM Klecks. Der
   großzügige Innenabstand ist zugleich der farbige Rand, der den Text
   sicher von den Rundungen fernhält. */
.splat-card{
  position:relative; z-index:2;
  display:flex; flex-direction:column;
  max-height:82svh;
  padding:clamp(38px, 5.5vw, 62px);
  color:#fff;
}
.splat-close{
  position:absolute; z-index:3; top:-14px; right:-16px;
  width:46px; height:46px; border:0; border-radius:50%;
  cursor:pointer; font-size:1.6rem; line-height:1;
  background:#fff; color:var(--m-deep, var(--brand-amber-deep));
  box-shadow:0 4px 0 rgba(27,42,87,.22);
}
.splat-close:active{ transform:translateY(3px); box-shadow:0 1px 0 rgba(27,42,87,.22); }
.splat-head{ display:flex; align-items:center; gap:20px; flex:0 0 auto; }
.splat-photo{
  flex:0 0 auto;
  display:grid; place-items:center; overflow:hidden;
  width:92px; height:92px;
  background:var(--m-color, var(--brand-amber));
  border-radius:58% 42% 47% 53% / 45% 40% 60% 55%;
  font-family:var(--font-hero); font-size:2.4rem; color:#fff;
}
.splat-photo img{ width:100%; height:100%; object-fit:cover; }
/* Das Foto behält die HELLE Klecksfarbe – so hebt es sich vom dunklen
   Popup-Grund ab (wichtig für Steffi, die statt Foto ein „S" trägt). */
.splat-photo{ box-shadow:0 0 0 4px rgba(255,255,255,.22); }
.splat-head .ks-eyebrow{ background:rgba(255,255,255,.2); color:#fff; }
.splat-head h3{ margin-top:8px; color:#fff; }
/* Nur der Text scrollt, nicht die ganze Karte – so bleibt der Scrollbalken
   im gepolsterten Innenbereich und läuft nicht in die Rundung. */
.splat-text{
  margin-top:20px;
  min-height:0; overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.45) transparent;
}
.splat-text p{ color:rgba(255,255,255,.93); line-height:1.75; margin-bottom:12px; }
.splat-text p:last-child{ margin-bottom:0; }
.splat-text strong{ color:#fff; }

@keyframes fade-in{ from{ opacity:0; } to{ opacity:1; } }
@keyframes splat-pop{
  from{ opacity:0; transform:scale(.75) rotate(-3deg); }
  to  { opacity:1; transform:none; }
}
@media (max-width:560px){
  .splat-head{ flex-direction:column; text-align:center; }
  .splat-card{ padding:34px 30px; max-height:74svh; }
  /* Schmalere Kleckse brauchen kleinere Rundungen, sonst schneiden sie
     zu viel weg und der Text käme der Kante zu nah. */
  .splat-dialog::before{ inset:-18px -12px; border-radius:76px 54px 84px 62px / 60px 80px 52px 74px; }
  .splat-dialog::after{ inset:10px -24px -26px -14px; }
  .splat-dot--1{ top:-40px; } .splat-dot--2{ top:-28px; }
  .splat-dot--3{ bottom:-44px; } .splat-dot--4{ bottom:-32px; }
  .splat-dot--5{ display:none; }
}

/* Wer weniger Bewegung möchte, bekommt die ruhige Variante */
@media (prefers-reduced-motion: reduce){
  .blob-shape{ animation:none; }
  .splat-dialog, .team-done{ animation:none; }
}

/* ---------- Anfrageformular der Familienwelt ---------- */
.fw-contact-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:28px; align-items:start; }
@media (max-width:960px){ .fw-contact-grid{ grid-template-columns:1fr; } }

.ks-form{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-l);
  box-shadow:var(--shadow-lift);
  padding:clamp(22px, 3.4vw, 34px);
}
.form-field{ display:grid; gap:7px; margin-bottom:18px; }
.form-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-done{
  align-self:start; text-align:center; padding:36px 28px;
  border-radius:var(--radius-l); background:var(--surface); color:var(--ink);
  box-shadow:var(--shadow-lift);
}
.form-done .ks-sticker{ margin:0 auto 14px; }
.form-done h3{ margin-bottom:8px; }
.form-done:focus{ outline:none; }
.ks-btn[aria-busy="true"]{ opacity:.7; pointer-events:none; }
.form-two{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:560px){ .form-two{ grid-template-columns:1fr; } }
.ks-form label{
  font-family:var(--font-display); font-weight:700; font-size:.9rem;
  color:var(--ink);
}
.ks-form .req{ color:var(--accent-pink); }
.ks-form .opt{ color:var(--ink-faint); font-weight:600; font-size:.78rem; }
.ks-form input,
.ks-form select,
.ks-form textarea{
  width:100%;
  font-family:var(--font-body); font-size:1rem; color:var(--ink);
  background:var(--wash-yellow);
  border:2px solid transparent;
  border-radius:var(--radius-s);
  padding:13px 15px;
  transition:border-color .15s, background .15s;
}
.ks-form textarea{ resize:vertical; min-height:120px; line-height:1.6; }
.ks-form input:focus,
.ks-form select:focus,
.ks-form textarea:focus{
  outline:none;
  background:var(--surface);
  border-color:var(--world);
}
/* Das Anliegen ist das Herzstück des Formulars – etwas größer und
   mit eigenem Pfeil, damit man sofort sieht, dass man wählen kann. */
.ks-form select{
  appearance:none;
  font-family:var(--font-display); font-weight:700; font-size:1.05rem;
  padding-right:44px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B87400' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:20px 20px;
}
.ks-form optgroup{ font-family:var(--font-display); font-weight:800; color:var(--ink-faint); }
.ks-form option{ font-weight:600; color:var(--ink); }

.form-check{ display:flex; gap:12px; align-items:flex-start; margin:4px 0 20px; }

/* ---------- Wunschtermin: Auslöser + Kalender-Pop-up ----------
   Der Auslöser sieht aus wie die übrigen Felder. Das Pop-up ist bewusst
   weiß mit dunkler Schrift und großen Tagesfeldern (≥ 44 px), damit die
   Zahlen auch am Handy gut lesbar und treffbar sind. Kopf in Markenblau,
   Auswahl in Markengelb – dieselbe Paarung wie auf der ganzen Seite.
   Nebentexte #5B6588 statt --ink-faint (3,2:1 wäre zu blass). */
.date-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-family:var(--font-body); font-size:1rem; font-weight:600; color:#5B6588;
  background:#fff; border:2px solid transparent; border-radius:var(--radius-s);
  padding:12px 15px; cursor:pointer; text-align:left;
  transition:border-color .15s;
}
.date-trigger.has-value{ color:var(--ink); font-weight:700; }
.date-trigger:hover, .date-trigger:focus-visible{ border-color:var(--brand-yellow); outline:none; }
.date-trigger-icon{ font-size:1.25rem; line-height:1; }

.date-picker{
  width:min(420px, calc(100vw - 32px));
  padding:0; border:0; border-radius:var(--radius-l);
  background:#fff; color:var(--ink);
  box-shadow:var(--shadow-lift);
  overflow:hidden;
}
.date-picker::backdrop{ background:rgba(0,32,94,.55); backdrop-filter:blur(3px); }
.date-picker[open]{ animation:dp-pop .22s ease-out; }
@keyframes dp-pop{ from{ opacity:0; transform:translateY(12px) scale(.97); } }

.dp-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:linear-gradient(150deg, #143F9E 0%, var(--brand-blue) 48%, var(--brand-blue-deep) 100%);
  padding:18px 16px;
}
.dp-title{ margin:0; font-family:var(--font-hero); font-size:1.7rem; color:#fff; text-align:center; flex:1; }
.dp-nav{
  width:46px; height:46px; flex:0 0 auto;
  border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.16); color:#fff;
  font-size:1.9rem; line-height:1; font-weight:700;
}
.dp-nav:hover:not(:disabled), .dp-nav:focus-visible{ background:var(--brand-yellow); color:var(--brand-blue-deep); outline:none; }
.dp-nav:disabled{ opacity:.3; cursor:default; }

.dp-body{ padding:16px 16px 8px; }
.dp-week, .dp-grid{ display:grid; grid-template-columns:repeat(7, 1fr); gap:4px; }
.dp-week span{
  text-align:center; font-family:var(--font-display); font-weight:800;
  font-size:.85rem; color:#5B6588; padding:4px 0 8px;
}
.dp-week .is-we{ color:var(--accent-pink); }
.dp-day{
  aspect-ratio:1; min-height:44px;
  border:0; border-radius:14px; cursor:pointer;
  background:transparent; color:var(--ink);
  font-family:var(--font-display); font-weight:800; font-size:1.15rem;
}
.dp-day:hover:not(:disabled){ background:var(--wash-blue); }
.dp-day:focus-visible{ outline:3px solid var(--brand-blue); outline-offset:1px; }
.dp-day.is-we{ color:var(--accent-pink); }
.dp-day.is-today{ box-shadow:inset 0 0 0 2px var(--brand-blue); }
.dp-day.is-selected{ background:var(--brand-yellow); color:var(--brand-blue-deep); box-shadow:0 4px 0 #E39400; }
.dp-day:disabled{ color:#B9C1D6; cursor:default; }
.dp-day.is-empty{ visibility:hidden; }
.dp-hint{ margin:12px 2px 0; font-size:.85rem; color:#5B6588; text-align:center; }

.dp-foot{ display:flex; justify-content:space-between; gap:10px; padding:12px 16px 18px; }
.dp-foot .ks-btn--white{ box-shadow:0 4px 0 rgba(27,42,87,.18); border:2px solid var(--border); }

@media (prefers-reduced-motion:reduce){ .date-picker[open]{ animation:none; } }
.form-check input{ width:22px; height:22px; flex:0 0 auto; margin-top:2px; accent-color:var(--world); padding:0; }
.form-check label{ font-family:var(--font-body); font-weight:400; font-size:.88rem; color:var(--ink-soft); line-height:1.6; }
.form-check a{ color:var(--world-deep); font-weight:700; }

.form-error{
  background:var(--wash-pink); color:#8C2B50;
  border-radius:var(--radius-s);
  padding:13px 16px; margin-bottom:18px;
  font-size:.92rem; font-weight:700;
}
.form-error[hidden]{ display:none; }
.form-hint{ margin-top:14px; font-style:normal; }

.fw-contact-side .contact-card{ border:1px solid var(--border); }
.page-band--yellow .request-banner{ background:var(--surface); box-shadow:var(--shadow); }
.page-band--yellow .ks-note{ color:#8A6D10; }

/* Kontaktseite: Google Maps */
.map-card{
  border-radius:var(--radius-l);
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  height:380px;
  background:var(--wash-blue);
}
.map-card iframe{ width:100%; height:100%; border:0; display:block; }

/* ---------- Häufige Fragen (Aufklapper) ----------
   Blaue Zeilen wie die übrigen Karten auf Gelb; Frage fett, Plus/Minus in
   Gelb. Natives <details>: funktioniert ohne Skript und per Tastatur. */
.faq{ margin-top:38px; }
.faq-list{ display:grid; gap:12px; margin-top:16px; max-width:900px; }
.faq-item{
  background:linear-gradient(150deg, #143F9E 0%, var(--brand-blue) 48%, var(--brand-blue-deep) 100%);
  color:#fff; border-radius:18px; box-shadow:var(--shadow);
}
.faq-item summary{
  list-style:none; cursor:pointer; position:relative;
  padding:17px 60px 17px 22px;
  font-family:var(--font-display); font-weight:800; font-size:1.06rem; line-height:1.35;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; position:absolute; right:16px; top:50%; translate:0 -50%;
  width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  background:var(--brand-yellow); color:var(--brand-blue-deep); font-size:1.3rem; font-weight:900;
}
.faq-item[open] summary::after{ content:"–"; }
.faq-item summary:focus-visible{ outline:3px solid var(--brand-yellow); outline-offset:3px; border-radius:18px; }
.faq-a{ padding:0 22px 18px; }
.faq-a p{ margin:0 0 10px; color:rgba(255,255,255,.9); line-height:1.65; }
.faq-a p:last-child{ margin-bottom:0; }
.faq-a a{ color:var(--brand-yellow); font-weight:700; }

/* Karten-Platzhalter bis zum Klick (Kontaktseite) */
.map-consent{ display:grid; place-items:center; text-align:center; padding:24px; }
.map-consent-inner{ max-width:440px; display:grid; justify-items:center; gap:10px; }
.map-consent-title{ margin:0; font-family:var(--font-display); font-weight:800; font-size:1.15rem; color:var(--brand-blue-deep); }
.map-consent-note{ margin:0 0 6px; font-size:.92rem; color:var(--ink-soft); }
.map-consent-note a{ color:var(--brand-blue); font-weight:700; }

.map-actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:20px; }
.opening-hours h4{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-faint); margin:14px 0 2px;
  font-family:var(--font-display);
}

/* Kontakt-Panels */
.contact-panel{
  border-radius:var(--radius-l);
  padding:56px 32px;
  color:#fff;
  background:radial-gradient(120% 120% at 50% -20%, var(--world-mid), var(--world) 50%, var(--world-deep));
}
.contact-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:44px; align-items:center; }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-panel h2{ color:#fff; margin:16px 0 10px; }
.contact-panel .contact-intro p{ color:rgba(255,255,255,.9); max-width:44ch; }
.contact-card{
  background:var(--surface); color:var(--ink);
  border-radius:var(--radius-l);
  padding:28px;
  box-shadow:var(--shadow-lift);
}
.contact-card p{ padding:10px 0; border-bottom:2px dashed var(--border); line-height:1.5; }
.contact-card p:last-of-type{ border-bottom:0; }
.contact-card strong{
  display:block;
  font-family:var(--font-display); font-weight:700; font-size:.68rem;
  text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint);
}
.contact-card a{ color:var(--ink); text-decoration:none; font-weight:700; }
.contact-card .ks-btn{ margin-top:20px; }

/* Anfrage-Banner (Spielkisten, Gartenservice) */
.request-banner{
  margin-top:26px;
  display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between;
  background:var(--world-wash);
  border-radius:var(--radius-l);
  padding:28px 30px;
}
.request-banner h3{ margin:4px 0 4px; }
.request-banner .actions{ display:flex; flex-wrap:wrap; gap:12px; }

/* Boxen-Galerie als Pop-up (Referenz: Care.com-Lightbox 5b5ad04d-…:
   Kopf mit Titel, großes Bild, Pfeile, Thumbnail-Leiste darunter) */
.box-card{ position:relative; display:flex; flex-direction:column; }
.box-card .box-open{ margin-top:auto; align-self:flex-start; }
.box-card p{ margin-bottom:16px; }
/* ganze Karte klickbar (per JS), der Button bleibt das eigentliche Bedienelement */
.box-card, .box-row{ cursor:pointer; transition:transform .15s; }
.box-card:hover, .box-row:hover{ transform:translateY(-3px); }
.box-row{ cursor:pointer; align-items:center; }
.box-row .box-open{ flex:0 0 auto; }
@media (max-width:420px){ .box-row{ flex-wrap:wrap; } .box-row .box-open{ margin-left:auto; } }
:is(.box-card,.box-row):has(.box-open:focus-visible){ outline:3px solid var(--brand-yellow); outline-offset:3px; }

.box-gallery{
  width:min(760px, calc(100vw - 32px));
  max-height:calc(100dvh - 32px);
  padding:0; border:0; border-radius:var(--radius-l);
  background:#fff; color:var(--ink);
  box-shadow:var(--shadow-lift);
  overflow:auto;
}
.box-gallery::backdrop{ background:rgba(0,32,94,.6); backdrop-filter:blur(3px); }
.box-gallery[open]{ animation:dp-pop .22s ease-out; }
.bg-head{
  display:flex; align-items:center; gap:14px;
  background:linear-gradient(150deg, #143F9E 0%, var(--brand-blue) 48%, var(--brand-blue-deep) 100%);
  padding:16px 16px 16px 20px;
}
.bg-emoji{ font-size:2rem; line-height:1; }
.bg-title{ margin:0; flex:1; font-family:var(--font-hero); font-size:clamp(1.3rem, 3.5vw, 1.8rem); color:#fff; }
.bg-count{ font-family:var(--font-display); font-weight:800; font-size:.9rem; color:rgba(255,255,255,.8); white-space:nowrap; }
.bg-close{
  width:44px; height:44px; flex:0 0 auto;
  border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.16); color:#fff; font-size:1.8rem; line-height:1; font-weight:700;
}
.bg-close:hover, .bg-close:focus-visible{ background:var(--brand-yellow); color:var(--brand-blue-deep); outline:none; }
.bg-stage{ position:relative; margin:16px 16px 0; }
.bg-frame{
  aspect-ratio:4/3; max-height:calc(100dvh - 230px); width:100%;
  border-radius:var(--radius-m); overflow:hidden;
  background:var(--wash-yellow, #FFF6CC);
}
.bg-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.bg-ph{
  width:100%; height:100%; display:grid; place-content:center; justify-items:center; gap:10px;
  border:3px dashed #E8C95A; border-radius:inherit; text-align:center; color:#6B5A1E;
  font-family:var(--font-display); font-weight:800;
}
.bg-ph span{ font-size:clamp(3.5rem, 12vw, 6rem); line-height:1; }
.bg-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border:0; border-radius:50%; cursor:pointer;
  background:#fff; color:var(--brand-blue-deep); font-size:1.9rem; line-height:1; font-weight:700;
  box-shadow:0 4px 0 rgba(27,42,87,.18);
}
.bg-arrow--prev{ left:10px; } .bg-arrow--next{ right:10px; }
.bg-arrow:hover, .bg-arrow:focus-visible{ background:var(--brand-yellow); outline:none; }
.bg-thumbs{ display:flex; gap:8px; overflow-x:auto; padding:12px 16px 18px; margin:0; list-style:none; }
.bg-thumb{
  flex:0 0 auto; width:84px; aspect-ratio:4/3; padding:0; cursor:pointer;
  border:3px solid transparent; border-radius:12px; overflow:hidden;
  background:var(--wash-yellow, #FFF6CC); font-size:1.5rem;
  display:grid; place-items:center; color:#6B5A1E; font-family:var(--font-display); font-weight:800;
}
.bg-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.bg-thumb[aria-current="true"]{ border-color:var(--brand-blue); }
.bg-thumb:focus-visible{ outline:3px solid var(--brand-yellow); outline-offset:2px; }
@media (max-width:620px){
  .bg-arrow{ width:40px; height:40px; font-size:1.6rem; }
  .bg-thumb{ width:68px; }
}
@media (prefers-reduced-motion:reduce){ .box-gallery[open]{ animation:none; } .box-card:hover, .box-row:hover{ transform:none; } }

/* Boxen-Karten sind komplett klickbar */
.box-toggle{
  display:block; width:100%; height:100%;
  padding:0; border:0; background:none; color:inherit;
  text-align:left; font:inherit; cursor:pointer;
}
.ks-card:has(.box-toggle[aria-expanded="true"]){
  border-color:var(--world);
  border-bottom-color:var(--world);
}

/* ---------- Footer inkl. Impressum & Datenschutz ---------- */
.site-footer{
  background:var(--brand-blue-deep); color:#DBE4FF;
  padding:44px 0 30px;
}
.footer-top{
  display:flex; flex-wrap:wrap; gap:28px;
  align-items:center; justify-content:space-between;
  padding-bottom:24px;
}
.footer-top img{ height:56px; width:auto; }
.footer-top p{ font-size:.92rem; }
.footer-contact{ font-size:.9rem; line-height:1.8; }
.footer-contact a{ color:#fff; text-decoration:none; font-weight:700; }

.legal-links{
  border-top:1px solid rgba(255,255,255,.18);
  padding-top:22px;
  display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:center;
}
.legal-links a{
  color:#FFE565; text-decoration:none;
  font-family:var(--font-display); font-weight:700; font-size:.92rem;
}
.legal-links a:hover{ text-decoration:underline; text-underline-offset:4px; }
.footer-copy{ margin-top:20px; font-size:.82rem; color:#8FA3D8; text-align:center; }

/* Home-Button in der Navi */
.hub-back{
  flex:0 0 auto;
  display:inline-grid; place-items:center;
  height:44px; padding:0 18px;
  border:0; cursor:pointer;
  border-radius:15px;
  font-family:var(--font-display); font-weight:800; font-size:.92rem;
  color:var(--world-deep);
  background:var(--world-wash);
  box-shadow:0 4px 0 var(--border);
  transition:transform .15s, box-shadow .15s;
}
.hub-back:hover{ transform:translateY(-2px); }
.hub-back:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--border); }

.ks-nav .ks-logo-pill{ border-radius:12px; padding:5px 10px; }
.ks-nav .ks-logo{ height:32px; }

/* Burger-Menü (mobil): zeigt alle Menüpunkte wie auf dem Desktop */
.burger{
  display:none;
  flex:0 0 auto;
  width:44px; height:44px;
  border:0; cursor:pointer;
  border-radius:15px; font-size:1.35rem; line-height:1;
  background:var(--world); color:#fff;
  box-shadow:0 4px 0 var(--world-deep);
}
.burger:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--world-deep); }

@media (max-width:960px){
  .ks-nav{ position:sticky; }
  .ks-nav-inner{ position:relative; }
  .burger{ display:inline-grid; place-items:center; }
  .ks-menu{ display:none; }
  .ks-nav-inner.menu-open .ks-menu{
    display:grid; gap:2px;
    position:absolute; top:70px; left:0; right:0; z-index:80;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:20px;
    box-shadow:var(--shadow-lift);
    padding:14px;
  }
  .ks-nav-inner.menu-open .ks-menu a{ padding:13px 16px; font-size:1rem; }
  /* Untermenüs im Burger dauerhaft ausgeklappt, eingerückt */
  .ks-nav-inner.menu-open .menu-drop-panel{
    display:grid; position:static;
    box-shadow:none; border:0; padding:0 0 0 18px; min-width:0;
  }
  .ks-nav-inner.menu-open .menu-drop-btn{ width:100%; text-align:left; font-size:1rem; padding:13px 16px; cursor:default; }
}
@media (max-width:620px){
  .ks-nav .ks-btn--small{ display:none; } /* Kontakt steckt im Burger-Menü */
}

/* ==========================================================================
   KEINE REINWEISSEN BOXEN
   --------------------------------------------------------------------------
   Zwei Regeln, je nach Untergrund:

   · Auf den GELBEN Familienwelt-Seiten werden Karten BLAU (derselbe Verlauf
     wie die Wegweiser-Kacheln). Weiß auf #FCD200 hat kaum Kontrast und wirkt
     ausgewaschen – Blau auf Gelb dagegen trägt die Marke.

   · Auf den BLAUEN Kinderland-Seiten bleiben Karten hell, bekommen aber statt
     Reinweiß einen der vier Pastell-Washes. Sie sind so hell, dass der dunkle
     Fließtext bei rund 12:1 Kontrast bleibt – nur eben nicht mehr steril weiß.

   Bewusst WEISS bleiben (dort passt es besser):
     · die Navigationsleiste – sie muss sich als Bedienelement absetzen
     · die Sticker (weiße Kacheln mit Emoji) – sie sind der Akzent und
       funktionieren nur, wenn sie sich von der Karte darunter abheben
     · Fotorahmen und Avatar-Ringe – die weiße Kante ist Teil der Bildsprache
     · Eingabefelder im Formular – Formularfelder müssen als solche lesbar sein
     · weiße Buttons – sie sind der Hauptruf auf farbigem Grund
     · die Kartenansicht (Google-Maps-iframe bringt eigenen Hintergrund mit)
   ========================================================================== */

/* ---------- GELBE SEITEN: blaue Karten ---------- */
.view[data-world="familienwelt"] :is(.ks-card, .ks-factbox, .ks-details, .contact-card, .ks-form, .blob-card),
.page-band--yellow .request-banner,
.land-col--yellow :is(.ks-room, .ks-factbox){
  background:linear-gradient(150deg, #143F9E 0%, var(--brand-blue) 48%, var(--brand-blue-deep) 100%);
  color:#fff;
  border-color:transparent;
}
.view[data-world="familienwelt"] :is(.ks-card, .ks-factbox, .ks-details, .contact-card, .ks-form),
.page-band--yellow .request-banner,
.land-col--yellow :is(.ks-room, .ks-factbox){
  --karten-text:rgba(255,255,255,.86);
}
.view[data-world="familienwelt"] :is(.ks-card,.ks-factbox,.ks-details,.contact-card,.ks-form) :is(h3,h4),
.page-band--yellow .request-banner h3,
.land-col--yellow :is(.ks-room,.ks-factbox) :is(h3,h4){ color:#fff; }

.view[data-world="familienwelt"] :is(.ks-card,.ks-factbox,.ks-details,.contact-card) :is(p,ul,li),
.land-col--yellow :is(.ks-room,.ks-factbox) :is(p,ul,li){ color:var(--karten-text); }

.view[data-world="familienwelt"] :is(.ks-card,.ks-factbox,.contact-card) strong,
.land-col--yellow :is(.ks-room,.ks-factbox) strong{ color:#fff; }

.view[data-world="familienwelt"] .ks-factrow,
.land-col--yellow .ks-factbox .ks-factrow{
  color:var(--karten-text);
  border-bottom-color:rgba(255,255,255,.22);
}
.view[data-world="familienwelt"] :is(.ks-card,.ks-factbox,.ks-details,.contact-card) .ks-note,
.page-band--yellow .request-banner .ks-note,
.land-col--yellow .ks-factbox .ks-note{ color:rgba(255,255,255,.7); }

.view[data-world="familienwelt"] .ks-price,
.land-col--yellow .ks-room .ks-price{ color:var(--brand-yellow); }
.view[data-world="familienwelt"] :is(.ks-card,.ks-details) .ks-link{ color:var(--brand-yellow); }
.view[data-world="familienwelt"] :is(.ks-card,.ks-details,.ks-form) .ks-eyebrow,
.page-band--yellow .request-banner .ks-eyebrow{ background:var(--brand-yellow); color:var(--brand-blue-deep); }

/* Der blaue Raum-Punkt (.ks-dot--blue) würde auf der blauen Karte
   verschwinden – ein heller Ring hebt alle Punkte wieder ab. */
.land-col--yellow .ks-room .ks-dot,
.view[data-world="familienwelt"] .ks-card .ks-dot{
  box-shadow:0 0 0 3px rgba(255,255,255,.3);
}

/* Kontaktkarte: gestrichelte Trenner und Label-Zeilen aufhellen */
.view[data-world="familienwelt"] .contact-card p{ border-bottom-color:rgba(255,255,255,.22); }
.view[data-world="familienwelt"] .contact-card strong{ color:rgba(255,255,255,.6); }
.view[data-world="familienwelt"] .contact-card a{ color:#fff; }

/* Formular: Karte blau, Eingabefelder bewusst weiß */
.view[data-world="familienwelt"] .ks-form label{ color:#fff; }
.view[data-world="familienwelt"] .ks-form .opt{ color:rgba(255,255,255,.6); }
.view[data-world="familienwelt"] .ks-form .req{ color:var(--brand-yellow); }
.view[data-world="familienwelt"] .ks-form :is(input,select,textarea){ background:#fff; }
.view[data-world="familienwelt"] .form-check label{ color:rgba(255,255,255,.86); }
.view[data-world="familienwelt"] .form-check a{ color:var(--brand-yellow); }
.view[data-world="familienwelt"] .form-hint{ color:rgba(255,255,255,.7); }

/* Team-Kleckse auf Gelb: blaue Karte, Pfeil in Gelb (die helle
   Personenfarbe hätte auf Blau zu wenig Kontrast) */
.view[data-world="familienwelt"] .blob-name{ color:#fff; }
.view[data-world="familienwelt"] .blob-role{ color:rgba(255,255,255,.8); }
.view[data-world="familienwelt"] .blob-go{ color:var(--brand-yellow); }

/* ---------- BLAUE SEITEN: helle Washes statt Weiß ---------- */
.view[data-world="kinderland"] .ks-card,
.land-col--blue .ks-card{ background:var(--wash-blue); border-color:transparent; }
.view[data-world="kinderland"] .ks-card:nth-child(4n+2),
.land-col--blue .ks-card:nth-child(4n+2){ background:var(--wash-yellow); }
.view[data-world="kinderland"] .ks-card:nth-child(4n+3),
.land-col--blue .ks-card:nth-child(4n+3){ background:var(--wash-mint); }
.view[data-world="kinderland"] .ks-card:nth-child(4n+4),
.land-col--blue .ks-card:nth-child(4n+4){ background:var(--wash-pink); }

/* Räume: der Wash greift die Farbe des jeweiligen Punktes auf */
.view[data-world="kinderland"] .ks-room{ border-color:transparent; }
.view[data-world="kinderland"] .ks-room:nth-child(1){ background:var(--wash-yellow); }
.view[data-world="kinderland"] .ks-room:nth-child(2){ background:var(--wash-blue); }
.view[data-world="kinderland"] .ks-room:nth-child(3){ background:var(--wash-mint); }
.view[data-world="kinderland"] .ks-room:nth-child(4){ background:var(--wash-pink); }

.view[data-world="kinderland"] :is(.ks-factbox, .contact-card){
  background:var(--wash-yellow); border-color:transparent;
}
/* Die Kita-/Konzept-/Pädagogik-Karten mit eigener Farbvariante behalten sie */
.view[data-world="kinderland"] .prose-card:not([class*="prose-card--"]){
  background:var(--wash-blue);
}

/* Team-Kleckse auf Blau: Karte im hellen Ton der Person, Pfeil im
   dunklen – der helle Personenton hätte auf dem Wash zu wenig Kontrast */
.blob--pink { --m-wash:var(--wash-pink); }
.blob--mint { --m-wash:var(--wash-mint); }
.blob--blue { --m-wash:var(--wash-blue); }
.blob--amber{ --m-wash:var(--wash-yellow); }
.view[data-world="kinderland"] .blob-card{ background:var(--m-wash); }
.view[data-world="kinderland"] .blob-go{ color:var(--m-deep); }

/* Bilder tragen jetzt width/height (gegen Layout-Springen) – damit die
   Attribute die per CSS gesetzte Breite nicht verzerren: */
img{ height:auto; }
a.hub-back{ text-decoration:none; }