:root{
--gruen:#2f6f3e;
--gruen-hell:#4c9a5f;
--braun:#8b5a2b;
--braun-dunkel:#5c3a1e;
--bg:#f5f3ee;
}

html{scroll-behavior:smooth}

body{
font-family:system-ui,-apple-system,sans-serif;
background:var(--bg);
}

/* ===== NAVBAR ===== */
.navbar{
background:#ffffff!important;
box-shadow:0 2px 8px rgba(0,0,0,0.08);
}

.navbar .nav-link{
color:var(--braun-dunkel)!important;
font-weight:500;
}

.navbar .nav-link:hover{
color:var(--gruen)!important;
}

.logo{
height:75px;
}

/* ===== HERO ===== */
.hero{
background:linear-gradient(135deg,var(--braun-dunkel),var(--gruen));
color:white;
padding:160px 0 120px;
}

.hero h1{
color:white;
margin-bottom:60px;
}

/* HERO BOXEN */
.hero-boxes{
margin-top:30px;
}

.hero-card{
background:rgba(255,255,255,0.95);
color:var(--braun-dunkel);
padding:25px;
border-radius:12px;
box-shadow:0 6px 20px rgba(0,0,0,0.15);
transition:.3s;
height:100%;
}

.hero-card:hover{
transform:translateY(-6px);
box-shadow:0 12px 30px rgba(0,0,0,0.25);
}

.hero-card h4{
font-weight:600;
margin-bottom:10px;
}

/* ===== SECTIONS ===== */
.section{padding:80px 0}
h1,h2,h3,h4{color:var(--braun-dunkel)}

.bg-light{
background:#efe9dd!important;
}

/* BUTTON */
.btn-primary{
background:var(--gruen);
border:none;
}

.btn-primary:hover{
background:var(--gruen-hell);
}

/* PHONE */
.phone{
font-size:1.4rem;
font-weight:600;
margin-top:25px;
}

/* FOOTER */
footer{
background:var(--braun-dunkel);
color:#ddd;
padding:40px 0;
}

/* MOBILE */
@media(max-width:768px){
.logo{height:55px;}
.hero{padding:140px 0 90px;}
}

.example-card{
background:#ffffff;
border-radius:12px;
padding:25px;
box-shadow:0 6px 20px rgba(0,0,0,0.08);
height:100%;
border-left:6px solid var(--gruen);
}

.example-card h4{
margin-bottom:10px;
font-weight:700;
}

.example-card .badge{
background:var(--gruen);
}

/* ===== REFERENZBILDER ===== */
.example-img{
width:100%;
height:260px;          /* einheitliche Höhe */
object-fit:cover;      /* schneidet sauber zu */
border-radius:10px;
box-shadow:0 4px 12px rgba(0,0,0,0.15);
}

/* Mobile */
@media(max-width:768px){
.example-img{
height:200px;
}
}
/* ===== ÜBER MICH (hübscher) ===== */
.about-wrap{
position:relative;
background:linear-gradient(180deg, #ffffff 0%, #fbfaf7 100%);
border-radius:18px;
padding:42px;
box-shadow:0 14px 40px rgba(0,0,0,0.10);
overflow:hidden;
border:1px solid rgba(0,0,0,0.05);
}

.about-wrap::before{
content:"";
position:absolute;
inset:-120px -120px auto auto;
width:260px;
height:260px;
background:radial-gradient(circle, rgba(47,111,62,0.18), transparent 60%);
transform:rotate(15deg);
}

.about-wrap::after{
content:"";
position:absolute;
inset:auto auto -140px -140px;
width:320px;
height:320px;
background:radial-gradient(circle, rgba(92,58,30,0.16), transparent 60%);
}

.about-img{
width:100%;
max-width:360px;
height:360px;
object-fit:cover;
border-radius:18px;
box-shadow:0 18px 45px rgba(0,0,0,0.18);
border:6px solid rgba(255,255,255,0.85);
}

.about-badges{
display:flex;
flex-wrap:wrap;
gap:10px;
margin:18px 0 18px;
}

.about-badge{
display:inline-flex;
align-items:center;
gap:8px;
background:#efe9dd;
color:var(--braun-dunkel);
padding:10px 14px;
border-radius:999px;
font-size:.95rem;
font-weight:700;
transition:.2s;
border:1px solid rgba(0,0,0,0.06);
}

.about-badge:hover{
transform:translateY(-2px);
box-shadow:0 10px 20px rgba(0,0,0,0.08);
}

.about-stats{
display:flex;
flex-wrap:wrap;
gap:14px;
margin:18px 0 8px;
}

.stat{
background:#ffffff;
border-radius:14px;
padding:14px 16px;
box-shadow:0 10px 26px rgba(0,0,0,0.08);
border:1px solid rgba(0,0,0,0.05);
min-width:170px;
}

.stat strong{
display:block;
font-size:1.05rem;
color:var(--braun-dunkel);
}

.stat span{
display:block;
font-size:.95rem;
color:rgba(92,58,30,0.75);
}

.about-quote{
margin-top:18px;
padding:16px 18px;
border-radius:14px;
background:rgba(47,111,62,0.08);
border:1px solid rgba(47,111,62,0.18);
color:var(--braun-dunkel);
font-weight:600;
}

.contact-row{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:18px;
}

.btn-contact{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
padding:12px 16px;
border-radius:14px;
text-decoration:none;
font-weight:800;
line-height:1;
min-height:48px;
}

.btn-phone{
background:var(--gruen);
color:#fff;
box-shadow:0 10px 22px rgba(47,111,62,0.25);
}

.btn-phone:hover{
background:var(--gruen-hell);
color:#fff;
}

.btn-mail{
background:#ffffff;
border:2px solid var(--gruen);
color:var(--gruen);
}

.btn-mail:hover{
background:var(--gruen);
color:#fff;
}

/* Mobile Feinschliff */
@media(max-width:768px){
.about-wrap{padding:28px;}
.about-img{height:300px;}
.stat{min-width:100%;}
}