/*
Theme Name: Dachflächenrechner
Description: Roof and photovoltaic calculator theme with responsive hero and cards.
Version: 2.0.0
Requires PHP: 7.4
Text Domain: dachklar
*/
:root{--green:#278d44;--blue:#0d376c;--ink:#1b2939}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f5f8fa;color:var(--ink);font:15px/1.55 system-ui,-apple-system,"Segoe UI",Arial,sans-serif}a{color:var(--blue)}.wrap{max-width:1350px;margin:auto;padding:0 22px}.site-header{position:relative;z-index:5;background:white;box-shadow:0 1px 9px #19304d19}.top{display:flex;align-items:center;justify-content:space-between;gap:22px;min-height:70px}.brand{display:flex;gap:9px;align-items:center;color:#183b5e;text-decoration:none;flex-shrink:0}.brand img{width:81px;height:57px;object-fit:contain}.brand b{display:block;font-size:25px;line-height:1.1;letter-spacing:-.8px}.brand small{display:block;font-size:10px;letter-spacing:-.1px}.site-nav{display:flex;align-items:center;gap:23px;flex-wrap:wrap}.site-nav a{font-size:13px;color:#26303c;text-decoration:none;white-space:nowrap}.site-nav a:hover{color:var(--green)}.nav-cta{background:var(--green);border-radius:5px;padding:11px 16px;color:#fff;text-decoration:none;font-weight:650;white-space:nowrap;font-size:13px}.hero{height:505px;background:linear-gradient(90deg,rgba(20,55,85,.88) 0%,rgba(16,60,94,.73) 34%,rgba(0,0,0,.05) 85%),url('assets/solar-roof-hero.webp') center 32%/cover no-repeat}.hero-inner{padding-top:44px;color:white}.hero h1{font-size:clamp(32px,3.2vw,49px);line-height:1.12;max-width:840px;margin:0 0 13px;letter-spacing:-.7px}.hero p{font-size:18px;line-height:1.55;margin:0}.benefits{display:flex;gap:25px;margin-top:25px;flex-wrap:wrap;align-items:center}.benefits span{font-size:13px;font-weight:600;background:#ffffff18;border-radius:50px;padding:10px 12px}.app-wrap{margin-top:-263px;position:relative;z-index:2}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px;margin-bottom:55px}.service-grid article{background:white;border-radius:12px;padding:24px 20px;box-shadow:0 2px 11px #1f42600c;min-height:215px}.service-grid h2{font-size:17px;margin:0 0 10px}.service-grid p{font-size:13px;margin:0 0 18px;color:#516076}.service-grid i{font-style:normal;display:inline-flex;justify-content:center;align-items:center;width:48px;height:48px;background:#268e48;color:white;border-radius:50%;font-size:25px;margin-bottom:12px}.service-grid article:nth-child(2) i{background:#f5aa26}.service-grid article:nth-child(3) i{background:#2088dc}.service-grid article:nth-child(4) i{background:#8e54d8}.service-grid a{border:1px solid #d5dfe8;border-radius:5px;padding:9px 14px;text-decoration:none;font-weight:600;font-size:13px;display:inline-block}.explainer{background:white;border-radius:14px;padding:28px 38px;margin-bottom:55px}.explainer h2{font-size:25px}.explainer details{padding:14px 0;border-top:1px solid #e2e8ee}.explainer summary{cursor:pointer;font-weight:650}.content{padding:38px 22px;max-width:1020px;margin:0 auto;min-height:65vh}.article{background:#fff;padding:35px;border-radius:13px;overflow-wrap:anywhere}.article h1{font-size:clamp(27px,3.5vw,43px)}.article img{max-width:100%;height:auto}.site-footer{background:#163453;color:#d9e4ec;padding:40px 0}.footer-layout{display:flex;justify-content:space-between;gap:25px}.site-footer nav{display:flex;flex-wrap:wrap;gap:16px;align-content:center}.site-footer a{color:#e9f1f8}.plugin-warning{background:#fff;border:2px solid #e78c60;padding:40px}.legal-todo{border-left:4px solid #c87b27;background:#fff8e9;padding:14px;margin:20px 0} @media(max-width:1100px){.site-nav{gap:9px}.site-nav a{font-size:11px}.brand b{font-size:20px}.top{gap:10px}.nav-cta{font-size:11px}}@media(max-width:850px){.top{padding:12px 20px;flex-wrap:wrap}.site-nav{order:3;width:100%;overflow-x:auto;flex-wrap:nowrap}.hero{height:440px}.app-wrap{margin-top:-150px}.service-grid{grid-template-columns:repeat(2,1fr)}.benefits{gap:8px}.benefits span{font-size:11px}}@media(max-width:550px){.brand img{width:53px;height:42px}.brand b{font-size:19px}.brand small{font-size:8px}.nav-cta{padding:9px}.hero{height:485px;background-position:59% top}.hero-inner{padding-top:30px}.hero h1{font-size:32px}.hero p{font-size:15px}.benefits span{padding:5px 8px}.app-wrap{margin-top:-187px;padding:0 10px}.service-grid{grid-template-columns:1fr}.footer-layout{display:block}.site-footer nav{margin-top:18px}.explainer{padding:20px}}