* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
    padding-top: 75px;
    font-family:Arial, Helvetica, sans-serif;
    display: flex; /*Flex kann freien platz verteilen, html nicht. column, damit die elemente wieder untereinander sind (damit footer immer am ende der seite ist)*/
    flex-direction: column;
    min-height: 100vh; /*Damit der footer immer am ende der seite ist, auch wenn wenig inhalt da ist. 100vh heisst 100% viewport height, also body = mindestens so hoch wie der bildschirm*/
}

.navigation {
  display: flex; /*elemente nebeneinander angeordnet (alle töchter)*/
  position: fixed; /*die leiste bleibt festgetackert, egal wie weit man scrollt*/
  width: 100%;
  height: 75px;
  top: 0; /*Abstand oben ist 0*/
  justify-content: space-between; /*Elemente werden gleichmäßig verteilt. ganz links, mitte und ganz rechts*/
  align-items: center;
  padding:20px;
  background-color:#d2ffc9;
}

.logo_links {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 27px;
  color: black;
}

a{
    text-decoration: none;
    color: #005201; /* Farbe der Links. a = verlinkung*/
}

.nav_mitte { /*Die mitte und rechts haben eine eigene Logik innerhalb der box (div)*/
  display: flex; /*elemente nebeneinander anordnen mit flex, statt untereinander*/
  gap: clamp(50px, 6vw, 120px); /*Je breiter der bildschirm, desto weiter geht der mittlere part der navigationsleiste auseinander. ist dynamischer.*/
}


.nav_rechts {
  display: flex;
  gap: 50px;
}

.home_intro{
    display: flex;
    justify-content: space-between;
    align-items: center;

    background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.6) 100%),
    url(plantastic_bilder/heroplant.jpg);

    background-size: cover; /*bild füllt alles*/
    background-position: center; 
    padding: 60px;
    min-height: 350px; 
    gap: 10%; /*Abstand zwischen den beiden elementen aber trotz center allignment mittig nur mit puffer dazwischen*/

    line-height: 1.3;
}


/*für indoor.php und outdoor.php*/
.indoor_hintergrund {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 50%, rgba(0,0,0,0.6) 100%),
    url(plantastic_bilder/indoor.jpg);
}

.outdoor_hintergrund {
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.6) 100%),
    url(plantastic_bilder/outdoor.jpg);
}

.home_intro_links{
    color: white; 
    padding: 20px;
    flex: 1; /*flex:1 heisst: beide elemente links uns rechts jeweils die hälfte ein. also 50/50*/
}

.home_intro_links h1{
    font-size: 40px;
}
.home_intro_links h2{
    font-size: 20px;
}

.home_intro_rechts{
    color: white;
    background-color: rgba(0,0,0,0.5); /*rgba für schwarz-transperenten hintergrund*/
    padding: 20px;
    flex: 1;
    text-align: right;
}


.menu_icon{
    display: none;
}

.plus_button{
    color: rgb(173, 17, 208);
}

.posts_section {
    padding: 50px 40px; /*oben/unten 50px padding; links/rechts 40px padding*/
}

.posts_section h2 {
    margin-bottom: 30px; /*Abstand von überschrift zu den einträgen (Posts container)*/
    text-align: center;
}

.posts_container {
    display: grid;
    grid-template-columns: repeat(3, minmax(300px, 450px)); /*Festlegung der spalten; repeat: 3 mal spalten erzeugen, mindestens 300px breit und maximal 450px*/
    gap: 20px; /*Abstände zwischen den posts/grid items*/
    justify-content: center; 
    margin: auto; /*zentriert den container horizontal*/
}


.post_karte {
    background-color: #e9e0e1;
    padding: 15px;
    border-radius: 10px; /*Kanten abrunden. eleganter :D*/
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
    overflow-wrap: break-word;
}

.post_bild {
    width: 100%; /*nimmt die gesamte breite der post karte ein minus padding (rosa)*/
    height: 180px;
    object-fit: cover; /*sonst verzerrt*/
    border-radius: 10px;
    margin-bottom: 15px; /*Abstand von bild zu überschrift (h3)*/
}


.bearbeiten_button {
    display: block; /*block damit margin bottom wirken kann. sonst wäre es inline und margin würde nicht funktionieren*/
    color: rgb(173, 17, 208);
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    margin-bottom: 6px; /*Abstand von bearbeiten button zu überschrift (h3)*/
}

.post_karte h3 {
    margin-bottom: 10px; /*Abstand von der überschrift zb nelke bis zur kurzbeschreibung*/
}

.footer {
    background-color: #27651c;
    color: white;
    text-align: center;
    padding: 40px;
    display: flex;
    justify-content: center;
    gap: clamp(20px, 12vw, 300px); /*Abstand zwischen den einzelnen elementen im footer. je breiter der bildschirm, desto weiter auseinander*/
    margin-top: auto; /*auto bedeutet, dass der footer so viel platz wie möglich nach oben schiebt, damit er am ende der seite bleibt*/
}

.footer a{
    color: white;
}

.menu_toggle { /*Checkbox unsichtbar machen*/
    display: none;
}

.mobile_menu {

    display: flex;
    flex-direction: column;
    line-height: 1.6;
    position: fixed; /*Box ist fixiert*/

    transform: translateX(50px); /*verschiebung auf x achse nach rechts um erstmal das menu zu verstecken*/
    transition: transform 0.25s ease;

    background-color: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.hellezeile{
    background-color: white;
}

.dunklezeile{
    background-color: rgb(231, 231, 231);
}

.hellezeile, .dunklezeile{
    padding: 10px 15px;
}

.hellezeile a, .dunklezeile a{
    color: rgb(79, 79, 79);
}

.menu_toggle:checked ~ .mobile_menu { /*Checkbox aktiviert, dann menu transition*/

    transform: translateX(-110px);
    pointer-events: auto;

}

.suche_toggle {
    display: none;
}

.suche_fest_box {
    position: fixed;
    right: 20px;
    bottom: 95px;

    display: flex;
    align-items: center; /*vertikal zentriert*/
    
}

.lupe_fest {
    width: 60px;
    height: 60px;
    border-radius: 50%;

    background-color: white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 26px;
    cursor: pointer;
}

.suchleiste_fest {
    display: none; /*Anfangs versteckt, wird angezeigt wenn die suche_toggle checkbox aktiviert ist (siehe weiter unten)*/
    margin-right: 10px;
    height: 45px;
    padding: 5px;
}

.suche_toggle:checked ~ .suchleiste_fest {/*beeinflusst das Geschwisterelement*/
    display: flex; /*wenn lupe geklickt, suchleiste daneben sichtbar*/
}

.suche_button {
    padding: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.keine_suchergebnisse{
    max-width: 500px;
    margin: auto;
    text-align: center;
    
}

.favoriten_fest {
    position: fixed;

    right: 20px;
    bottom: 30px;

    width: 60px;
    height: 60px;

    display: flex; /*Herz soll perfekt in die mitte*/
    justify-content: center;
    align-items: center;

    background-color: white;
    border-radius: 50%;

    text-decoration: none;
    font-size: 30px;

    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.favoriten_section {
    background-color: #ddc5c9;
}

.keine_favoriten {
    
    max-width: 500px;
    margin: auto;
    text-align: center;
}

.info_ueberschrift {
    text-align: center;
    margin: 40px 0 20px 0;
}

.info_box {
    max-width: 900px;
    width: 90%;

    margin-left: auto;
    margin-right: auto;

    padding: 35px;
    line-height: 1.6;
}

.info_box h3 {
    margin-top: 20px;
    margin-bottom: 8px;
    color: #27651c;
}

.info_box p {
    margin-bottom: 12px;
    color: #444;
}

@media screen AND (max-width: 684px) {
    .nav_mitte, .nav_rechts a { /*Verstecke die Navigationslinks auf kleinen Bildschirmen*/
        display: none;
    }

    .nav_rechts{
        gap: 20px;
    }

    .home_intro{
        flex-direction: column;
        align-items: flex-start; /*alle items hier nach links ausrichten. nicht text align weil mit flex gearbeitet wird.*/
        gap: 20px; /* gap funktioniert nur mit flex oder grid. deswegen nicht display:block sondern flex-direction:column*/
        padding: 30px;;
    }
  

    .home_intro_rechts{
        text-align: left;
        
    }

    .menu_icon{
        display: flex;
        font-size: 28px;
    }

    .mobile_menu a { /*zeigt nur das "drop down" menu an*/
        display: block;
    }

    .search_icon{
    font-size: 28px;
}

.fließtext {
    line-height: 1.3; /*Zeilenabstand im Fliesstext, damit es besser lesbar ist*/
}

}

@media screen and (min-width: 685px) {

    .mobile_menu {
        display: none !important;
    }

    .menu_toggle {
        display: none;
    }
}

@media screen and (max-width: 1000px) /*Jedes mal wenn post karte unter 300px ist, werden es 2 spalten*/ {
    .posts_container {
        grid-template-columns: repeat(2, minmax(300px, 450px));
    }
}

@media screen and (max-width: 699px) { /*Jedes mal wenn post karte unter 300px ist, wird es nur noch 1 spalte, damit die karte nicht zu schmal wird*/
    .posts_container {
        grid-template-columns: minmax(150px, 450px); /*Hier aber darf die karte minimal 150px breit sein*/
    }

   .bild_platzhalter {
        height: 120px; 
    }

    .footer {
        flex-direction: column;
        gap: 10px;
        padding: 30px;
        text-align: left;
    }

}