/* ---- Home-Banner: Crossfade (Bootstrap-3-Carousel-Fade) ---- */ .sppb-carousel .sppb-carousel-inner{position:relative} .sppb-carousel .sppb-carousel-inner > .sppb-item{ position:absolute; top:0; left:0 !important; right:0; width:100%; display:block !important; min-height:440px; opacity:0; z-index:0; transform:none !important; transition:opacity .9s ease-in-out; background-size:cover; background-position:center; } .sppb-carousel .sppb-carousel-inner > .sppb-item.active{position:relative; opacity:1; z-index:1} .sppb-carousel .sppb-carousel-inner > .sppb-item.next.left, .sppb-carousel .sppb-carousel-inner > .sppb-item.prev.right{opacity:1; z-index:2} .sppb-carousel .sppb-carousel-inner > .sppb-item.active.left, .sppb-carousel .sppb-carousel-inner > .sppb-item.active.right{opacity:0; z-index:1} /* ---- Text als schwarze Box, Text oben bündig ---- */ .sppb-carousel .sppb-carousel-caption{ position:absolute !important; right:0; left:auto; /* rechtsbündig (kleiner Abstand vom Rand: right:3%) */ bottom:0; top:auto; /* unten am Bildrand (Abstand: bottom:3%) */ transform:none; /* Zentrierungs-Verschiebung entfernen */ height:auto !important; min-height:0 !important; width:auto; max-width:min(90%,520px); background:rgba(0,0,0,.72); padding:14px 24px; text-align:left; z-index:3; } /* SPPB zentriert den Caption-Inhalt vertikal -> auf "oben" stellen */ .sppb-carousel .sppb-carousel-item-inner > div > div{ vertical-align:top !important; } .sppb-carousel .sppb-carousel-caption h2{ color:#fff; margin:0 0 6px; font-size:1.5rem; line-height:1.35; text-shadow:none; } .sppb-carousel .sppb-carousel-caption .sppb-carousel-content{ color:#eee; margin:0; font-size:1rem; } /* ---- Carousel-Pfeile über die Slides (sonst nicht klickbar/teils unsichtbar) | KD-CARO-ARROWS ---- */ .sppb-carousel{ position:relative; } .sppb-carousel .sppb-carousel-arrow, .sppb-carousel .sppb-carousel-control{ z-index:8; } /* ---- Schmale Screens: Slide-Höhe folgt dem Bild, Overlay bleibt AUF dem Bild | KD-CARO-MOBILE ---- (sonst behält der Slide die feste 440px-Höhe, während das Bild schrumpft -> Box rutscht darunter) */ @media (max-width:767px){ .sppb-carousel .sppb-carousel-inner > .sppb-item{ min-height:0; } .sppb-carousel .sppb-carousel-inner > .sppb-item > img{ width:100%; height:auto; display:block; } .sppb-carousel .sppb-carousel-caption{ max-width:88%; padding:8px 14px; transform:scale(.75); transform-origin:right bottom; } } /* ---- Auto Fade-in per JavaScript (IntersectionObserver) | KD-JSFADE ---- Cross-browser INKL. Firefox. custom.js (liegt im ) setzt sofort html.kd-anim, deshalb sind die Bausteine schon vor dem ersten Paint versteckt -> kein Flash. Beim Einscrollen bekommt der Baustein .kd-in -> faded von links ein (0.8s). Ausgenommen: SPPB-WoW-Elemente (haben eigene Animation) und Carousels/Diashows. Ohne JavaScript oder bei prefers-reduced-motion fehlt html.kd-anim -> nichts wird versteckt, alles ist normal sichtbar. */ @keyframes kd-fade-in-left{ from{ opacity:0; transform:translateX(-6px); } to { opacity:1; transform:none; } } /* versteckt bis zum Einscrollen */ html.kd-anim #sp-main-body .sppb-addon:not(.sppb-wow):not(.sppb-addon-carousel){ opacity:0; } /* beim Einscrollen: @keyframes-Animation (laeuft in Firefox auf dem Compositor -> fluessig) */ html.kd-anim #sp-main-body .sppb-addon.kd-in:not(.sppb-wow):not(.sppb-addon-carousel){ animation:kd-fade-in-left .6s ease-out both; } @media (prefers-reduced-motion: reduce){ html.kd-anim #sp-main-body .sppb-addon{ opacity:1 !important; transform:none !important; animation:none !important; } } /* ---- KiDojo Markenfarben (zentrale Quelle) | KD-BRAND ---- */ :root{ --kidojo-green:#65b62f; --kidojo-green-dark:#5aa22a; --kidojo-red:#bf0417; } /* wiederverwendbarer grüner Button (wie im alten YOOtheme, Stil 'primary') */ .kidojo-btn{display:inline-block;margin:4px 10px 4px 0;padding:9px 20px; background:var(--kidojo-green);color:#fff !important;border:0;border-radius:4px; font-weight:600;line-height:1.25;text-decoration:none !important; transition:background .2s ease;cursor:pointer;} .kidojo-btn:hover,.kidojo-btn:focus{background:var(--kidojo-green-dark);color:#fff !important;} .kidojo-btn-row{margin:14px 0;} /* ---- Dunkle Box (weiße Schrift), wie YOOtheme card-secondary | KD-DARKBOX ---- */ .kidojo-darkbox{background:#232323;color:#fff;padding:24px 28px;border-radius:6px;} .kidojo-darkbox .sppb-addon-title{color:#fff;} .kidojo-darkbox a{color:#fff;text-decoration:underline;} /* Zeitplan tabellen-ähnlich: keine Bullets, Zeit links / Text rechts, Querstriche */ .kidojo-darkbox ul{list-style:none;margin:0;padding:0;} .kidojo-darkbox li{padding:11px 2px;} .kidojo-darkbox li:has(> div){display:flex;justify-content:space-between;align-items:baseline;gap:32px;text-align:right;} .kidojo-darkbox li:has(> div)>div{float:none;margin:0;font-weight:600;white-space:nowrap;} .kidojo-darkbox .uk-list-divider>li:nth-child(n+2){border-top:1px solid rgba(255,255,255,.2);} /* ---- Bild-Diashow (Galerien der Gruppen) | KD-SLIDESHOW ---- */ .kidojo-slideshow .sppb-carousel{max-width:900px;margin:0 auto;position:relative;} .kidojo-slideshow .sppb-carousel-inner>.sppb-item{min-height:0;} .kidojo-slideshow .sppb-item img{width:100%;height:440px;object-fit:contain;background:transparent;display:block;} .kidojo-slideshow .sppb-carousel-caption{display:none !important;} .kidojo-slideshow .sppb-carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:26px;line-height:1;} .kidojo-slideshow .sppb-carousel-arrow:hover{background:rgba(0,0,0,.78);} .kidojo-slideshow .sppb-carousel-arrow.left{left:12px;} .kidojo-slideshow .sppb-carousel-arrow.right{right:12px;} .kidojo-slideshow .sppb-carousel-arrow i{display:none;} .kidojo-slideshow .sppb-carousel-arrow.left::before{content:"\2039";} .kidojo-slideshow .sppb-carousel-arrow.right::before{content:"\203A";} /* Footer 3-spaltig */ .kidojo-footer{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 32px;align-items:start} .kidojo-footer h4{margin:0 0 8px} .kidojo-footer p{margin:0 0 10px;line-height:1.5} .kidojo-footer img{max-width:150px;height:auto} .kidojo-footer a{color:inherit} @media(max-width:768px){.kidojo-footer{grid-template-columns:1fr;text-align:center}.kidojo-footer img{margin:0 auto}} .kidojo-card{text-align:center} .kidojo-card a > img{display:block;margin:0 auto;max-width:240px;min-width:200px;height:auto} .kidojo-card .kidojo-btn{margin-bottom:24px}