/* =====================================================================
	CONRADI SERVICE – CONSOLIDATED DESIGN SYSTEM (2025 CLEAN BUILD)
	===================================================================== */
/* Core tokens */
:root{--brand:#e74c3c;--brand-alt:#ff7b54;--brand-dark:#c0392b;--accent:#ffaf2d;--bg:#0f151b;--bg-alt:#17212b;--bg-soft:#1d2732;--text:#dbe4ea;--text-soft:#93a2af;--border:#263341;--focus:#ffbf47;--radius-sm:8px;--radius:16px;--radius-lg:26px;--shadow-sm:0 2px 6px -2px rgba(0,0,0,.4);--shadow:0 6px 22px -8px rgba(0,0,0,.55);--shadow-hover:0 18px 42px -14px rgba(0,0,0,.6);--transition:.35s cubic-bezier(.4,.2,.2,1)}
[data-theme=light]{--bg:#ffffff;--bg-alt:#f4f7f9;--bg-soft:#ffffff;--text:#24313d;--text-soft:#566674;--border:#d8dee2;--shadow:0 4px 14px -6px rgba(0,0,0,.15);--shadow-hover:0 18px 38px -14px rgba(0,0,0,.2)}
@media (prefers-color-scheme:light){:root:not([data-theme=dark]){--bg:#ffffff;--bg-alt:#f4f7f9;--bg-soft:#ffffff;--text:#24313d;--text-soft:#566674;--border:#d8dee2;--shadow:0 4px 14px -6px rgba(0,0,0,.15);--shadow-hover:0 18px 38px -14px rgba(0,0,0,.2)}}
/* Service color tokens */
:root{--svc-entruempelung:#ff7043;--svc-garten:#2faf6d;--svc-abbruch:#ff3d55}
/* Base */
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:16.2px;line-height:1.55;color:var(--text);background:radial-gradient(circle at 18% 22%,rgba(255,123,84,.09),transparent 60%),radial-gradient(circle at 82% 70%,rgba(255,174,45,.07),transparent 65%),var(--bg);background-attachment:fixed;-webkit-font-smoothing:antialiased;accent-color:var(--brand);transition:background .6s,color .6s}
img{max-width:100%;display:block;height:auto}
a{color:var(--brand);text-decoration:none;transition:color var(--transition)}
a:hover,a:focus-visible{color:var(--brand-alt)}
::selection{background:var(--brand);color:#fff}
.container{max-width:1180px;margin:0 auto;padding:0 20px}
h1,h2,h3{font-weight:600;line-height:1.12;letter-spacing:.4px}
h1{font-size:clamp(2.2rem,4.6vw,3.5rem)}
h2{font-size:clamp(1.85rem,3vw,2.5rem)}
h3{font-size:clamp(1.15rem,1.4vw,1.32rem)}
p,li{max-width:72ch}
/* Accessibility */
a:focus-visible,.btn:focus-visible,button:focus-visible{outline:2px solid #fff;outline-offset:3px;box-shadow:0 0 0 3px rgba(255,123,84,.5)}
.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:10px;top:10px;width:auto;height:auto;padding:10px 14px;background:#000;color:#fff;z-index:999;border-radius:6px}
/* Header / Nav */
header{padding:10px 0;position:sticky;top:0;z-index:800;backdrop-filter:saturate(160%) blur(18px);background:linear-gradient(180deg,rgba(15,21,27,.82),rgba(15,21,27,.68));border-bottom:1px solid rgba(255,255,255,.06);transition:var(--transition)}
[data-theme=light] header{background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.58));border-color:rgba(0,0,0,.08)}
.site-brand a{font-weight:700;font-size:1.18rem;background:linear-gradient(100deg,var(--brand),var(--brand-alt));-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.8px}
nav{--nav-gap:.55rem}
nav ul{list-style:none;display:flex;gap:var(--nav-gap);margin:0;padding:0;align-items:center}
nav a{padding:9px 16px;border-radius:11px;display:block;font-weight:500;background:rgba(255,255,255,.06);backdrop-filter:blur(6px);color:#fff;font-size:.9rem;letter-spacing:.3px;transition:var(--transition)}
[data-theme=light] nav a{background:rgba(0,0,0,.05);color:var(--text)}
nav a:hover,nav a:focus-visible,nav a[aria-current=page]{background:var(--brand);color:#fff}
.nav-wrap{display:flex;align-items:center;gap:.8rem;margin-left:auto}
/* Mobile nav */
.nav-toggle,.theme-toggle{width:46px;height:42px;border-radius:14px;border:1px solid rgba(255,255,255,.18);background:linear-gradient(135deg,#ffffff10,#ffffff16);display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;position:relative;transition:var(--transition)}
.theme-toggle:after{content:"";width:18px;height:18px;mask:radial-gradient(circle,#000 60%,#0000 61%);background:#fff;display:block}
[data-theme=light] .theme-toggle:after{background:linear-gradient(#000,#000)}
.nav-toggle{flex-direction:column;gap:5px}
.nav-toggle span{height:2px;background:#fff;border-radius:2px;width:22px;transition:var(--transition)}
.nav-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.active span:nth-child(2){opacity:0}
.nav-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:860px){
 nav{position:fixed;inset:70px 0 auto 0;padding:18px 20px 40px;background:var(--bg-soft);box-shadow:0 40px 60px -25px rgba(0,0,0,.5);border-bottom:1px solid var(--border);transform:translateY(-120%);opacity:0;pointer-events:none;display:block;transition:var(--transition);max-height:calc(100dvh - 70px);overflow:auto}
 nav.open{transform:translateY(0);opacity:1;pointer-events:auto}
 nav ul{flex-direction:column;align-items:stretch;gap:.4rem}
 nav a{background:var(--bg-alt);color:var(--text);border:1px solid var(--border)}
 nav a[aria-current=page],nav a:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
 .nav-toggle{display:flex}
 .theme-toggle{order:2}
}
/* Hero */
.hero{--hero-overlay:linear-gradient(140deg,rgba(0,0,0,.74),rgba(0,0,0,.35));background:var(--hero-overlay),url('../images/Hintergrundbild_StadtKoeln.webp') center/cover no-repeat;padding:150px 0 130px;text-align:center;color:#fff;position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 28% 38%,rgba(255,123,84,.36),transparent 60%);pointer-events:none}
body.service-entruempelung .hero:before{background:radial-gradient(circle at 30% 40%,rgba(255,112,67,.4),transparent 60%)}
body.service-gartenservice .hero:before{background:radial-gradient(circle at 30% 40%,rgba(47,175,109,.4),transparent 60%)}
body.service-abbruch .hero:before{background:radial-gradient(circle at 30% 40%,rgba(255,61,85,.4),transparent 60%)}
.hero h1{margin:0 0 1rem;text-wrap:balance}
.hero p{font-size:1.15rem;max-width:760px;margin:0 auto 1.8rem;color:#e9eef2;text-wrap:balance}
/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.55ch;background:var(--brand);color:#fff;padding:13px 22px;border-radius:14px;font-weight:600;font-size:.9rem;letter-spacing:.35px;transition:var(--transition);box-shadow:0 4px 18px -6px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.08) inset;position:relative;overflow:hidden}
.btn:before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(120deg,rgba(255,255,255,.25),transparent 60%);opacity:0;transition:var(--transition)}
.btn:hover:before{opacity:1}
.btn:hover,.btn:focus-visible{background:var(--brand-dark);transform:translateY(-3px)}
.btn:active{transform:translateY(-1px)}
.btn-whatsapp{background:#25D366}
.btn-whatsapp:hover,.btn-whatsapp:focus-visible{background:#128C7E}
.icon{width:1.05em;height:1.05em;display:inline-block;line-height:1;flex:0 0 auto}
.btn .icon{translate:0 .5px}
/* Layout / Sections */
section{padding:92px 0;position:relative}
@media (max-width:680px){section{padding:70px 0}}
.grid{display:grid;gap:2.4rem}
.services-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:2.4rem}
/* Cards */
.card{background:var(--bg-soft);border:1px solid var(--border);border-radius:26px;padding:30px 26px 32px;display:flex;flex-direction:column;gap:.85rem;box-shadow:var(--shadow);position:relative;transition:var(--transition);overflow:hidden}
[data-theme=light] .card{background:linear-gradient(135deg,#ffffff,#f6f9fb)}
.card img{width:100%;height:200px;object-fit:cover;border-radius:16px;background:#d9dee2;filter:saturate(1.05);transition:var(--transition)}
.card h3{margin:6px 0 0;font-size:1.14rem}
.badge{position:absolute;top:14px;left:14px;background:linear-gradient(120deg,var(--brand),var(--brand-alt));color:#fff;font-size:.68rem;padding:6px 9px 5px;border-radius:50px;letter-spacing:.7px;font-weight:600}
.card:before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,0));opacity:0;transition:var(--transition)}
.card:after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(140deg,var(--brand)20%,var(--brand-alt));-webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:.6s}
.card:hover:before{opacity:1}
.card:hover:after{opacity:1}
.card:hover{transform:translateY(-10px);box-shadow:var(--shadow-hover)}
/* Service accent cards (overview) */
.card[data-svc]{border:1px solid currentColor}
.card[data-svc]:after{background:linear-gradient(130deg,var(--svc-color),rgba(255,255,255,.15),var(--svc-color))}
.card[data-svc]{--svc-color:var(--brand)}
.card[data-svc=entruempelung]{--svc-color:var(--svc-entruempelung)}
.card[data-svc=gartenservice]{--svc-color:var(--svc-garten)}
.card[data-svc=abbruch]{--svc-color:var(--svc-abbruch)}
.card[data-svc] .badge{background:var(--svc-color)}
/* Lists */
ul.features{padding-left:18px;margin:0}
ul.features li{margin-bottom:5px}
/* CTA */
.cta{background:var(--bg-alt);text-align:center;overflow:hidden}
.cta:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 30%,rgba(255,123,84,.25),transparent 70%);pointer-events:none}
.flex-center{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin-top:1.6rem}
.small{font-size:.9rem;color:var(--text-soft)}
/* Floating CTA */
.floating-cta{position:fixed;right:14px;bottom:14px;display:flex;flex-direction:column;gap:.65rem;z-index:300}
.floating-cta a{font-size:.85rem;padding:11px 15px}
@media (min-width:640px){.floating-cta a span{display:inline}}
/* Footer */
footer{margin-top:80px;text-align:left;font-size:.84rem;background:linear-gradient(180deg,#111a22,#0c1015);border-top:1px solid rgba(255,255,255,.08);color:#fff}
[data-theme=light] footer{background:#1b2631}
.footer-grid{display:grid;gap:2.4rem;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-bottom:34px}
.footer-grid h3{margin:0 0 .8rem;font-size:.98rem;letter-spacing:.5px;text-transform:uppercase;font-weight:600}
.footer-links{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.footer-links a{color:#fff;text-decoration:none;font-size:.85rem;opacity:.85}
.footer-links a:hover,.footer-links a:focus-visible{opacity:1;color:#fff}
.footer-bottom{padding:16px 0;border-top:1px solid rgba(255,255,255,.12);text-align:center;font-size:.7rem;opacity:.82;margin-top:40px}
/* Cookie consent */
.cookie-consent{position:fixed;inset:auto 0 0 0;z-index:1200;display:flex;justify-content:center;pointer-events:none}
.cookie-consent .cookie-inner{width:clamp(280px,900px,100%);margin:0 20px 18px;background:var(--bg-soft);border:1px solid var(--border);border-radius:22px;padding:26px 28px 24px;box-shadow:0 18px 50px -15px rgba(0,0,0,.55);backdrop-filter:blur(12px);display:flex;flex-direction:column;gap:16px;pointer-events:auto}
[data-theme=light] .cookie-consent .cookie-inner{background:#fff}
.cookie-consent p{margin:0;font-size:.9rem;line-height:1.5;color:var(--text-soft)}
.cookie-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.cookie-actions button{border:0;cursor:pointer;font-weight:600;font-size:.8rem;padding:11px 18px;border-radius:12px;transition:var(--transition);letter-spacing:.3px}
.cookie-actions [data-cookie-accept]{background:var(--brand);color:#fff}
.cookie-actions [data-cookie-accept]:hover{background:var(--brand-dark)}
.cookie-actions [data-cookie-decline]{background:var(--bg-alt);color:var(--text);border:1px solid var(--border)}
.cookie-actions [data-cookie-decline]:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.cookie-actions a{font-size:.7rem;opacity:.75;text-decoration:underline;color:var(--text-soft)}
.cookie-actions a:hover{opacity:1;color:var(--brand)}
/* Rating badge */
.rating-badge{display:inline-flex;align-items:center;gap:.4rem;background:linear-gradient(145deg,#ff7b54,#ffaf2d);color:#fff;padding:.4rem .85rem;border-radius:999px;font-weight:600;font-size:.68rem;letter-spacing:.5px;box-shadow:0 4px 12px -2px rgba(0,0,0,.35)}
.rating-badge span{font-weight:500;opacity:.95}
/* Stars (rating) */
.stars{display:inline-flex;align-items:center;gap:2px;line-height:1}
.stars .star{width:14px;height:14px;fill:#fff;filter:drop-shadow(0 0 2px rgba(0,0,0,.4))}
[data-theme=light] .stars .star{filter:drop-shadow(0 0 1px rgba(0,0,0,.3))}
.stars .star.dim{opacity:.35}
/* Hero badges */
.hero-badges{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:2rem}
/* Section intro */
.section-intro{font-size:1.1rem;color:var(--text-soft);max-width:800px;margin:0 auto 2.5rem;text-align:center}
/* Service stats */
.service-stats{display:flex;gap:.8rem;margin:.8rem 0;flex-wrap:wrap}
.stat{font-size:.75rem;background:rgba(255,255,255,.1);color:#fff;padding:.35rem .7rem;border-radius:20px;font-weight:600}
[data-theme=light] .stat{background:rgba(0,0,0,.08);color:var(--text)}
/* Benefits section */
.benefits{background:var(--bg-alt);overflow:hidden;position:relative}
.benefits:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 50%,rgba(255,123,84,.08),transparent 60%);pointer-events:none}
.benefit-card{text-align:center;padding:2rem 1.5rem;background:var(--bg-soft);border:1px solid var(--border);border-radius:24px;transition:var(--transition)}
.benefit-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-hover)}
.benefit-icon{font-size:2.5rem;margin-bottom:1rem;display:block}
.benefit-card h3{margin:0 0 1rem;font-size:1.2rem}
.benefit-card p{margin:0;color:var(--text-soft);line-height:1.6}
/* Areas section */
.areas{padding:80px 0}
.areas-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.8rem;margin-top:2rem}
.area-card{background:linear-gradient(135deg,var(--brand),var(--brand-alt));color:#fff;padding:2rem 1.5rem;border-radius:20px;text-align:center;position:relative;overflow:hidden}
.area-card:before{content:"";position:absolute;inset:0;background:linear-gradient(45deg,rgba(255,255,255,.1),transparent 60%);opacity:0;transition:var(--transition)}
.area-card:hover:before{opacity:1}
.area-card h3{margin:0 0 .8rem;font-size:1.15rem}
.area-card p{margin:0;opacity:.9;font-size:.9rem}
/* FAQ section */
.faq{background:var(--bg-alt)}
.faq-grid{display:grid;gap:1.2rem;max-width:900px;margin:0 auto}
.faq-item{background:var(--bg-soft);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.faq-item summary{padding:1.5rem 2rem;cursor:pointer;font-weight:600;font-size:1.1rem;background:linear-gradient(135deg,rgba(255,123,84,.08),rgba(255,175,45,.05));transition:var(--transition);list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:after{content:"⌄";float:right;font-size:1.4rem;transition:var(--transition)}
.faq-item[open] summary:after{transform:rotate(180deg)}
.faq-item summary:hover{background:linear-gradient(135deg,rgba(255,123,84,.12),rgba(255,175,45,.08))}
.faq-item p{padding:0 2rem 1.5rem;margin:0;line-height:1.6;color:var(--text-soft)}
.faq-item p strong{color:var(--brand);font-weight:600}
/* Testimonials */
.testimonials{background:var(--bg-soft)}
.testimonials-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-bottom:3rem}
.testimonial-card{background:var(--bg);border:1px solid var(--border);border-radius:20px;padding:2rem;margin:0;position:relative;transition:var(--transition)}
.testimonial-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover)}
.testimonial-card blockquote{margin:0 0 1.5rem;padding:0}
.testimonial-card p{font-style:italic;line-height:1.6;color:var(--text);margin:0}
.testimonial-author{display:flex;flex-direction:column;gap:.3rem}
.testimonial-author .location{font-size:.85rem;color:var(--text-soft);opacity:.8}
.rating-summary{text-align:center;background:linear-gradient(135deg,var(--brand),var(--brand-alt));color:#fff;padding:2.5rem;border-radius:24px;max-width:400px;margin:0 auto}
.rating-big .rating-number{font-size:3rem;font-weight:700;display:block;line-height:1}
.rating-big .rating-stars{margin:1rem 0;font-size:1.5rem}
.rating-big .rating-count{font-size:.9rem;opacity:.9}
/* CTA features */
.cta-features{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:2rem}
.cta-features .feature{font-size:.85rem;background:rgba(255,255,255,.15);color:#fff;padding:.5rem 1rem;border-radius:20px;font-weight:500}
[data-theme=light] .cta-features .feature{background:rgba(0,0,0,.08);color:var(--text)}
/* Steps list */
ol.steps{counter-reset:st;list-style:none;margin:0;padding:0;display:grid;gap:1.15rem}
ol.steps li{position:relative;padding:1rem 1.2rem 1rem 3.4rem;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:20px;line-height:1.45}
[data-theme=light] ol.steps li{background:#fff;border-color:rgba(0,0,0,.07)}
ol.steps li:before{counter-increment:st;content:counter(st);position:absolute;left:1rem;top:50%;translate:0 -50%;width:2.1rem;height:2.1rem;border-radius:50%;background:linear-gradient(140deg,var(--brand),var(--brand-alt));display:grid;place-items:center;font-weight:600;font-size:.88rem;color:#fff;box-shadow:0 4px 12px -3px rgba(0,0,0,.45)}
/* Animations */
@media (prefers-reduced-motion:no-preference){.fade-in-up{opacity:0;transform:translateY(22px);animation:.85s fadeUp ease forwards}.hero h1,.hero p{animation:.9s fadeUp both}}@keyframes fadeUp{to{opacity:1;transform:none}}
.will-animate{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
/* Utility */
.pill{display:inline-flex;align-items:center;gap:.5ch;padding:.45rem .85rem;border-radius:999px;background:linear-gradient(145deg,#ff7b54,#ffaf2d);color:#fff;font-size:.62rem;font-weight:600;letter-spacing:.6px;text-transform:uppercase}
/* Responsive tweaks & performance */
@media (max-width:880px){.hero{padding:130px 0 110px}}
@media (max-width:680px){.hero{padding:110px 0 95px}.hero h1{font-size:2.2rem}.services-grid{gap:1.45rem}.benefit-card,.testimonial-card{padding:1.5rem}.areas-grid{grid-template-columns:1fr}}
@media (max-width:500px){.hero h1{font-size:1.95rem}.hero-badges{flex-direction:column;align-items:center}.faq-item summary,.faq-item p{padding-left:1.5rem;padding-right:1.5rem}}
/* Performance optimizations */
*{will-change:auto}
.card:hover,.btn:hover,.benefit-card:hover,.testimonial-card:hover{will-change:transform}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* Print styles */
@media print{.floating-cta,.nav-toggle,.theme-toggle{display:none!important}header{position:static!important}}