/*
Theme Name: HDKL – Haus der kleinen Leute
Theme URI: https://haus-der-kleinen-leute.de/
Author: HDKL
Description: Schlankes WordPress-Theme für Haus der kleinen Leute e.V. Ohne Evolve- und Redux-Abhängigkeit.
Version: 0.5.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: hdkl
*/
:root{--forest:#21764f;--ink:#142033;--paper:#fff;--max:1200px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.65}a{color:var(--forest)}a:hover{text-decoration:underline}img{max-width:100%;height:auto}.site-wrap{max-width:var(--max);margin-inline:auto;padding-inline:24px}.site-header{background:#fff}.header-inner{display:flex;align-items:center;gap:36px;min-height:106px}.brand{display:block;flex:0 0 85px}.brand img{display:block;width:77px;height:auto}.site-nav{flex:1}.site-nav .menu{display:flex;align-items:center;gap:38px;list-style:none;padding:0;margin:0}.site-nav .menu li{position:relative;list-style:none}.site-nav .menu>li>a{display:block;color:var(--forest);font-family:'Segoe Print','Bradley Hand','Comic Sans MS',cursive;font-size:24px;text-decoration:none;line-height:1.35}.site-nav ul.sub-menu{display:none;position:absolute;top:100%;left:0;z-index:30;background:white;box-shadow:0 7px 25px #0002;min-width:235px;padding:9px 0;margin:0;list-style:none}.site-nav ul.sub-menu a{display:block;padding:9px 16px;color:var(--forest);text-decoration:none;font-size:15px}.site-nav li:hover>ul.sub-menu,.site-nav li:focus-within>ul.sub-menu{display:block}.site-nav .menu-item-has-children>a:after{content:'⌄';font-family:Arial,sans-serif;font-size:15px;margin-left:10px}.header-search{margin-left:auto}.header-search button{border:0;background:transparent;cursor:pointer;font-size:20px}.header-search form{display:none;position:absolute;right:24px;top:85px;background:#fff;padding:14px;box-shadow:0 8px 20px #0002;z-index:40}.header-search:focus-within form{display:block}.hero{position:relative;aspect-ratio:1200/450;margin:0 auto 55px;overflow:hidden;background:#f4f2ed}.hero-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .5s ease}.hero-slide.active{opacity:1;visibility:visible}.hero-slide img{display:block;width:100%;height:100%;object-fit:cover}.hero-link{position:absolute;left:5%;bottom:20%;background:#237b58cf;color:white;text-decoration:none;font-family:'Segoe Print','Bradley Hand','Comic Sans MS',cursive;font-size:22px;line-height:1.4;padding:7px 12px}.hero-link:focus-visible,.slider-arrow:focus-visible{outline:3px solid #111}.slider-controls{position:absolute;left:5%;bottom:7%;display:flex;gap:5px}.slider-arrow{border:0;background:#21764fcf;color:#fff;cursor:pointer;font-size:29px;width:39px;height:43px;line-height:1}.hero-dots{position:absolute;bottom:10px;right:18px;display:flex;gap:8px}.hero-dot{height:9px;width:9px;border:1px solid white;border-radius:50%;background:#28473777;cursor:pointer;padding:0}.hero-dot.active{background:#fff}.main-content{padding-bottom:48px;min-height:260px}.entry-title,.entry-content h1,.entry-content h2,.entry-content h3,.home-intro h3{font-family:'Segoe Print','Bradley Hand','Comic Sans MS',cursive;font-weight:400;line-height:1.4}.entry-title{font-size:36px;margin:20px 0 28px}.home .entry-title{display:none}.home .entry-content h3{font-size:28px;margin:0 0 15px}.entry-content p{margin:0 0 18px}.entry-content ul{padding-left:24px}.entry-content a[href$=".pdf" i]{text-decoration:underline}.site-footer{padding:0 0 28px}.footer-inner{background:var(--forest);text-align:center;color:white;min-height:28px;font-size:13px;padding:3px 10px}.footer-inner a{color:#fff;text-decoration:none}.footer-inner a:hover{text-decoration:underline}.footer-copy{font-size:12px;text-align:center;color:#587264;margin:12px 0}.menu-toggle{display:none}.screen-reader-text{clip-path:inset(50%);height:1px;width:1px;overflow:hidden;position:absolute;white-space:nowrap}.wp-block-image img{height:auto}@media(max-width:760px){.site-wrap{padding-inline:15px}.header-inner{gap:14px;min-height:83px;flex-wrap:wrap}.brand{flex-basis:55px}.brand img{width:56px}.menu-toggle{display:block;margin-left:auto;border:1px solid #b6cbbf;border-radius:4px;padding:7px 12px;color:var(--forest);background:white;cursor:pointer}.site-nav{display:none;order:3;flex:0 0 100%;padding-bottom:12px}.site-nav.open{display:block}.site-nav .menu{display:block}.site-nav .menu>li>a{font-size:20px;padding:7px 0}.site-nav ul.sub-menu{display:block;position:static;box-shadow:none;padding-left:20px}.site-nav ul.sub-menu a{padding:5px 10px}.header-search{display:none}.hero{margin-bottom:24px}.hero-link{font-size:14px;bottom:20%;left:4%;padding:4px 7px}.slider-controls{bottom:3%;left:4%}.slider-arrow{width:30px;height:30px;line-height:1;font-size:20px}.hero-dots{display:none}.entry-title{font-size:29px}.home .entry-content h3{font-size:24px}}
@media(prefers-reduced-motion:reduce){.hero-slide{transition:none}html{scroll-behavior:auto}}

.hdkl-footer-menu{display:flex;gap:8px;justify-content:center;list-style:none;margin:0;padding:0;flex-wrap:wrap}.hdkl-footer-menu li:not(:last-child)::after{content:" | ";margin-left:8px}.hdkl-footer-menu a{color:#fff}.brand img{object-fit:contain}

/* HDKL 0.5: mobile navigation starts closed and submenus expand on demand. */
@media (max-width:760px) {
  .site-nav:not(.open) {display:none!important;}
  .site-nav.open {display:block!important;}
  .site-nav .menu {width:100%;}
  .site-nav .menu-item-has-children {display:flex;flex-wrap:wrap;align-items:center;}
  .site-nav .menu-item-has-children > a {flex:1 1 auto;}
  .site-nav .submenu-toggle {display:inline-flex;align-items:center;justify-content:center;width:42px;height:40px;border:1px solid #b6cbbf;border-radius:4px;background:#fff;color:var(--forest);font-size:20px;cursor:pointer;}
  .site-nav .submenu-toggle[aria-expanded="true"] {background:#e9f4ed;}
  .site-nav .menu-item-has-children > ul.sub-menu {display:none!important;flex:0 0 100%;width:100%;} 
  .site-nav .menu-item-has-children.submenu-open > ul.sub-menu {display:block!important;}
  .site-nav .menu-item-has-children > a:after {display:none;}
  .menu-toggle:focus-visible,.submenu-toggle:focus-visible {outline:3px solid var(--forest);outline-offset:2px;}
}
@media (min-width:761px) { .site-nav .submenu-toggle {display:none;} }