@charset "UTF-8";
/* CSS Document 
Baggerbetrieb Bemerl
*/

/* Webfonts-Einbindung */

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');


/* Farbwerte
 
Rot (Primärfarbe)
rgba(192,57,43,1)
#C0392B

Dunkelgrau (Akzentfarbe)
rgba(68,68,68,1)
#444444

Hellgrau
rgba(239,239,239,1)
#EFEFEF

Beige (Hintergrundfarbe)
rgba(245,245,220,1)
#F5F5DC




*/


/* Reset * * * * * * * * */
*{
margin: 0;
padding: 0;
-mozbox-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

/* Raster */

.wrapper{
max-width: 1250px;
padding: 0 25px;
margin: 0 auto;
}

.container {display: grid; grid-template-columns: repeat(12, 1fr); gap: 40px;}

.one-third {
  grid-column: span 4; /* 4/12 */
}

.one-half {
  grid-column: span 6; /* 6/12 */
}

.one-quarter {
  grid-column: span 3; /* 3/12 */
}

.three-quarters {
  grid-column: span 9; /* 9/12 */
}

.one-twelve {
  grid-column: span 1; /* 1/12 */
}
.eleven-twelve {
  grid-column: span 11; /* 11/12 */
}


/* Typo */

h1, h2, h3, h4, h5, h6{
font-family: "Roboto", serif;
font-weight: 600;    
margin-bottom: 20px;
color: rgba(68,68,68,1);
line-height: 1.2;
}

h1{     
font-size: 3.000rem;   
margin-bottom: 45px;    
text-align: center;
} 
 
h2{     
font-size: 2.250rem;   
} 
 
h3{    
font-size: 1.75rem;
font-weight: 600;
text-align: center;
}


/* Links */
a {
    color: rgba(192,57,43,1);
    text-decoration: none;
}

a:hover {
    color: rgba(192,57,43,1); text-decoration: underline;
}

p {margin: 0 0 15px;}

em {font-weight: 600;}

/* Allgemeine Klassen */

body{background: rgba(239,239,239,1); font: 400 1.250rem/1.6 "Roboto", serif; color: rgba(68,68,68,1);}
img{max-width: 100%;}
section{padding: 100px 0;}


/* Header */

header {background: rgba(68,68,68,1); padding: 20px 0;}
.logo{max-height: 50px;}


/* Meta */

#meta{ float:right; margin-top: 5px;}
#meta li{display: inline;list-style: none; margin-left: 20px;}
#meta li a{background: rgba(192,57,43,1); color: rgba(239,239,239,1); text-decoration: none; text-transform: uppercase; font-size: 1.000rem; font-weight: 700; letter-spacing: 2px; padding: 10px 20px; border-radius: 5px; transition: all 0.15s linear 0s;}
#meta li a:hover{background: rgba(239,239,239,1); color: rgba(192,57,43,1); text-decoration: none; border-radius: 5px;}
.meta{margin-top: 7px;}
.text{padding: 50px; background: rgba(68,68,68,0.1); border-radius: 20px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);}
.text li {margin-left: 30px; list-style-type: square;}


/* HERO */

.hero { background: url('../img/bagger.jpg') no-repeat center center fixed; min-height: 600px; background-size: cover;}


/* Footer */

footer {background: rgba(68,68,68,1); padding: 20px 0;}
footer p {color: rgba(239,239,239,1);}
footer .one-third {padding: 30px;}
.imprint{color: rgba(239,239,239,1); font-size: 0.900rem; }
.imprint a {display: inline;}
footer a {display:block;}



/* Responsive Anpassungen */

@media (max-width: 768px) {
  .container {
    grid-template-columns: repeat(6, 1fr);
  }
  .one-third, .one-half, .one-quarter, .three-quarters {
    grid-column: span 6; /* Alle Elemente nehmen eine halbe Breite ein */
  }
	.meta li a{display: block;list-style: none; text-align: center;}
	#meta{float:none;}
	
.hero { background: url('../img/bagger.jpg') no-repeat center center scroll; min-height: 400px; background-size: cover;}

.logo{width: 100%;}

}

@media (max-width: 480px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
  }
  .one-third, .one-half, .one-quarter, .three-quarters {
    grid-column: span 2; /* Alle Elemente nehmen eine ganze Breite ein */
  }
	.meta li a{display: block;list-style: none; text-align: center;}
	#meta{float:none;}
	
.hero { background: url('../img/bagger.jpg') no-repeat center center scroll; min-height: 300px; background-size: cover;}

header{padding: 80px 0;}

.logo{width: 100%;}
	
}