@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Newsreader:wght@400;500&display=swap');


* {
box-sizing:border-box;
}

body {
margin:0 auto;
background:#f7f4ee;
color:#151515;
font-family:"DM Sans", sans-serif;
}


/* Zeitungskopf */

header {

border-bottom:2px solid #151515;
margin:20px;

}


.topline {

display:flex;
justify-content:space-between;
font-size:13px;
padding-bottom:15px;

}


.brand {

font-family:"Newsreader",serif;
font-size:clamp(70px,12vw,150px);
text-align:center;
line-height:.8;
padding:30px 0;

}


/* Intro wie Zeitung */

.news {

margin:20px;
display:grid;
grid-template-columns:2fr 1fr;
gap:20px;

}


.news img {

width:100%;
height:650px;
object-fit:cover;

}


.article {

border-left:1px solid #151515;
padding-left:30px;

}


.article h2 {

font-family:"Newsreader",serif;
font-size:50px;
font-weight:400;

}



/* Produkte */

.products {

margin:80px 20px;

border-top:2px solid black;

}


.product {

display:grid;
grid-template-columns:80px 1fr auto;

padding:30px 0;
border-bottom:1px solid #aaa;

font-size:25px;

}


.number {

color:#a33;

}


/* Bildstreifen */

.strip {

display:flex;
height:350px;
overflow:hidden;

}


.strip img {

width:33.333%;
object-fit:cover;

}



/* Öffnungszeiten */

.info {

margin:80px 20px;

display:grid;
grid-template-columns:1fr 1fr;

}


.info h2 {

font-family:"Newsreader",serif;
font-size:90px;
font-weight:400;

}



footer {

margin:20px;
border-top:2px solid black;
padding-top:30px;

display:flex;
justify-content:space-between;
}

footer a {
text-align: center;
/* margin-top: 22px; */
text-decoration: none;
color: #151515;
}

@media(max-width:800px){

.news,
.info {

grid-template-columns:1fr;

}
.news img{
    height: 350px;
}

.strip{
    height: 300px;
}
.article {

border-left:0;
padding:20px 0;

}

.product {

font-size:18px;

}

footer{
    flex-direction: column;
    align-items: center;
    gap:20px;
}

}

@media(max-width:600px){

    .brand{
        font-size: clamp(60px, 12vw, 150px);
    }
    .info{
        margin-top: 20px;
    }

 
}
@media(max-width:380px){
   header,.news, .strip, .products, footer{
        width: calc(95%);
        margin-left: 2.5%;
        margin-right: 2.5%;
    }
    .brand{
        font-size: clamp(50px, 12vw, 150px);
    }
    .info h2 {
        font-size: 50px;
    }
    footer{
        font-size: 13px;
    }
}