/* roboto-300 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/roboto-v30-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/roboto-v30-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v30-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v30-latin-300.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v30-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v30-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/roboto-v30-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v30-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}


body { padding: 0; margin: 0; background: #fff; font-family: 'Roboto', sans-serif; font-size: 19px; line-height: 29px; font-weight: 300; color: #000; text-decoration: none; }
h1 { padding: 0; margin: 0; font-family: 'Roboto', sans-serif; font-size: 32px; line-height: 42px; font-weight: 500; color: #bc6a3b; text-transform: uppercase; }
h2 { padding: 0; margin: 0 0 70px 0; font-family: 'Roboto', sans-serif; font-size: 24px; line-height: 34px; font-weight: 300; color: #bc6a3b; }
h3 { padding: 0; margin: 0 0 30px 0; font-family: 'Roboto', sans-serif; font-size: 22px; line-height: 34px; font-weight: 500; color: #bc6a3b; text-transform: uppercase; }
h4 { padding: 0; margin: 0 0 30px 0; font-family: 'Roboto', sans-serif; font-size: 21px; line-height: 29px; font-weight: 500; color: #bc6a3b; }

a { color: #bc6a3b; text-decoration: underline; }
p { padding: 0; margin: 0 0 30px 0; }
em { font-family: 'Roboto', sans-serif; font-style: italic; font-weight: 300; }
strong { font-weight: 500; }
hr { height: 2px; width: 100px; border: none; margin: 50px auto; border-bottom: 2px solid #bc6a3b; }
.clearer { clear: both; }
.contentclearer { clear: both; height: 60px; }
#mobilebutton { display: none; }

#logo { margin: 50px 0 100px 0; text-align: center; }

#content { width: 1100px; padding: 0; margin: 70px auto 155px auto; text-align: center; }
.home { width: 800px!important; padding: 0 150px!important; }
.column { float: left; width: 46%; margin: 20px 8% 0 0; text-align: left; }
.column span { display: inline-block; width: 80px; font-weight: 500; }
.last { margin: 20px 0 0 0; }

#content img { max-width: 100%; height: auto; }

#footer { width: 1100px; padding: 0; margin: 0 auto 60px auto; text-align: left; }
#footer .column { width: 40%; margin: 0; }
#footer .middle { width: 38%; }
#footer .last { width: 22%; margin: 0; }
#footer .last span { width: 50px; text-transform: uppercase; }

#bottom { width: 100%; padding: 0; margin: 0 0 80px 0; text-align: center; }


/* Responsive */


/* 1. Für Laptops und große Tablets (bis 1100px) */
@media only screen and (max-width: 1100px) {
    #content { width: 100%; margin: 70px 0 100px 0; }
    .home { width: 90% !important; padding: 0 5% !important; }
    
    /* FIX: Sorgt dafür, dass Impressum/Datenschutz 2-spaltig bleiben und Abstand haben */
    #content .column { 
        float: left; 
        width: 42.5%; 
        margin: 20px 0 0 5%; /* 5% Abstand nach links */
    }
    
    #content .last { 
        margin-right: 5%; 
    }

    /* Footer bleibt optimiert (flexibel) */
    #footer { 
        width: 90%; 
        margin: 0 5% 60px 5%; 
        display: flex; 
        flex-wrap: wrap; 
        justify-content: space-between; 
    }
    
    #footer .column { 
        float: none; /* Deaktiviert Float nur im Footer für Flexbox */
        width: 45%; 
        margin: 0 0 30px 0; 
    }
    
    #footer .last { width: 100%; }

    #mobilebutton { display: block; position: fixed; z-index: 80; bottom: 0; width: 100%; background: #bc6a3b; text-align: center; padding: 10px 0 0 0; }
}

/* 2. Für Smartphones (bis 780px) */
@media only screen and (max-width: 780px) {
    h1 { font-size: 28px; line-height: 34px; }
    h2 { margin: 0 0 40px 0; font-size: 25px; line-height: 31px; }
    #content { margin: 50px 0 70px 0; }
    
    /* Hier rutschen auch die Textspalten untereinander */
    #content .column { 
        float: none; 
        width: 90%; 
        margin: 20px 5% 0 5%; 
    }
    
    #footer .column, #footer .middle, #footer .last { 
        width: 100%; 
        margin: 0 0 30px 0; 
    }

    #content img {
        width: 100%;
        height: auto;
        max-width: 400px;
        margin: 0 auto;
        display: block;
    }