.qsys-page{background:#f5f7f3;color:#24372a}.qsys-shell{width:min(1160px,calc(100% - 32px));margin:0 auto}.qsys-hero{padding:28px 0 18px}.qsys-breadcrumb{display:flex;gap:.5rem;flex-wrap:wrap;font-size:.82rem;color:#708074;margin-bottom:16px}.qsys-breadcrumb a{color:inherit}.qsys-hero-card{display:grid;grid-template-columns:1fr minmax(250px,380px);gap:28px;align-items:stretch;background:linear-gradient(135deg,#f9fcf7,#e9f2e6);border:1px solid #d9e5d7;border-radius:26px;overflow:hidden;box-shadow:0 12px 34px rgba(40,70,47,.07)}.qsys-hero-copy{padding:34px}.qsys-eyebrow{text-transform:uppercase;letter-spacing:.12em;font-weight:850;font-size:.72rem;color:#5d8364;margin:0 0 8px}.qsys-hero h1{font-size:clamp(2rem,5vw,3.6rem);line-height:1.02;margin:0 0 14px;color:#213d29}.qsys-hero p{font-size:1.02rem;line-height:1.6;color:#607166;max-width:720px}.qsys-hero-visual{display:grid;place-items:center;min-height:260px;background:radial-gradient(circle at 65% 35%,rgba(255,255,255,.9),transparent 32%),linear-gradient(145deg,#dcebd7,#bcd3bb);font-size:7rem}.qsys-pills{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:18px}.qsys-pill{display:inline-flex;align-items:center;gap:.35rem;border:1px solid #d1dfce;background:#fff;border-radius:999px;padding:.48rem .7rem;font-size:.76rem;font-weight:800;color:#46654d}.qsys-main{padding:12px 0 70px}.qsys-project-context{display:none;margin-bottom:18px;padding:14px 16px;border-radius:16px;border:1px solid #cfe1cd;background:#edf7eb;color:#395c42}.qsys-project-context.is-visible{display:flex;gap:.7rem;align-items:flex-start}.qsys-project-context strong{display:block}.qsys-project-context p{margin:.2rem 0 0;font-size:.82rem;line-height:1.45;color:#617066}.qsys-card{background:#fff;border:1px solid #dfe7dc;border-radius:22px;box-shadow:0 10px 30px rgba(37,68,45,.05);padding:clamp(18px,3vw,30px);margin-bottom:20px}.qsys-card h2{margin:0;color:#28432f;font-size:1.45rem}.qsys-card>.qsys-intro{margin:.45rem 0 1.25rem;color:#6b776f;line-height:1.5}.qsys-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.qsys-field{display:grid;gap:6px}.qsys-field--full{grid-column:1/-1}.qsys-field>span{font-size:.82rem;font-weight:800;color:#405b46}.qsys-field small{font-size:.72rem;color:#7b867f}.qsys-field input,.qsys-field select,.qsys-field textarea{width:100%;border:1px solid #ccd9c9;border-radius:12px;padding:.75rem .8rem;background:#fff;color:#26382c;font:inherit;box-sizing:border-box}.qsys-field textarea{min-height:88px;resize:vertical}.qsys-checks{display:flex;flex-wrap:wrap;gap:8px}.qsys-check{display:flex;align-items:center;gap:.4rem;border:1px solid #d7e2d4;border-radius:12px;padding:.62rem .72rem;background:#fafcf9;font-size:.8rem}.qsys-check input{width:auto}.qsys-actions{display:flex;gap:.65rem;flex-wrap:wrap;margin-top:20px}.qsys-btn{border:0;border-radius:12px;padding:.78rem 1rem;font:inherit;font-weight:850;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}.qsys-btn--primary{background:#315f3d;color:#fff}.qsys-btn--secondary{background:#edf3eb;color:#345740;border:1px solid #d1dfce}.qsys-result[hidden],.qsys-form-card[hidden]{display:none!important}.qsys-result-head{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}.qsys-result-badge{display:inline-flex;align-items:center;gap:.45rem;background:#eaf6e8;border:1px solid #cde4c9;border-radius:999px;color:#2f6a3b;font-size:.72rem;font-weight:850;padding:.45rem .65rem}.qsys-rec{margin:16px 0 0;padding:18px;border-radius:18px;background:linear-gradient(135deg,#f5faf3,#ebf4e8);border:1px solid #d7e5d3}.qsys-rec h3{font-size:1.5rem;margin:0 0 7px;color:#295036}.qsys-rec p{margin:0;color:#5d6e62;line-height:1.55}.qsys-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}.qsys-metric{padding:12px;border-radius:14px;border:1px solid #e0e7dd;background:#fbfcfa}.qsys-metric span{display:block;font-size:.7rem;color:#7a867e}.qsys-metric strong{display:block;margin-top:.25rem;color:#34543d}.qsys-details{margin-top:14px;border:1px solid #e1e8df;border-radius:14px;background:#fff}.qsys-details summary{cursor:pointer;font-weight:850;padding:.8rem .9rem;color:#405a46}.qsys-details>div{padding:0 .9rem .9rem;color:#647067;line-height:1.55;font-size:.84rem}.qsys-product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}.qsys-product{display:grid;grid-template-columns:74px 1fr;gap:12px;border:1px solid #e0e7dd;border-radius:16px;padding:11px;background:#fff}.qsys-product-media{width:74px;height:74px;border-radius:12px;background:#f4f6f2;display:grid;place-items:center;overflow:hidden}.qsys-product-media img{width:100%;height:100%;object-fit:contain}.qsys-product-media span{font-size:1.55rem}.qsys-product small{display:block;color:#788279;font-size:.68rem}.qsys-product strong{display:block;color:#324a38;margin:.18rem 0 .3rem;line-height:1.25}.qsys-product-price{font-weight:900;color:#2f663b;font-size:.82rem}.qsys-product a{display:inline-block;margin-top:.4rem;font-size:.74rem;font-weight:850;color:#315f3d}.qsys-empty{margin-top:12px;padding:12px 14px;border-radius:13px;background:#f7f8f6;color:#69756c;font-size:.8rem}.qsys-notice{margin-top:14px;padding:12px 14px;border-radius:13px;background:#fff8e9;border:1px solid #eddab4;color:#6f5930;font-size:.78rem;line-height:1.45}.qsys-footer-links{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:18px}.qsys-footer-links a{font-size:.8rem;color:#526b57}.qsys-save{margin-top:10px;font-size:.75rem;color:#5b775f;font-weight:750}.qsys-loading{display:flex;align-items:center;gap:.5rem;color:#6c786e;font-size:.78rem;margin-top:10px}.qsys-dot{width:9px;height:9px;border-radius:50%;background:#6fa478;animation:qsyspulse 1s infinite alternate}@keyframes qsyspulse{to{opacity:.25;transform:scale(.8)}}
@media(max-width:780px){.qsys-shell{width:min(100% - 20px,1160px)}.qsys-hero-card{grid-template-columns:1fr}.qsys-hero-copy{padding:24px 20px}.qsys-hero-visual{min-height:150px;font-size:4.8rem}.qsys-grid,.qsys-product-grid,.qsys-metrics{grid-template-columns:1fr}.qsys-result-head{display:block}.qsys-result-head .qsys-btn{margin-top:10px}.qsys-card{border-radius:18px}.qsys-product{grid-template-columns:64px 1fr}.qsys-product-media{width:64px;height:64px}}

/* 07.09.2026: echte Headerbilder für die sechs neuen Garten-Systemplaner */
body[data-qsystem="irrigation"] .qsys-hero-visual,
body[data-qsystem="lighting"] .qsys-hero-visual,
body[data-qsystem="privacy"] .qsys-hero-visual,
body[data-qsystem="storage"] .qsys-hero-visual,
body[data-qsystem="kitchen"] .qsys-hero-visual,
body[data-qsystem="play"] .qsys-hero-visual{font-size:0;background-repeat:no-repeat;background-size:cover;background-position:center;min-height:260px}
body[data-qsystem="irrigation"] .qsys-hero-visual{background-image:url('/assets/headers/header-bewaesserung-planen.webp')}
body[data-qsystem="lighting"] .qsys-hero-visual{background-image:url('/assets/headers/header-gartenbeleuchtung-planen.webp')}
body[data-qsystem="privacy"] .qsys-hero-visual{background-image:url('sichtschutz-zaun-planen-header.webp')}
body[data-qsystem="storage"] .qsys-hero-visual{background-image:url('/assets/headers/header-gartenhaus-stauraum-planen.webp')}
body[data-qsystem="kitchen"] .qsys-hero-visual{background-image:url('outdoor-kueche-planen-header.webp')}
body[data-qsystem="play"] .qsys-hero-visual{background-image:url('spielbereich-planen-header.webp')}
@media(max-width:780px){body[data-qsystem] .qsys-hero-visual{min-height:190px}}
.qsys-hero-visual:has(img){background-image:none!important;font-size:0;padding:0}
.qsys-hero-visual img{width:100%;height:100%;min-height:260px;object-fit:cover;object-position:var(--q-hero-object-position,72% 50%);display:block}
@media(max-width:780px){.qsys-hero-visual img{min-height:190px}}