*
    {
    box-sizing:border-box;
    }
body
    {
    font-family:verdana;
    background-color:#f4f9f4;
    }
.header
    {
    background-color:#2e7d32;
    padding:0px;
    text-align:center;
    color:white;
    }
.navigation
    {
    background-color:#1b5e20;
    text-align:center;
    padding:10px;
    }

.intro
    {
    text-align:center;
    padding:20px;
    max-width:800px;
    margin-left:auto;
    margin-right:auto;
    margin-top:20px;
    color:#2e7d32;
    border:1px solid #c8e6c9;
    border-radius:15px;
    background-color:white;
    }
.navigation a
    {
    color:white;
    text-decoration:none;
    margin:0 15px;
    }
.navigation a:hover
    {
    text-decoration:underline;
    }
.suche
    {
    text-align:center;
    padding:20px;
    }
.container
    {
    overflow:hidden;
    max-width:1200px;
    margin-left:auto;
    margin-right:auto;
    padding:20px;
    }
.karte
    {
    float:left;
    width:30%;
    margin:1.5%;
    background-color:white;
    border:1px solid #c8e6c9;
    border-radius:15px;
    overflow:hidden;
    }
.karte:hover
    {
    box-shadow:0px 4px 15px rgba(0,0,0,0.2);
    }
.karte img
    {
    width:100%;
    height:180px;
    object-fit:cover;
    }
.karte-inhalt
    {
    padding:10px;
    }
.karte-inhalt h2
    {
    color:#2e7d32;
    font-size:1em;
    }
.kategorie-badge
    {
    background-color:#c8e6c9;
    color:#1b5e20;
    padding:3px 10px;
    border-radius:20px;
    font-size:0.8em;
    }
.zeile
    {
    border-top:1px solid #ccc;
    overflow:hidden;
    padding:5px;
    }
.merkmal, .wert
    {
    width:50%;
    float:left;
    }
.eingabefeld
    {
    width:100%;
    }
.footer
    {
    background-color:#2e7d32;
    color:white;
    text-align:center;
    padding:15px;
    margin-top:40px;
    }
table
    {
    border-collapse:collapse;
    width:90%;
    margin:20px auto;
    }
th
    {
    background-color:#2e7d32;
    color:white;
    padding:10px;
    }
td
    {
    padding:10px;
    border:1px solid #c8e6c9;
    }
tr:nth-child(even)
    {
    background-color:#f4f9f4;
    }
@media SCREEN AND (max-width:768px)
    {
    .karte
        {
        width:47%;
        }
    .suche input[type="text"]
        {
        width:80%;
        }
    }
@media SCREEN AND (max-width:480px)
    {
    .karte
        {
        width:100%;
        float:none;
        }
    .merkmal, .wert
        {
        width:100%;
        }
    .navigation a
        {
        display:block;
        margin:5px 0;
        }
    }