/* CSS Document */

body {
        margin:0;
        padding:0;
    }
    
    body > header {
        width:100vw;
        height:66vw;
        margin:0;
        padding:0;
    }
    
    body > header #gruppenfoto {
        position:absolute;
        width:100%;
        margin:0;
        top:0;
    }
    
    body > header #logo {
        position:absolute;
        width:13vw;
        top:2vw;
        left:2vw;
    }
    
    body > header #overlay {
        position:absolute;
        width:100%;
        height:66vw;
        background: linear-gradient(170deg,rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 0) 53%, rgba(255, 0, 0, 1) 100%);
    }
    
    body > header h1 {
        font-family: work-sans, sans-serif;
        font-weight:900;
        text-align: right;
        position:absolute;
        right:3vw;
        bottom:5vw;
        color:white;
        font-size:6vw;
        line-height:6vw;
    }
    
    body > header h2 {
        font-family: work-sans, sans-serif;
        font-weight:300;
        text-align: right;
        position:absolute;
        right:3vw;
        bottom:1vw;
        color:white;
        font-size:3vw;
    }
    
    body > header h1.localizable, body > header h2.localizable {
        opacity:0;
        transition:opacity 1s ease;
    }
    
    body > header h1.localizable.selected, body > header h2.localizable.selected {
        opacity:1;
    }
    
    main {
        padding:0;
    }
    
    main > header > menu {
        text-align: center;
        margin:auto;
        padding:0;
        margin-top:3rem;
        margin-bottom:3rem;
    }
    
    main > header > menu > menuitem {
        font-family: work-sans, sans-serif;
        font-weight:900;
        font-size:1.5rem;
        padding:0.5rem 1rem;
        margin-left:1.5rem;
        margin-right:1.5rem;
        background-color:#787878;
        color:white;
        cursor:pointer;
        transition:background-color 0.6s ease;
    }
    
    main > header > menu > menuitem:hover {
        background-color:#6F003C;
        color:white;
    }
    
    main > header > menu > menuitem.selected {
        background-color:#ff0000;
        color:white;
        cursor:default;
    }
    
    main > #scroller {
        position:relative;
        left:0;
        transition:left 1s ease;
        white-space:nowrap;
    }  
    
    main > #scroller > section {
        display:inline-block;
        white-space:normal;
        width:100vw;
        margin-bottom:3rem;
        vertical-align: top;
    }
    
    main h1 {
        font-family: work-sans, sans-serif;
        font-weight:900;
        text-align: center;
    }
    
    main p {
        font-family: inter-18pt, sans-serif;
        width:600px;
        max-width:90vw;
        margin-left:auto;
        margin-right:auto;
    }
    
    main ul {
        width:540px;
        max-width:80vw;
        margin-left:auto;
        margin-right:auto;
    }
    
    main li {
        font-family: inter-18pt, sans-serif;
        margin-bottom:0.75rem;
        width:540px;
        max-width:80vw;
        margin-left:auto;
        margin-right:auto;
    }
    
    main h2 {
        font-family: work-sans, sans-serif;
        font-weight:400;
        color:#6F003C;
        text-align: center;
        width:800px;
        max-width:90vw;
        margin:auto;
        margin-top:2rem;
    }
    
    main > section#kandidaten {
        width:100vw;
        padding:0;
        text-align:center;
        margin-bottom:3rem;
        vertical-align:top;
    }
    
    main > section#kandidaten h1 {
        font-size:2rem;
        margin-top:0;
    }
    
    main > section#kandidaten figure {
        position:relative;
        width:300px;
        height:200px;
        margin:auto;
        display:inline-block;
        background-color:black;
        cursor:pointer;
        margin-left:1rem;
        margin-right:1rem;
        margin-bottom:1rem;
        overflow:hidden;
    }
    
    main > section#kandidaten figure img {
        height:100%;
        opacity:1;
        transition:opacity 1s ease;
    }
    
    main > section#kandidaten figure:hover img {
        opacity:0.5;
    }
    
    main > section#kandidaten figure figcaption {
        width:100%;
        position:absolute;
        margin:auto;
        top:50px;
        left:0;
        text-align:center;
        vertical-align:middle;
        font-family: work-sans, sans-serif;
        font-weight:300;
        font-size:2rem;
        color:white;
        opacity:0;
        transition:opacity 0.4s ease;
    }
    
    main > section#kandidaten figure figcaption strong {
        font-weight:900;
    }
    
    main > section#kandidaten figure:hover figcaption {
        opacity:1;
    }
    
    body > footer {
        width:100vw;
        height:11rem;
        padding-top:2rem;
        background-color:#787878;
    }
    
    body > footer > p {
        width:600px;
        max-width:90vw;
        color:white;
        font-family: inter-18pt, sans-serif;
        margin:auto;
        margin-top:0.5rem;
    }
    
    strong {
        font-weight:900;
    }
    
    .rot {
        color:#ff0000;
    }