/* Fasadmålning Malmö - Stilmall */
:root{--vit:#ffffff;--gul:#FFB700;--orange:#FF6B35;--beige:#F5E6D3;--bla:#0066CC;--grå:#666;--mork:#333}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Helvetica Neue',Arial,sans-serif;line-height:1.6;color:var(--mork);background:var(--vit)}

/* Malmö-typografi */
h1{font-size:2.2rem;font-weight:700;margin-bottom:1.2rem;color:var(--mork);font-family:Georgia,serif}
h2{font-size:1.8rem;margin:1.5rem 0 1rem;color:var(--mork);border-left:4px solid var(--orange);padding-left:12px}
h3{font-size:1.3rem;margin:1rem 0 0.5rem;color:var(--grå)}
p{margin-bottom:1rem}

/* Dockgatan-container */
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* Header Skåne-stil */
header{background:linear-gradient(135deg,var(--vit) 0%,var(--beige) 100%);border-bottom:3px solid var(--gul);position:sticky;top:0;z-index:1000;box-shadow:0 2px 5px rgba(0,0,0,0.1)}
.header-inner{display:flex;justify-content:space-between;align-items:center;padding:15px 0}

/* Malmö-logo */
.logo{display:flex;align-items:center;text-decoration:none;color:var(--mork)}
.logo-icon{width:50px;height:50px;background:var(--orange);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-right:10px;position:relative;overflow:hidden}
.logo-icon::before{content:'';position:absolute;width:35px;height:20px;background:var(--gul);transform:rotate(-15deg);top:15px}
.logo-icon::after{content:'';position:absolute;width:4px;height:30px;background:var(--mork);right:8px;bottom:-5px}
.logo-text{font-size:1.3rem;font-weight:bold}

/* Skånsk navigation */
nav ul{list-style:none;display:flex;gap:25px}
nav a{text-decoration:none;color:var(--mork);font-weight:500;transition:color 0.3s}
nav a:hover{color:var(--orange)}

/* Mobil-meny Malmö */
.mobile-menu{display:none;background:none;border:none;cursor:pointer;padding:5px}
.mobile-menu span{display:block;width:28px;height:3px;background:var(--mork);margin:5px 0;transition:0.3s}
.mobile-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--vit);box-shadow:0 5px 10px rgba(0,0,0,0.1)}
.mobile-nav.active{display:block}
.mobile-nav ul{flex-direction:column;padding:20px}
.mobile-nav a{display:block;padding:10px 0}

/* CTA-knappar Öresundsstil */
.cta-btn{background:var(--bla);color:var(--vit)!important;padding:12px 25px;text-decoration:none;border-radius:5px;display:inline-block;font-weight:bold;transition:all 0.3s;border:none;cursor:pointer;font-size:1rem}
.cta-btn:hover{background:#0052a3;transform:translateY(-2px);box-shadow:0 5px 15px rgba(0,102,204,0.3)}
.header-cta{background:var(--orange);margin-left:20px}
.header-cta:hover{background:#ff5722}

/* Malmö-hero */
.hero{background:linear-gradient(135deg,var(--beige) 0%,var(--vit) 100%);padding:60px 0;text-align:center}
.hero h1{font-size:2.8rem;margin-bottom:20px}
.hero-subtitle{font-size:1.2rem;color:var(--grå);margin-bottom:30px}

/* Inforutor Skåne-design */
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:25px;margin:40px 0}
.info-box{background:var(--vit);border:1px solid #e0e0e0;border-radius:8px;padding:25px;transition:all 0.3s;position:relative;overflow:hidden}
.info-box::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;background:var(--orange);transform:scaleY(0);transition:transform 0.3s;transform-origin:top}
.info-box:hover{box-shadow:0 5px 20px rgba(0,0,0,0.1);transform:translateY(-3px)}
.info-box:hover::before{transform:scaleY(1)}
.info-box h3{color:var(--orange);margin-bottom:10px}

/* Säsongsektion */
.season-section{background:linear-gradient(to bottom,var(--beige),var(--vit));padding:40px 0;margin:40px 0;border-radius:10px}
.season-box{display:none;animation:fadeIn 0.5s}
.season-box.active{display:block}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* Tabeller Malmö-stil */
table{width:100%;border-collapse:collapse;margin:20px 0;background:var(--vit);box-shadow:0 2px 5px rgba(0,0,0,0.05)}
table thead{background:var(--beige)}
table th,table td{padding:12px;text-align:left;border-bottom:1px solid #e0e0e0}
table tr:hover{background:rgba(255,183,0,0.05)}

/* Malmö-formulär */
.form-section{background:var(--beige);padding:40px 20px;border-radius:10px;margin:30px 0}
.form-intro{background:var(--vit);padding:20px;border-left:4px solid var(--orange);margin-bottom:20px}
form{background:var(--vit);padding:30px;border-radius:8px;box-shadow:0 3px 10px rgba(0,0,0,0.1)}
.form-group{margin-bottom:20px}
label{display:block;font-weight:bold;margin-bottom:5px;color:var(--mork)}
input,textarea{width:100%;padding:10px;border:2px solid #ddd;border-radius:5px;font-size:1rem;transition:border 0.3s}
input:focus,textarea:focus{outline:none;border-color:var(--orange)}
textarea{resize:vertical;min-height:120px}
.spam-check{background:#f9f9f9;padding:15px;border-radius:5px;margin:20px 0}

/* Citat och specialblock */
blockquote{border-left:4px solid var(--gul);padding:15px 20px;margin:20px 0;background:rgba(245,230,211,0.3);font-style:italic}
cite{display:block;text-align:right;margin-top:10px;color:var(--grå)}
aside{background:linear-gradient(to right,rgba(255,183,0,0.1),rgba(255,107,53,0.1));padding:20px;border-radius:8px;margin:20px 0}
details{background:var(--vit);border:1px solid #ddd;border-radius:5px;padding:10px;margin:15px 0}
summary{cursor:pointer;font-weight:bold;padding:5px}
summary:hover{color:var(--orange)}

/* Footer Malmö */
footer{background:var(--mork);color:var(--vit);padding:40px 0 20px;margin-top:60px}
.footer-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:30px;margin-bottom:20px}
.footer-section h4{color:var(--gul);margin-bottom:15px}
.footer-section ul{list-style:none}
.footer-section a{color:#ccc;text-decoration:none;line-height:1.8}
.footer-section a:hover{color:var(--gul)}
.footer-bottom{text-align:center;padding-top:20px;border-top:1px solid #555;color:#999}

/* CSS-bilder för rubriker */
.fasad-tra{width:100px;height:60px;background:linear-gradient(to bottom,#8B4513,#D2691E);position:relative;margin:10px auto}
.fasad-tra::before{content:'';position:absolute;width:100%;height:2px;background:#654321;top:20px}
.fasad-tra::after{content:'';position:absolute;width:100%;height:2px;background:#654321;bottom:20px}

.fasad-tegel{width:100px;height:60px;background:#B22222;position:relative;margin:10px auto;display:grid;grid-template-columns:repeat(4,1fr);grid-gap:2px;padding:2px;background:#666}
.fasad-tegel::before{content:'';position:absolute;width:100%;height:100%;background:repeating-linear-gradient(to right,#B22222 0,#B22222 22px,#666 22px,#666 25px)}

.fasad-puts{width:100px;height:60px;background:radial-gradient(circle at 20% 50%,#F5DEB3,#DEB887);border-radius:3px;margin:10px auto;box-shadow:inset 0 0 10px rgba(0,0,0,0.1)}

.fasad-plat{width:100px;height:60px;background:linear-gradient(135deg,#C0C0C0,#808080);position:relative;margin:10px auto;box-shadow:0 2px 5px rgba(0,0,0,0.2)}
.fasad-plat::after{content:'';position:absolute;width:2px;height:100%;background:#606060;right:30px}

.fasad-skiva{width:100px;height:60px;background:#F0E68C;border:2px solid #BDB76B;margin:10px auto;position:relative}
.fasad-skiva::before{content:'';position:absolute;width:50%;height:1px;background:#BDB76B;top:50%;left:25%}

/* Responsiv Malmö-design */
@media(max-width:768px){
h1{font-size:1.8rem}
h2{font-size:1.5rem}
.mobile-menu{display:block}
nav{display:none}
.header-cta{display:none}
.mobile-cta{display:block;width:100%;margin-top:10px;text-align:center}
.info-grid{grid-template-columns:1fr}
table{font-size:0.9rem}
.footer-content{grid-template-columns:1fr}
}