/* Wappen-Filter + Map-Nav-Variante (rechts oben, 230px breit)
 * Eingebunden in karte/a-z.php + koepfe/index-blndr.php
 *
 * Hinweis zur Trennung von karte.css:
 * karte.css hat eine ANDERE .mapnav-Variante (right:-20px, top:175px, width:280px)
 * fuer karte/index.php. Hier ist die a-z/blndr-Variante (right:20px, top:0,
 * width:230px). Die zwei Pages laden also nur die jeweils passende. */


/* Wappen-Filter (Bundeslaender-Wappen am oberen Rand) */
.wappen-nav li {
    max-width: 60px;
    float: left;
    padding-left: 20px;
    color: #000;
    list-style-type: none;
    text-align: center;
    margin-right: 12px;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

.wappen-nav img {
    filter: grayscale(1);
}

.wappen-nav a:hover img {
    filter: grayscale(0);
}


/* Map-Nav rechts oben (sticky positioning fuer den Filter-Bereich) */
.mapnav {
    position: absolute;
    right: 20px;
    top: 0;
    width: 230px;
    font-family: 'Catamaran', sans-serif;
    font-size: 15px;
}

.mapnav a {
    color: #333;
}

.mapnav a:hover {
    color: #f00;
}


/* Filter-Button (gerundet, weiss, Schatten) */
.ortebutton {
    width: 100%;
    height: auto;
    position: relative;
    background: #fff;
    margin: 10px 0;
    z-index: 10;
    color: #2b2b2b;
    border-radius: 30px;
    max-width: 230px;
    font-family: Catamaran, sans-serif;
    font-size: 15px;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
}

.ortebutton .start {
    padding: 14px 20px 15px;
    display: block;
}

.ortebutton i.fa.fa-angle-left {
    color: #000;
}


/* Mobile-Anpassungen */
@media only screen and (max-width: 768px) {
    .wappen-nav ul {
        margin: 0 auto;
        width: 90%;
    }

    .mapnav {
        top: 150px;
        margin: -15px 0;
    }
}