/*
Theme Name: Steppkeshaus Child
Theme URI: https://zauberwelt.heiligenhaus.de
Description: Child-Theme fuer die Staedt. Kita Steppkeshaus (Stadt Heiligenhaus). Design-Familie der staedtischen Kitas: Quicksand lokal, eigene Farbwelt (Blautöne · Bewegung, Spiel, Sport), Motive mit Scroll-Bewegung.
Author: Stadt Heiligenhaus
Template: hello-biz
Version: 1.2.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: steppkeshaus-child
*/

/* ============================================================
   1. Marken-Schrift Quicksand – lokal eingebunden (DSGVO)
   ============================================================ */
@font-face{font-family:'Quicksand';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/quicksand-400.woff2') format('woff2');}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/quicksand-500.woff2') format('woff2');}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/quicksand-600.woff2') format('woff2');}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/quicksand-700.woff2') format('woff2');}

/* ============================================================
   2. Marken-Farben als Variablen (zum Wiederverwenden)
   ============================================================ */
:root{
  --zw-bg:#F3F6FA;
  --zw-paper:#FFFFFF;
  --zw-ink:#1D2A38;
  --zw-ink-2:#34465A;
  --zw-muted:#5A6C80;
  --zw-line:#D3DDE8;
  --zw-green:#3D82C4;        /* Marken-Gruen (Flaechen, Icons) */
  --zw-green-btn:#2F6CAA;    /* Buttons mit weisser Schrift */
  --zw-green-dark:#255787;   /* Hover / aktiv */
  --zw-green-ink:#245B90;    /* gruener Text / Links auf hell */
  --zw-green-soft:#E1EDF8;   /* helle gruene Flaeche */
  --zw-red:#C0001A;          /* Stadt-Rot (dezenter Bezug) */
  --zw-dark:#1B2C40;         /* dunkle Baender / Footer */
}

/* ============================================================
   3. Grundtypografie
   ============================================================ */
body{
  color:var(--zw-ink);
}
h1,h2,h3,h4,h5,h6,
.elementor-heading-title,
.elementor-widget-heading .elementor-heading-title{
  font-family:'Quicksand', system-ui, sans-serif;
  letter-spacing:-.2px;
}

/* Textlinks in der Marke */
a{color:var(--zw-green-ink);}
a:hover{color:var(--zw-green-dark);}

/* ============================================================
   4. Buttons (Elementor & Standard) dezent an die Marke anlehnen.
      Nur Basisstil – individuelle Elementor-Einstellungen gehen vor.
   ============================================================ */
.elementor-button,
.wp-block-button__link,
button.btn,
input[type="submit"]{
  font-family:'Quicksand', system-ui, sans-serif;
  font-weight:600;
  border-radius:10px;
}

/* Fokus-Sichtbarkeit (Barrierefreiheit) */
a:focus-visible,
button:focus-visible,
.elementor-button:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline:3px solid var(--zw-green-dark);
  outline-offset:2px;
}

/* ============================================================
   5. Scroll-Hinweis im Hero: sanftes Wippen (CSS-Klasse "zw-scroll-hint"
      auf dem Elementor-Button unter Erweitert -> CSS-Klassen)
   ============================================================ */
@keyframes zw-bounce{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(9px)}
}
.zw-scroll-hint .elementor-button,
.zw-scroll-hint .elementor-button-link{
  animation:zw-bounce 1.9s ease-in-out infinite;
  will-change:transform;
}
.zw-scroll-hint .elementor-button:hover{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .zw-scroll-hint .elementor-button,
  .zw-scroll-hint .elementor-button-link{animation:none}
}

/* ============================================================
   6. Hover nur dort, wo es eine Aktion gibt (Buttons/Links)
   ============================================================ */
a, .elementor-button{transition:color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease}

/* ============================================================
   7. Zauberwelt-Motive: Eigenbewegung + Scroll-Parallax
      (JS: assets/js/zw-motion.js; Sektionen mit Klasse "zw-deco")
   ============================================================ */
.zw-deco{position:relative;overflow:hidden}
.zw-deco > :not(.zw-deco-layer){position:relative;z-index:1}
.zw-deco-layer{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.zw-block{position:absolute;opacity:.85;will-change:transform;filter:drop-shadow(0 8px 16px rgba(20,25,15,.14))}
.zw-anim{width:100%;height:100%;display:block;transform-origin:center}
.zw-anim svg{width:100%;height:100%;display:block}
@keyframes zw-float  {0%,100%{transform:translateY(0)}    50%{transform:translateY(-16px)}}
@keyframes zw-sway   {0%,100%{transform:rotate(-8deg)}   50%{transform:rotate(8deg)}}
@keyframes zw-twinkle{0%,100%{transform:scale(1) rotate(0);opacity:.85} 50%{transform:scale(1.2) rotate(10deg);opacity:1}}
@keyframes zw-flicker{0%,100%{transform:scale(1,1)}      50%{transform:scale(.94,1.1)}}
@keyframes zw-drift  {0%,100%{transform:translateX(-18px)} 50%{transform:translateX(18px)}}
@keyframes zw-glide  {0%,100%{transform:translate(0,0) rotate(-5deg)} 50%{transform:translate(14px,-10px) rotate(3deg)}}
.zw-anim-float  {animation:zw-float   5.5s ease-in-out infinite}
.zw-anim-sway   {animation:zw-sway    6.5s ease-in-out infinite}
.zw-anim-twinkle{animation:zw-twinkle 2.8s ease-in-out infinite}
.zw-anim-flicker{animation:zw-flicker 1.5s ease-in-out infinite}
.zw-anim-drift  {animation:zw-drift   10s  ease-in-out infinite}
.zw-anim-glide  {animation:zw-glide   7s   ease-in-out infinite}
@media (max-width:767px){.zw-block{opacity:.7}}

/* Bild-Container: Tiefen-Parallax beim Scrollen */
.zw-lift{--zw-py:0px; transform:translate3d(0,var(--zw-py),0); will-change:transform}
@media (prefers-reduced-motion:reduce){
  .zw-lift{transform:none!important}
  .zw-block{transform:none!important}
  .zw-anim{animation:none!important}
}

/* ============================================================
   8. Gruppen-Figuren als runde Badges (Klasse "zw-figure zw-fig-<element>")
      Weisser Bildhintergrund verschwindet im weissen Kreis; Ring in Elementfarbe.
   ============================================================ */
.zw-figure img{
  width:124px;height:124px;object-fit:contain;object-position:center;
  padding:10px;background:#FFFFFF;border-radius:50%;
  border:4px solid #D3DDE8;
  box-shadow:0 12px 26px -14px rgba(20,25,15,.35);
}
.zw-fig-earth img{border-color:#3D82C4}
.zw-fig-water img{border-color:#1F6F6C}
.zw-fig-fire  img{border-color:#8A5A1E}
.zw-fig-air   img{border-color:#2E6B45}
@media (max-width:1024px){.zw-figure img{width:108px;height:108px}}
@media (max-width:767px){.zw-figure img{width:96px;height:96px;padding:8px}}

/* ============================================================
   9. Foto-Karussell: einheitliche Hoehe und Beschnitt (Klasse "zw-gallery")
   ============================================================ */
.zw-gallery .swiper-slide,
.zw-gallery .elementor-image-carousel .swiper-slide{height:auto}
.zw-gallery .swiper-slide img,
.zw-gallery .elementor-image-carousel img{
  display:block;width:100%;height:280px;object-fit:cover;object-position:center;border-radius:14px;
}
@media (max-width:1024px){.zw-gallery .swiper-slide img,.zw-gallery .elementor-image-carousel img{height:240px}}
@media (max-width:767px){.zw-gallery .swiper-slide img,.zw-gallery .elementor-image-carousel img{height:220px}}

/* ============================================================
   10. Partner-Logos einheitlich (Klasse "zw-logo"): gleiche Hoehe, proportional
   ============================================================ */
.zw-logo .elementor-widget-container{height:72px;display:flex;align-items:center}
.zw-logo img{max-height:72px;height:auto;width:auto;max-width:180px;object-fit:contain}

/* ============================================================
   11. Partner-Visitenkarten: gleiche Hoehen (Klassen zw-pcard / zw-ptitle / zw-ptext / zw-pcontact)
   ============================================================ */
.zw-pcard{display:flex;flex-direction:column}
.zw-pcard .zw-logo .elementor-widget-container{height:72px}          /* Logo-Zone fix */
.zw-pcard .zw-ptitle{min-height:52px}                               /* Titel-Zone: 2 Zeilen */
.zw-pcard .zw-ptitle .elementor-heading-title{line-height:1.2}
.zw-pcard .zw-ptext{flex:1 1 auto}                                   /* Text fuellt den Rest */
.zw-pcard .zw-pcontact{margin-top:auto!important;padding-top:10px;border-top:1px solid #E7EEF5;min-height:52px}  /* Kontakt immer unten */

/* ============================================================
   12. Formular (Hello Plus) in Markenoptik (Klasse zw-form)
   ============================================================ */
.zw-form form,.zw-form .ehp-form{max-width:100%;width:100%}
.zw-form label{font-family:'Quicksand',system-ui,sans-serif;font-weight:600;color:#1D2A38;font-size:15px}
.zw-form input:not([type=submit]):not([type=checkbox]),
.zw-form textarea,.zw-form select{
  width:100%;border:1px solid #D3DDE8!important;border-radius:10px!important;padding:12px 14px;
  font:inherit;font-size:16px;color:#1D2A38;background:#F3F6FA;box-shadow:none!important;transition:border-color .2s,box-shadow .2s;
}
.zw-form input:focus,.zw-form textarea:focus{outline:none;border-color:#3D82C4!important;box-shadow:0 0 0 3px #E1EDF8!important;background:#fff}
.zw-form button,.zw-form [type=submit],.zw-form .elementor-button,.zw-form .ehp-form__submit{
  background:#2F6CAA!important;color:#FFFFFF!important;border:0!important;border-radius:10px!important;
  font-family:'Quicksand',system-ui,sans-serif!important;font-weight:600!important;font-size:16px;padding:14px 26px!important;
  width:auto!important;min-width:200px;cursor:pointer;transition:background .2s,transform .2s;
}
.zw-form button:hover,.zw-form [type=submit]:hover,.zw-form .elementor-button:hover{background:#255787!important;transform:translateY(-2px)}

/* ============================================================
   13. Footer (Hello Plus): helle Schrift auf dunklem Grund erzwingen
       – meine globalen Link-/Textfarben duerfen hier nicht greifen
   ============================================================ */
.ehp-footer,
.ehp-footer p, .ehp-footer span, .ehp-footer li, .ehp-footer div,
.ehp-footer a, .ehp-footer a:visited{color:#E4E7DC!important}
.ehp-footer h1,.ehp-footer h2,.ehp-footer h3,.ehp-footer h4,.ehp-footer h5,.ehp-footer h6{color:#FFFFFF!important}
.ehp-footer a:hover,.ehp-footer a:focus-visible{color:#C6D3A6!important}
.ehp-footer .ehp-footer__copyright, .ehp-footer [class*="copyright"]{color:#9BA090!important}
.ehp-footer a:focus-visible{outline-color:#C6D3A6}

/* ============================================================
   14. Footer: lange Woerter (E-Mail) umbrechen, kein Ueberlaufen ueber den Rand
   ============================================================ */
.ehp-footer{max-width:100%;box-sizing:border-box}
.ehp-footer p, .ehp-footer a, .ehp-footer span, .ehp-footer li{overflow-wrap:anywhere;word-break:break-word;min-width:0}
.ehp-footer a[href^="mailto:"]{word-break:break-all}
.ehp-footer > *, .ehp-footer [class*="__container"], .ehp-footer [class*="__row"]{max-width:100%;min-width:0}

/* Zusaetzliche Bewegungen der Kita-Familie */
@keyframes zw-bounce {0%,100%{transform:translateY(0) scale(1,1)} 40%{transform:translateY(-18px) scale(.98,1.04)} 60%{transform:translateY(0) scale(1.04,.96)}}
@keyframes zw-spin   {0%{transform:rotate(0)} 100%{transform:rotate(360deg)}}
@keyframes zw-flutter{0%,100%{transform:scaleX(1) translateY(0)} 25%{transform:scaleX(.7) translateY(-6px)} 50%{transform:scaleX(1) translateY(-10px)} 75%{transform:scaleX(.7) translateY(-4px)}}
@keyframes zw-buzz   {0%,100%{transform:translate(0,0)} 20%{transform:translate(6px,-5px)} 40%{transform:translate(-4px,-9px)} 60%{transform:translate(5px,-3px)} 80%{transform:translate(-6px,-7px)}}
@keyframes zw-wobble {0%,100%{transform:rotate(-4deg)} 50%{transform:rotate(4deg)}}
@keyframes zw-crawl  {0%,100%{transform:translateX(-10px)} 50%{transform:translateX(10px)}}
@keyframes zw-swing  {0%,100%{transform:rotate(-10deg)} 50%{transform:rotate(10deg)}}
.zw-anim-bounce {animation:zw-bounce 2.2s ease-in-out infinite;transform-origin:center bottom}
.zw-anim-spin   {animation:zw-spin 9s linear infinite}
.zw-anim-flutter{animation:zw-flutter 3.2s ease-in-out infinite}
.zw-anim-buzz   {animation:zw-buzz 2.6s ease-in-out infinite}
.zw-anim-wobble {animation:zw-wobble 3.5s ease-in-out infinite;transform-origin:center bottom}
.zw-anim-crawl  {animation:zw-crawl 12s ease-in-out infinite}
.zw-anim-swing  {animation:zw-swing 4s ease-in-out infinite;transform-origin:top center}

/* ============================================================
   15. Schalter aus dem Customizer ("Figuren & Bewegung")
   ============================================================ */
.zw-nofigures .zw-deco-layer{display:none!important}
.zw-static .zw-anim{animation:none!important}
.zw-static .zw-block,.zw-static .zw-lift{transform:none!important}
.zw-static .zw-scroll-hint .elementor-button,.zw-static .zw-scroll-hint .elementor-button-link,.zw-static .zw-scroll-hint a{animation:none!important}