h1 a, h1, h2 a, h2, h3 a, h3, h4 a, h4, h5 a, h5, h6 a, h6 { 
    color: #2c5aa0 !important; 
    z-index: 3 !important;
}

p, li { max-width: 60ch; }

h1, h2, h3, h4, h5, h6 { max-width: 50ch; }

h1 { 
    font-size: 140%; 
    padding-top: 0;
    margin-top: 0;
    margin-left: -20px;
    position: relative;
}

h2 { 
    font-size: 130%; 
    margin-top: 1.5em;
    margin-left: -5px;
}

h3 { font-size: 120%; margin-left: 3ch; }
h4 { font-size: 110%; margin-left: 6ch; }
h5 { font-size: 105%; margin-left: 9ch; }
h6 { font-size: 105%; margin-left: 12ch; }

p { text-align: left; }

a { text-decoration: none; }

a[href ^= "http://"]::before,
a[href ^= "https://"]::before {
    content: "🌍";
    margin-right: 0.5ch;
    white-space: nowrap;
}

a[href ^= "https://"][href *= ".com/"]::before,
a[href ^= "https://"][href *= ".mil/"]::before,
a[href ^= "https://"][href *= ".gov/"]::before {
    content: "🌎";
    margin-right: 0.5ch;
    white-space: nowrap;
}

a[href ^= "https://en.wikipedia.org/"]::before, 
a[href ^= "https://de.wikipedia.org/"]::before { 
    content:url(https://upload.wikimedia.org/wikipedia/commons/b/b0/Wikipedia-favicon.png);
    margin-right: 0.5ch;
    white-space: nowrap;
}

a:link { color: #2c5aa0; }
a:visited, a:active { color: #666666; }
a:hover { text-decoration: underline; }

img.big-image { float: none; }

img.portrait {
    margin-left: 1em;
    margin-bottom: 0.1em;
    shape-outside: circle();
}

body { background-color: white; }

.hinweis-muenchen { 
    font-size: 80%; 
    text-align: right;
    top: -2em;
    right: 2px;
    bottom: 0;
    position: absolute;
}

.lang-switch {
    z-index: 1;
    font-size: 100%;
    margin-top: 12px;
    margin-left: 60px;   /* -maring-left of #navigation - 20 */
}

.lang-switch a { color: #2c5aa0; }

#navigation h1 { display: none; }

#navigation ul li a:visited { color: #555555; }

#navigation ul li a:hover { 
    border-width: 4px;
    margin-left: -4px;
}

.lang-switch a:hover,
#navigation ul li a:hover { 
    background-color: #2c5aa0;
    color: white;
    text-decoration: none;
    border-left-style: solid;
    border-right-style: solid;
    border-width: 4px;
    margin-left: -4px;
}

.lang-switch a:hover { 
    border-width: 2px;
    margin-left: -4px;
}

.lang-switch a:active,
#navigation ul li a:active { 
    color: white;
    background-color: #666666;
}

#navigation { 
    background-image: url(logo.png);
    background-repeat: no-repeat;
    margin-left: -100px;   /* 1/3 psi */
    margin-top: 10px;
    font-size: 120%;
    padding: 0 1em;
    top: 0; 
    z-index: 1;
    order: -5;
    min-height: 270px; /* height psi */
}

#navigation ul { 
    margin-top: 120px;
    margin-left: 80px;
    list-style-type: none;
}

#navigation ul li {
    padding: .2em;
}

.icons {
    display: none;
    margin-top: 3em;
    position: absolute;
    left: 60px;
    width: 100px;
    font-size: 50%; 
}

.icons p { margin:0px; padding: 0px; }

.icons p img { float: none; margin-top:1.5em; margin-bottom:1px;}

.document { 
    color: black; 
    margin-left: 20px; 
    margin-right: 0;
    padding-right: 2em;
    margin-top:0px;
    display: flex;
    flex-direction: column;
}

@media (max-width: 660px) and (min-width: 40ch) {
    #navigation ul li {
        display: inline;
        white-space: nowrap;
    }

    #navigation ul li+li::before {
        content: "·";
        margin-right: .7em;
        color: #2c5aa0;
    }
}

@media screen and (min-width: 660px /* 3*margin-left */) and (min-width: 10cm) and (min-device-width: 10cm) {
    /* tested smartphones think they have a width of 25+cm so needed to add device-width */
    .document {
        margin-left: 220px;  /* +200px */
        z-index: 3 !important;
    }

    #navigation {
        margin-left: -300px; /* -200px */
        position: absolute;
        z-index: 1 !important;
        width: 250px;
        margin-right: 30px;
        display: grid;
        grid-template-rows: max-content max-content auto;
    }

    #navigation .icons {
        left: 110px;
        display: inline;
        grid-row: 4; 
    }

    p { margin-left: .3em; text-align: justify; }

    @media (min-height: 540px /* 2*psi */) {
        #navigation {
            position: fixed !important;
            height: 90vh;
        }

        #navigation .icons { font-size: 0; }
    }

    @media (min-width: 820px /*2*small map +margin-left */) {
        img { float: right; margin: 1em; }
    }

    @media (min-width: 120ch) {
        img.portrait {
            position: fixed;
            margin: 1em; 
            right: 2.5em;
        }
    }
}

@media print {
    #navigation { display: none !important; }
}