@font-face {
  font-family: myFont; /* set name */
  src: url(../lib/fira-sans/FiraSans-Regular.otf); /* url of the font */
}

body {
  font-family: myFont;
}

.middle{
    margin-left: 20%;
    margin-right: 20%;
}

.bold{
    font-weight: bold;
    padding-right: 10px;
}

.uebersicht{
    border-radius: 5px;
    background-color: #729966;
    padding: 10px;
    margin: 5px;
}

h3{
    margin-top: 0px;
    font-weight: lighter;
    font-size: 20px;
}

.rezeptName{
    display: inline;
    position: relative;
    top: -40px;
    margin-left: 20px;
}

img{
    width: 100%;
    height: 40vh;
    object-fit: cover;       
    object-position: bottom; 

    border-radius: 10px;
    
    display: block;        

    /* Moderne Browser (Chrome, Edge, Safari, Opera) */
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 0%, transparent 100%);
    
    /* Standard (Firefox und Zukunftssicherheit) */
    mask-image: linear-gradient(to bottom, black 0%, black 0%,  transparent 100%);
}

.container {
    display: flex;       /* Aktiviert das Nebeneinander-Layout */
    width: 100%;         /* Der Container nutzt die volle Breite */
}

.links {
    flex: 0 0 40%;       /* 40% Breite, darf nicht wachsen oder schrumpfen */
    background: #f4f4f4; /* Nur zur Sichtbarkeit */
}

.rechts {
    flex: 0 0 60%;       /* 60% Breite */
    background: #e2e2e2; /* Nur zur Sichtbarkeit */
}

.dauerPort{
    margin-left: 5%;
}



@media (max-width: 1000px) {
  .middle {
    margin-left: 10%;
    margin-right: 10%;
  }
  .dauerPort{margin: 0;}
}
@media (max-width: 600px) {
  .middle {margin: 0;}
  .container{display: block;}
  .dauerPort{margin: 0;}
}