@font-face {
    font-family: 'PT Sans';
    src: url('fonts/PTS55F-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'PT Sans';
    src: url('fonts/PTS56F-webfont.woff') format('woff');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'PT Sans';
    src: url('fonts/PTS75F-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'PT Sans';
    src: url('fonts/PTS76F-webfont.woff') format('woff');
    font-weight: 700;
    font-style: italic;
}

html {font-size:62.5%;height:100%;}
body {background-color:#fff;color:#222;display:flex;flex-direction:column;font-family:'ClashDisplay',sans-serif;font-size:1.9rem;height:100%;margin:0;overflow-y:scroll;}

h1, h2 {margin:0;}

img {background-color:#666;}

header, section, footer {background-color:#f4f4f4;border-bottom:1px solid #ddd;box-sizing:border-box;min-height:85vh;padding:10vh 12.5vh;}
section:nth-child(2n) {background-color:#ddd;}

.top {display:flex;align-items:start;gap:3rem;}
.middle {display:flex;align-items:center;gap:3rem;}
.bottom {display:flex;align-items:end;gap:3rem;}
.full {padding:0;}

.bulletimg {display:inline-block;width:33%;}
.bulletimg img {border-radius:100%;width:5rem;height:5rem;}

.boxgroup {flex:1;overflow:hidden;}
.boxgroup ul {list-style-type:none;padding:0;}
.boxgroup li {cursor:pointer;overflow:hidden;padding-top:75%;position:relative;}
.boxgroup li img {position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;}
.boxgroup li:not(:first-child) {display:none;}
.boxgroup ul img {width:100%;}
.boxgroup[data-imgcount]:not([data-imgcount="0"]):after {content:attr(data-imgcount)' Bilder';display:block;text-align:center;}


/* detailview */

#detailview {background-color:rgba(24,24,24,0.9);backdrop-filter:blur(1.5rem) grayscale(0.8);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:3rem 6rem;position:fixed;top:0;bottom:0;left:0;right:0;z-index:2;}
body:not(.detailview) #detailview {display:none;}
#detailview img {display:block;height:auto;width:auto;max-height:100%;max-width:100%;}

.button {cursor:pointer;font-family:sans-serif;font-weight:700;height:4rem;line-height:4rem;position:absolute;text-align:center;transition:all 0.1s;width:4rem;}
.button:hover {background-color:#fff;color:#000;}
#detailviewClose {font-size:1.2em;line-height:3.8rem;top:1rem;right:1rem;}
#detailviewPrev {left:1rem;top:calc(50% - 2rem);}
#detailviewNext {right:1rem;top:calc(50% - 2rem);}