/* Haus für Kinder Wald I & II – Stylesheet (ohne externe Schriften, DSGVO-sicher) */
:root {
  --rot: #d7262c;
  --gruen: #7ab82e;
  --gruen-dunkel: #4a7a12;
  --blau: #2e9ad6;
  --blau-dunkel: #1b6fa3;
  --gelb: #f8c300;
  --lila: #9b59b6;
  --himmel: #e9f6ff;
  --creme: #fffdf6;
  --text: #2b2b2b;
  --text-weich: #5a5a5a;
  --schrift: "Segoe UI", "Trebuchet MS", "Comic Neue", system-ui, -apple-system, Arial, sans-serif;
  --radius: 28px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--schrift);
  color: var(--text);
  background: var(--creme);
  line-height: 1.6;
  font-size: 18px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blau-dunkel); }
a:hover, a:focus { color: var(--rot); }
.skip { position: absolute; left: -999px; top: 0; background: #fff; padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 12px; top: 12px; }

/* Kopf */
.kopf { background: #fff; border-bottom: 6px solid var(--gelb); }
.kopf-innen { max-width: 1100px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.logo-link img { width: 120px; height: auto; transition: transform .3s ease; }
.logo-link:hover img { transform: rotate(-4deg) scale(1.04); }
.nav { display: flex; gap: 6px; flex-wrap: wrap; }
.nav a { text-decoration: none; font-weight: 700; padding: 10px 18px; border-radius: 999px; color: var(--text); background: var(--himmel); transition: background .2s, color .2s, transform .2s; }
.nav a:hover, .nav a:focus { background: var(--blau); color: #fff; transform: translateY(-2px); }

/* Hero */
.held { position: relative; overflow: hidden; background: linear-gradient(180deg, #cfeaff 0%, var(--himmel) 70%, var(--creme) 100%); padding: 70px 20px 60px; text-align: center; }
.held-innen { position: relative; max-width: 820px; margin: 0 auto; }
.held-deko { position: absolute; inset: 0; pointer-events: none; }
.sonne { position: absolute; width: 150px; top: 24px; right: 6%; animation: drehen 40s linear infinite; }
.wolke { position: absolute; width: 190px; opacity: .95; animation: schweben 14s ease-in-out infinite; }
.wolke-1 { top: 36px; left: 4%; }
.wolke-2 { top: 130px; left: 20%; width: 130px; animation-delay: -6s; }
@keyframes drehen { to { transform: rotate(360deg); } }
@keyframes schweben { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(30px); } }
.ueberschrift-klein { margin: 0 0 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blau-dunkel); font-size: .95rem; }
.held h1 { font-size: clamp(2.1rem, 6vw, 3.8rem); line-height: 1.12; margin: 0 0 18px; font-weight: 900; }
.bunt .rot { color: var(--rot); } .bunt .gruen { color: var(--gruen); } .bunt .blau { color: var(--blau); }
.held-text { font-size: clamp(1.1rem, 2.4vw, 1.35rem); max-width: 620px; margin: 0 auto 28px; color: var(--text-weich); }
.buntstifte { display: flex; justify-content: center; gap: 10px; }
.stift { width: 18px; height: 70px; border-radius: 6px 6px 3px 3px; position: relative; display: inline-block; transform-origin: bottom; animation: huepfen 2.4s ease-in-out infinite; }
.stift::before { content: ""; position: absolute; top: -14px; left: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 14px solid currentColor; }
.stift.rot { background: var(--rot); color: var(--rot); animation-delay: 0s; }
.stift.gelb { background: var(--gelb); color: var(--gelb); animation-delay: .2s; }
.stift.gruen { background: var(--gruen); color: var(--gruen); animation-delay: .4s; }
.stift.blau { background: var(--blau); color: var(--blau); animation-delay: .6s; }
.stift.lila { background: var(--lila); color: var(--lila); animation-delay: .8s; }
@keyframes huepfen { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Karten */
.karten { max-width: 1100px; margin: 0 auto; padding: 50px 20px 20px; }
.karten h2, .kontakt h2 { text-align: center; font-size: clamp(1.6rem, 4vw, 2.3rem); margin: 0 0 30px; }
.karten h2::after, .kontakt h2::after { content: ""; display: block; width: 90px; height: 8px; margin: 12px auto 0; border-radius: 8px; background: linear-gradient(90deg, var(--rot), var(--gelb), var(--gruen), var(--blau)); }
.karten-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 26px; }
.karte { border-radius: var(--radius); padding: 30px 26px; color: #fff; box-shadow: 0 12px 30px rgba(0,0,0,.10); transition: transform .25s ease; }
.karte:hover { transform: translateY(-6px) rotate(-1deg); }
.karte-gruen { background: var(--gruen); } .karte-blau { background: var(--blau); } .karte-rot { background: var(--rot); }
.karte-symbol { width: 74px; height: 74px; border-radius: 22px; background: rgba(255,255,255,.22); display: grid; place-items: center; margin-bottom: 16px; }
.karte-symbol svg { width: 50px; height: 50px; }
.karte h3 { margin: 0 0 8px; font-size: 1.35rem; }
.karte p { margin: 0; color: rgba(255,255,255,.95); }

/* Kontakt */
.kontakt { max-width: 1100px; margin: 0 auto; padding: 40px 20px 10px; }
.kontakt-innen { display: flex; gap: 30px; justify-content: center; flex-wrap: wrap; text-align: center; }
.kontakt-innen p { background: #fff; border-radius: 20px; padding: 18px 28px; margin: 0; box-shadow: 0 8px 20px rgba(0,0,0,.06); }

/* Häuser */
.haeuser { max-width: 1100px; margin: 0 auto; padding: 40px 20px 10px; }
.haeuser h2 { text-align: center; font-size: clamp(1.6rem, 4vw, 2.3rem); margin: 0 0 30px; }
.haeuser h2::after { content: ""; display: block; width: 90px; height: 8px; margin: 12px auto 0; border-radius: 8px; background: linear-gradient(90deg, var(--blau), var(--gelb), var(--rot)); }
.haeuser-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px; }
.haus { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: 0 12px 30px rgba(0,0,0,.08); display: flex; flex-direction: column; }
.haus img { width: 100%; height: 230px; object-fit: cover; }
.haus-text { padding: 20px 24px 24px; }
.haus h3 { margin: 0 0 6px; font-size: 1.25rem; display: flex; align-items: center; gap: 10px; }
.haus p { margin: 0 0 6px; color: var(--text-weich); }
.punkt { width: 16px; height: 16px; border-radius: 50%; display: inline-block; flex: none; }
.punkt.rot { background: var(--rot); } .punkt.blau { background: var(--blau); }
.downloads a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.downloads a:hover { color: var(--gelb); }

/* Abschluss */
.abschluss { text-align: center; padding: 40px 20px 60px; font-size: 1.25rem; font-weight: 700; }
.herz { color: var(--rot); display: inline-block; animation: pochen 1.6s ease-in-out infinite; }
@keyframes pochen { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }

/* Fuß */
.fuss { background: var(--gruen); color: #fff; position: relative; }
.welle { display: block; width: 100%; height: 60px; margin-top: -60px; }
.fuss-innen { max-width: 1100px; margin: 0 auto; padding: 24px 20px 34px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: .95rem; }
.fuss a { color: #fff; }

/* Textseiten */
.textseite { max-width: 820px; margin: 0 auto; padding: 50px 20px 60px; }
.textseite h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); margin-top: 0; }
.textseite h2 { font-size: 1.3rem; margin-top: 2em; color: var(--blau-dunkel); }
.hinweis { background: #fff6cc; border-left: 6px solid var(--gelb); border-radius: 12px; padding: 14px 18px; }

@media (prefers-reduced-motion: reduce) {
  .sonne, .wolke, .stift, .herz { animation: none; }
}
@media (max-width: 600px) {
  body { font-size: 17px; }
  .held { padding: 50px 16px 44px; }
  .sonne { width: 90px; right: 4%; top: 12px; }
  .wolke-1 { width: 120px; top: 20px; } .wolke-2 { display: none; }
  .kopf-innen { justify-content: center; }
  .logo-link img { width: 100px; }
}