/*   
Theme Name: Almut Middle Theme
Theme URI: almutmiddle.com
Description: Template für die Seite almutmiddle.com
Author: Henning Sorgenfrei
Author URI: 
*/
@font-face {
    font-family: 'SplineSans';        
    src: url('font/SplineSans-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;    font-weight: normal;
    font-style: normal;
}

:root {
    --sc_darkgreen : #066250;
    --am_grey : #777575;
    /* font size */
    --am_fs12 : 12px;
    --am_fs16 : 16px;
    /* line height */
    --slh_fs38 : 42px;
    --slh_fs14 : 19px;
    
    --grid_gap : 20px;
    --grid_half_gap: 10px;
    --menu_height: 70px;
    --menu_height_mobil: 100px;
    --hori_margin : 18px;
    --vert_margin : 25px;
    --document_margin: 20px;
    
    --grid_rows : 13; 
    
    --header_height : 50px;
        
    --breakpoint_mobil : 600px; 
}

* {
    box-sizing: border-box;
}
body {
	box-sizing: border-box;	
	font-family: 'SplineSans';
    font-size: var(--am_fs16);       
    color: var(--sc_darkgrey); 
	margin: 0;
}
/* Menu start */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
}
p {
    margin-top: 0;
    margin-bottom: 20px;
}
.topnav, .footnav, .mobil_nav_header {
  background-color: white;
  height: var(--menu_height);  
    padding: var(--vert_margin) 0;    
}
.topnav {
    z-index: 2;
}
.main {
   position: relative; 
}
.main.page {
	margin-top: 100px;
	margin-bottom: 66px;
}
.mobil_nav_header {
    text-align: right;
}
header {
    padding: 0 var(--document_margin);
}
#slidedown a, .topnav a, .footnav a, .mobil_nav_header a,
.mobil_menu_list a {
  color: black;
  text-decoration: none;
}
#slidedown a:hover, .topnav a:hover, .footnav a:hover, .mobil_nav_header a:hover,
.mobil_menu_list a:hover,
#slidedown a.active, .topnav a.active, .footnav a.active, .mobil_nav_header a.active,
.mobil_menu_list a.active {
    border-bottom: 2px solid black;
}
.hide_on_mobil_nav {
    position: relative;
}
/* .hide_on_mobil_nav .menu, */
.menu, 
.hide_on_mobil_nav .category_menu, .page_grid {
    display: flex;
    width: 100%;    
    column-gap: var(--grid_gap);    
}
.hide_on_mobil_nav .category_menu {
    display: block;
}
.menu, .category_menu {
    position: absolute;
    background-color: white;
}
.category_menu {
    top: -100px;
    z-index: 2;
    padding-bottom: 10px;
    transition: top 0.3s ease 0s;
}
.menu #title_button {
    flex: 3;
}
.menu #cat_title {
    flex: 7;
}
.menu #menu_button,
.menu #contact_button {
    flex: 1;
    text-align: right;
}
.hide_on_mobil_nav .category_menu {
    /* display: none; */
}
.show_cat .menu {
    /* display: none; */
}
.show_cat .category_menu {
    top: 0;    
    /* transition: top 0.7s ease 0s; */
}
/*
.hide_on_mobil_nav.show_cat .category_menu {
    display: flex;
}
*/
.category_menu {
    
}
.cat_elem a,
.close_cat a {
    color: var(--am_grey);
    /* color: black; */
    transition: color 0.2s ease 0s;
}
.cat_elem a:hover,
.close_cat a:hover,
.cat_elem a.active{
    color: black;
}
.category_menu .cat_elem {
    /* flex: 3;   */ 
    float: left;
    margin-right: 96px;
}
.category_menu .close_cat {
    /* flex: 3;     */
    float: right;
    text-align: right;
}
.show_on_mobil_nav {    
    position: relative;
    display: none;
}  
.cat_row {
    position: absolute;
    top: 41px;
}
/* Menu Ende */

/* mobil nav start */
.mobile_menu {
  display: block;
  position: fixed;
  top: -100vh;
  /* left: -1000px; */
    left: 0;
  background-color: white;  
  padding: 0 var(--document_margin);
  width: 100%;    
  height: 100vh;
  z-index: 3;
  transition: top 0.7s ease 0s;
  overflow: hidden;  
}
.show_mobile_nav .mobile_menu {
        /* left: 0; */
        top: 0;
        overflow: auto;
}  
.mobil_menu_list {
    display: flex;
    flex-direction: column;
    justify-content: center; 
    height: calc(100vh - 70px);
}
.menu_row {
    text-align: center;
    height: 50px;
}
@media only screen and (min-width: 600px) {
    .mobile_menu {
        display: none;        
    }
}
/* mobil nav ende */
#content {
    padding: 0 var(--document_margin);
    padding-top: var(--menu_height);
}

@media only screen and (max-width: 860px) {
    .hide_on_mobil_nav {
        display: none;
    }
    .show_on_mobil_nav {
        display: block;
    }    
    .topnav {
        height: var(--menu_height_mobil);
    }
    #content {
        padding-top: var(--menu_height_mobil);
    }
}
.up {
    position: fixed;
    bottom: 10px;
    right: var(--document_margin);    
    display: none;
} 
.down {
    position: fixed;
    bottom: 28px;    
    left: 50%;
    margin-left: -7px;
    transform: scaleY(-1);
}
.down.hide_down {
	display: none;
}
@media only screen and (max-width: 600px) {
	.down {
		display: none;
	}
}

.up img {
    width: 14px;
    height: auto;
    margin-bottom: 15px;
}
.up.show_icon {
    display: inline;
}
/* Gallery Start */
.gallery_dummy {
    width: 100%;
}
/* Gallery Ende */

/* Page start */
.page_hero {    
    height: calc(100vh - 2 * var(--menu_height));
}
.page_hero img, .page_img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.page_left, .page_right, .page_spacer, .flex_2_spacer {
    flex: 2;
}
.hero_mobile_nav {
    display: none;
    height: 46px;
}
.page_left, .page_right {
    display: flex;    
    align-items: center;        
}
.page_left {
    justify-content: left;
}
.page_right {
    justify-content: right;
}
.page_left img, .page_right img {
    height: 14px;
    width: 42px;    
    transition: margin 0.1s ease 0s;
}
.page_left img:hover {
    margin-left: -5px;
}
.page_right img:hover {
    margin-right: -5px;
}
.hero_img, .page_text, .page_img {
    flex: 8;
}
.caption_text {
    flex: 6;
    font-size: var(--am_fs12);       
    margin: var(--grid_gap) 0;    
    letter-spacing: .02rem;
    line-height: 18px;    
    white-space: pre-line;
}
.page_text {    
    letter-spacing: .02rem;
    line-height: 22px;      
    white-space: pre-line;
}
.page_text p:last-child {
    margin-bottom: 0;
}
.page_text a {
	color: black;
}
.page_img {
    margin-top: 70px;
}
@media only screen and (max-width: 860px) {        
    .page_hero .page_left, .page_hero .page_right, .page_spacer {
        flex: 0;
        display: none;
    }
    .hero_mobile_nav {
        display: flex;
    }
}
@media only screen and (max-width: 600px) {
    .page_hero {
        margin-top: 70px;
        height: 240px;        
    }
}
/* Page ende */

/* Index Grid Start */
.grid {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    /* grid-template-rows: repeat(100, calc((100vw - (2 * var(--grid_gap)) - (11  / 4 * var(--grid_gap))) / (12 * 4))); */
    grid-template-rows: repeat(100, calc((100vw - (25*var(--grid_gap))) / 24));
    /* grid-template-rows: auto; */
    gap: var(--grid_gap);    
    grid-auto-rows: 0;
    overflow-y: hidden;
}
.grid_item {
    /* background-size: cover; */
    background-size: contain;
    background-position: center top;
	background-repeat: no-repeat; 
}
/* Index Grid Ende */

/* CV-Page Start */
.small_list {
	display: flex;
}
.page_cv .page_text {
	white-space: normal;
}
.page_row {
	white-space: pre-line;
}
.small_list .jahreszahl {
	width: 55px;
}
.small_list.liste_studium .jahreszahl,
.small_list.liste_stipendien .jahreszahl {
	width: 140px;
}
.small_list.liste_stipendien {
	margin-bottom: 22px;
}
.headline_text {
	margin-bottom: 21px;
}
.headline_text.headline_einzelausstellungen { margin-top: 66px; }
.headline_text.headline_gruppenausstellungen { margin-top: 45px; }
.headline_text.headline_stipendien { margin-top: 66px; }
.headline_text.headline_publikationen { margin-top: 66px; }
.listentext {
	flex: 1;
}
@media only screen and (max-width: 600px) {
	.main.page {
		margin-top: 50px;
		margin-bottom: 33px;
	}

	.small_list.liste_studium .jahreszahl,
	.small_list.liste_stipendien .jahreszahl {
		width: 100px;
	}	
}
/* CV-Page Ende */