/* Trädvård Malmö - Stilmall för kronreducering och trädbeskärning */
/* Komprimerad CSS för Carl Gustafs väg */
:root{--grön-bark:#2d4a2b;--ljus-löv:#8fbc8f;--gul-blomma:#ffd700;--beige-stam:#f5deb3;--vit-snö:#ffffff;--skugga:rgba(45,74,43,0.2)}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Georgia',serif;background:linear-gradient(135deg,var(--vit-snö) 0%,var(--beige-stam) 100%);color:#333;line-height:1.6}

/* Malmö-header med säsongsanpassning */
.malmö-header{background:linear-gradient(180deg,var(--grön-bark),var(--ljus-löv));padding:15px 0;position:sticky;top:0;z-index:999;box-shadow:0 2px 5px var(--skugga)}
.carl-gustafs-nav{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:0 20px}

/* Trädlogotyp med CSS */
.träd-logo{display:flex;align-items:center;text-decoration:none;color:var(--vit-snö)}
.logo-ikon{width:50px;height:50px;position:relative;margin-right:15px}
.krona{width:35px;height:35px;background:radial-gradient(circle,#4a7c59,#2d5016);border-radius:50% 40% 50% 40%;position:absolute;top:0;left:7px;box-shadow:inset 2px 2px 5px rgba(0,0,0,0.3)}
.stam{width:8px;height:25px;background:linear-gradient(180deg,#8b4513,#654321);position:absolute;bottom:0;left:21px;clip-path:polygon(20% 0%,80% 0%,100% 100%,0% 100%)}
.logo-text{font-size:24px;font-weight:bold;text-shadow:2px 2px 4px rgba(0,0,0,0.3)}

/* Navigation desktop */
.skåne-meny{display:flex;list-style:none;gap:25px}
.skåne-meny a{color:var(--vit-snö);text-decoration:none;font-size:16px;transition:all 0.3s;padding:5px 10px;border-radius:4px}
.skåne-meny a:hover{background:rgba(255,255,255,0.1);transform:translateY(-2px)}

/* Mobil menyknapp */
.mobil-knapp{display:none;background:none;border:none;cursor:pointer;padding:5px}
.hamburgare{display:block;width:30px;height:3px;background:var(--vit-snö);margin:6px 0;transition:0.3s}

/* CTA-knapp i header */
.offert-knapp-header{background:linear-gradient(45deg,#4169e1,#1e90ff);color:white;padding:12px 25px;border-radius:25px;text-decoration:none;font-weight:bold;box-shadow:0 4px 6px rgba(0,0,0,0.2);transition:all 0.3s;animation:puls 2s infinite}
@keyframes puls{0%{transform:scale(1)}50%{transform:scale(1.05)}100%{transform:scale(1)}}
.offert-knapp-header:hover{transform:translateY(-3px);box-shadow:0 6px 12px rgba(0,0,0,0.3)}

/* Huvudinnehåll */
.vellinge-container{max-width:1200px;margin:0 auto;padding:20px}

/* Hero-sektion */
.hero-beskärning{background:linear-gradient(rgba(45,74,43,0.7),rgba(45,74,43,0.7)),url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 400"><rect fill="%23f5deb3" width="1200" height="400"/><circle cx="100" cy="100" r="80" fill="%234a7c59" opacity="0.3"/><circle cx="300" cy="200" r="60" fill="%238fbc8f" opacity="0.4"/><circle cx="500" cy="150" r="70" fill="%234a7c59" opacity="0.3"/><circle cx="700" cy="250" r="90" fill="%238fbc8f" opacity="0.4"/><circle cx="900" cy="100" r="65" fill="%234a7c59" opacity="0.3"/><circle cx="1100" cy="200" r="75" fill="%238fbc8f" opacity="0.4"/></svg>');padding:60px 20px;text-align:center;color:var(--vit-snö);border-radius:10px;margin:20px 0}
.hero-beskärning h1{font-size:clamp(28px,5vw,48px);margin-bottom:20px;text-shadow:2px 2px 4px rgba(0,0,0,0.5)}

/* Säsongsmeddelande */
.säsong-ruta{background:linear-gradient(135deg,var(--gul-blomma),#ffed4e);padding:20px;border-radius:10px;margin:20px 0;box-shadow:0 3px 10px var(--skugga);position:relative;overflow:hidden}
.säsong-ruta::before{content:'';position:absolute;top:-50%;right:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,0.3) 0%,transparent 70%);animation:rotera 20s linear infinite}
@keyframes rotera{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.tid-meddelande{font-style:italic;color:var(--grön-bark);font-weight:bold}

/* Inforutor och kort */
.träd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:25px;margin:30px 0}
.info-kort{background:var(--vit-snö);border-radius:10px;padding:25px;box-shadow:0 3px 10px var(--skugga);transition:all 0.3s;border-top:4px solid var(--grön-bark)}
.info-kort:hover{transform:translateY(-5px);box-shadow:0 5px 20px var(--skugga)}
.info-kort h3{color:var(--grön-bark);margin-bottom:15px;font-size:20px}
.info-kort p{color:#555;line-height:1.7}

/* Tabeller */
.tjänst-tabell{width:100%;border-collapse:collapse;margin:25px 0;background:var(--vit-snö);box-shadow:0 2px 8px var(--skugga);border-radius:8px;overflow:hidden}
.tjänst-tabell th{background:var(--grön-bark);color:var(--vit-snö);padding:15px;text-align:left;font-weight:bold}
.tjänst-tabell td{padding:12px 15px;border-bottom:1px solid #e0e0e0}
.tjänst-tabell tr:nth-child(even){background:#f9f9f9}
.tjänst-tabell tr:hover{background:var(--beige-stam)}

/* Citat och höjdpunkter */
.citat-box{background:linear-gradient(135deg,#f0f8ff,#e6f3ff);border-left:5px solid var(--grön-bark);padding:20px 25px;margin:25px 0;border-radius:0 8px 8px 0;position:relative}
.citat-box::before{content:'"';font-size:60px;color:var(--grön-bark);opacity:0.2;position:absolute;top:-10px;left:10px}

/* Accordion för FAQ */
.faq-container{margin:30px 0}
.faq-item{background:var(--vit-snö);margin:10px 0;border-radius:8px;box-shadow:0 2px 5px var(--skugga);overflow:hidden}
.faq-fråga{background:linear-gradient(90deg,var(--beige-stam),#faf0e6);padding:20px;cursor:pointer;position:relative;font-weight:bold;color:var(--grön-bark)}
.faq-fråga::after{content:'+';position:absolute;right:20px;font-size:24px;transition:0.3s}
.faq-fråga.aktiv::after{transform:rotate(45deg)}
.faq-svar{max-height:0;overflow:hidden;transition:max-height 0.3s;padding:0 20px}
.faq-svar.öppen{max-height:500px;padding:20px}

/* CTA-knappar olika stilar */
.cta-primär{display:inline-block;background:linear-gradient(45deg,#4169e1,#1e90ff);color:white;padding:15px 35px;border-radius:30px;text-decoration:none;font-weight:bold;margin:10px 5px;box-shadow:0 4px 15px rgba(65,105,225,0.3);transition:all 0.3s}
.cta-sekundär{display:inline-block;background:linear-gradient(45deg,var(--grön-bark),var(--ljus-löv));color:white;padding:15px 35px;border-radius:30px;text-decoration:none;font-weight:bold;margin:10px 5px;box-shadow:0 4px 15px var(--skugga);transition:all 0.3s}
.cta-primär:hover,.cta-sekundär:hover{transform:scale(1.05) translateY(-3px);box-shadow:0 6px 20px rgba(0,0,0,0.25)}

/* Formulär */
.offert-formulär{background:var(--vit-snö);padding:30px;border-radius:10px;box-shadow:0 5px 20px var(--skugga);max-width:500px;margin:20px auto}
.form-grupp{margin-bottom:20px}
.form-grupp label{display:block;color:var(--grön-bark);font-weight:bold;margin-bottom:5px}
.form-grupp input,.form-grupp textarea{width:100%;padding:12px;border:2px solid #e0e0e0;border-radius:5px;font-size:16px;transition:border 0.3s}
.form-grupp input:focus,.form-grupp textarea:focus{outline:none;border-color:var(--grön-bark);box-shadow:0 0 5px rgba(45,74,43,0.2)}
.form-knapp{background:linear-gradient(45deg,#4169e1,#1e90ff);color:white;padding:15px 40px;border:none;border-radius:30px;font-size:18px;font-weight:bold;cursor:pointer;width:100%;transition:all 0.3s}
.form-knapp:hover{transform:translateY(-2px);box-shadow:0 5px 15px rgba(65,105,225,0.4)}

/* Spam-skydd */
.spam-skydd{background:#f9f9f9;padding:10px;border-radius:5px;margin:15px 0}
.spam-skydd label{font-size:14px;color:#666}

/* Footer */
.malmö-footer{background:var(--grön-bark);color:var(--vit-snö);padding:40px 0 20px;margin-top:50px}
.footer-innehåll{max-width:1200px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:30px}
.footer-sektion h4{margin-bottom:15px;color:var(--gul-blomma)}
.footer-sektion ul{list-style:none}
.footer-sektion a{color:var(--vit-snö);text-decoration:none;line-height:1.8;transition:color 0.3s}
.footer-sektion a:hover{color:var(--gul-blomma)}
.footer-botten{text-align:center;margin-top:30px;padding-top:20px;border-top:1px solid rgba(255,255,255,0.2)}

/* Responsiv design */
@media(max-width:768px){
.skåne-meny{display:none;position:absolute;top:100%;left:0;right:0;background:var(--grön-bark);flex-direction:column;padding:20px;box-shadow:0 5px 10px var(--skugga)}
.skåne-meny.aktiv{display:flex}
.mobil-knapp{display:block}
.träd-grid{grid-template-columns:1fr}
.hero-beskärning{padding:40px 15px}
.footer-innehåll{grid-template-columns:1fr}
}

/* Animationer */
.fade-in{animation:fadeIn 0.8s ease-in}
@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* Specialeffekter */
.markera{background:linear-gradient(180deg,transparent 60%,var(--gul-blomma) 60%);padding:2px 5px}
.fetstil{font-weight:bold;color:var(--grön-bark)}
.kursiv-text{font-style:italic;color:#666}