/* Grundlayout: Schrift, zentriert, dunkler Hintergrund */
body {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    padding: 2% 4% 2% 4%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    background-color: rgb(36, 36, 36);
}  

/* alle überschriften weiß */
h1, h2, h3, h4, h5, h6 {
    color: white;
}   

/* Textfarbe weiß */
p {
    color: white;
}   

/* navbar mit title mit Links */
nav {
    margin-top: 10px;
    min-width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    padding: 20px 10px 15px 10px;
    border-radius: 9px;
    background-color: rgb(46, 47, 54);
    overflow: hidden;
}   

/* Kontakt Container, wo die kontaktkarten zentriert und abstand gibt usw. */
.kontakt {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 15px;
}   

/* Kontaktkarten, mit dunklen hintergrund, abgerundet,  text zentriert */
.karte-kontakt {
    color: white;
    text-align: center;
    font-size: 1.1em;
    padding: 12px 15px 12px 15px;
    border-radius: 9px;
    background-color: rgb(41, 41, 46);
}   

/* Schatten beim hover */
.karte-kontakt:hover {
    box-shadow: 2px 3px 15px #000000aa;
}

/* icon, mit runden dunklen hintergrund */
.karte-kontakt i {
    font-size: 1em;
    background-color: rgb(25, 25, 26);
    padding: 10px;
    border-radius: 50%;
    
}   

/* Link hellblau und ohne standard link style */
.karte-kontakt a {
    color: rgb(89, 185, 245);
    text-decoration: none;
}   


/* navbar Titel, weiß ohne link dekoration */
.nav-title {
    color: white;
    text-decoration: none;
    font-size: 1.4em;
    margin-left: 10px;
    margin-right: 10px;
}   

/* Links in einer Reihe und der inhalt ist zentriert */
.nav-links {
    display: flex;
    justify-content: center;
    flex-direction: row;
}   

/* nav link, mit dunklem hintergrund, abgerundet, und ohne link deko */
.nav-link {
    display: flex;
    padding: 7px;
    margin: 5px 5px 5px 5px;
    font-size: 1.1em;
    text-decoration: none;
    color: rgb(255, 255, 255);
    border-radius: 9px;
    background-color: rgb(35, 36, 43);
}   

/* aktiver Nav link, hintergrund ist dann weiß und text ist blau */
.active-nav-link {
    display: flex;
    padding: 7px; 
    margin: 5px 5px 5px 5px;
    font-size: 1.1em;
    text-decoration: none;
    color: rgb(89, 185, 245);
    border-radius: 9px;
    background-color: azure; 
}

/* nav link beim Klicken hellblau */
.nav-link:active {
    color: rgb(89, 185, 245);
}   

/* nav link leichter Schatten beim Hovern */
.nav-link:hover {
    box-shadow: 2px 2px 13px #00000062;

}  

/* aktiver nav link leichter schatten beim Hovern */
.active-nav-link:hover {
    box-shadow: 2px 2px 13px #ffffff62;

} 

/* header, dunkler hintergrund, abgerundet, alles zentriert, nimmt 90% der seiten breite ein, angezeogt als row, aber rückwärts, damit ich das bild obendrüber machen kann, und es bei der handy ansicht nicht reveersen muss :) */
header {
    height: 310px;
    width: 90%;
    align-items: stretch;
    display: flex;
    flex-direction: row-reverse;
    text-align: center;
    font-size: 1.2em;
    padding: 0;
    margin-top: 20px;
    border-radius: 9px;
    background-color: rgb(57, 57, 63);
    overflow: hidden;
}   

/* title im header, zentriert */
header .title-text {
    padding: 10px 20px 10px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}   

/* bild im header füllt volle höhe */
header img {
    margin: 0;
    height: 100%;
    width: auto;
    align-self: stretch;
}   


/* allgemeiner container, dunkel grauer hintergrund, für inhalte, mit padding, 90% breite und */
.container {
    width: 90%;
    align-items: center;
    display: flex;
    flex-direction: column;
    padding: 30px 0 40px 0;
    margin-top: 20px;
    text-align: center;
    border-radius: 9px;
    background-color: rgb(49, 49, 53);
    overflow: hidden;
}   

/* container für die Burger-Liste */
.container-burger {
    width: 90%;
    align-items: center;
    display: flex;
    flex-direction: column;
    padding: 30px 0 40px 0;
    margin-top: 20px;
    text-align: center;
    border-radius: 9px;
    overflow: hidden;
}   

/* Bereich für über mich */
.about-me {
    flex: auto;
    width: 90%;;
}   

/* max-width 600px damit es besser aussieht */
.about-me p {
    justify-self: center;
    max-width: 600px;
}   

/* button, hellblau, weißer Text */
button {
    padding: 10px 15px 10px 15px;
    font-size: 1em;
    color: white;
    background-color: rgb(89, 185, 245);
    border: none;
    border-radius: 9px;
    cursor: pointer;
}   

/* bei hovern dunkler, Schatten beim Hover */
button:hover {
    background-color: rgb(59, 127, 170);
    filter: drop-shadow(#298ddf62 2px 0px 4px);
}   



/* helle Textfarbe für Bewertungen */
.Burger-rating {
    color: rgb(253, 236, 216);

}   

/* linkes obere Ecke abgerundet */
.Burger-table-head th:first-child {
    overflow: hidden;
    border-top-left-radius: 9px;

}   

/* rechte obere Ecke abgerundet */
.Burger-table-head th:last-child {
    overflow: hidden;
    border-top-right-radius: 9px;

}   

/* Container mit abrundundungen */
.Burger-rating{
    border-radius: 9px;
    overflow: hidden;
    margin-left: 10px;
    margin-right: 10px;
}   

/* (keine extra Styles) */
.Burger-rating table tr {

}   

/* head von tabelle hellblau */
.Burger-rating table th {
    background-color: #59B9F5;
    padding: 10px;
    width: 160px;
    font-size: 1.2em;

}   

/* dunkel, Padding */
.b-name, .b-rest, .b-bewert, .b-score {
    background-color: rgb(90, 90, 94);
    padding: 10px;
    width: 160px;
    padding: 10px;
    overflow: hidden;

}   

/* Container für Burger-Bild */
.b-bild {
    min-width: 170px;
    width: fit-content;
    padding: 0;
}   


.b-bild img {
    width: 100%;
    height: auto;
}   

.b-bewert td {
    text-align: right;
    padding-right: 10px;
}   


.b-bewert {
    padding-right: 15px;
    padding-left: 15px;
}   


.b-score a {
    font-size: 1.5em;
    color: rgb(255, 255, 255);
    text-decoration: none;
}   




/* footer, hellblau */
footer {
    min-width: 100%;
    text-align: center;
    font-size: 0.9em;
    padding: 10px;
    margin-top: 20px;
    border-radius: 9px;
    background-color: rgb(89, 185, 245);
}   



@media (max-width: 790px) {
    /* Tabellen-Kopf ausblenden (mobil) */
    .Burger-table-head {
    display: none;
}  

/* 100% Breite (mobil) */
.Burger-rating table {
    margin-top: 5px;
    width: 100%;
    justify-content: center;
}  

/* flexibel, abgerundet (mobi) */
.b-bild img {
    height: auto;
    border-radius: 9px;
}  

/* schmaler (mobil) */
.container-burger {
    padding: 0;
    margin-top: 0;
    width: 98%;
}  

/* Karte pro Burger (mobil) */
.Burger-zeile {
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px 0 10px 0;
    border-radius: 9px;
    background-color: rgb(58, 58, 61);
}  

/* gestapelt & zentriert (mbil) */
.Burger-rating table td {
    width: 90%;
    margin: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 9px;
}  

/* extra Padding (mobil) */
.b-bewert {
    padding: 10px;
}  

    /* kleiner (mobil) */
    header {
        height: 200px;
        width: 98%; 
    }  
    /* fast volle Breite (mobil */
    .container{
        width: 98%; 
    }  

    /* kleiner (mobil) */
    .title-text h1 {
        font-size: 1.5em;
        
    }  

} 

@media (max-width: 500px) {  

/* Button ausblenden */
.mobile-nav button {
        display: none;
}  

/* Links untereinander */
nav {
    flex-direction: column;
    align-items: center;
}   

/* Abstand  */
nav .nav-title {
    margin-bottom: 10px;
}  

/* Box mit Padding */
nav .nav-links {
    border-radius: 9px;
    flex: 1;
    width: 90%;
    padding: 5px 10px 5px 10px;
    background-color: rgb(36, 36, 36);
}  

/* Bild & Text untereinande */
header {
    height: auto;
    align-items: center;
    display: flex;
    flex-direction: column;
}   
/* untere Ecken abgerundet  */
header img {
    border-bottom-left-radius: 9px;
    border-bottom-right-radius: 9px;
    margin: 0;
    height: 100%;
}  




/* sichtbar als flex  */
.mobile-nav {
    display: flex;
}  
/* kein min-width */

.container {
    min-width: none;
}  

}