/***********/
/* Basics: */
/***********/
  
:root {
  --bg: #e2e5e7;
  --bg_section: #6A7C92;
  --bg_navi: #6A7C92;
  --bg_text: White;
  
  --radius: 7px;
  --radius_slides: 5px;
  
  --fc_section:  rgba(255,255,255, 0.75);
  --fc_navi:#d0cfd2;
  --fc_navi_a:white;
  
  --fc_title: #445568;
  --fc_normal: #222222;
  --fs_links: 15px;
  --fs_base: 15px;
  --fs_small: 14px;
  --fs_tiny: 14px;
  --fs_h1: 36px;
  --fc_h1: #4E5E72;
  --fs_h2: 14px;
  --fs_news_title: 15px;
  --liner_gap: 40px;
  
  --card_shadow: rgba(0, 0, 0, 0.35) 0px 0px 3px;
  --slide_shadow: rgba(0, 0, 0, 0.50) 0px 0px 2px;
  
  --fc_nav_al: #db9f3d;             
  --fc_nav_pl: #595D66;
  --bgc_nav: transparent; 

  --nav-h: 40px;
}

@media (max-width: 700px) {
	:root {--liner_gap: 30px;
	       --radius: 10px;
		   --radius_slides: 10px;
		   --card_shadow: rgba(0, 0, 0, 0.50) 0px 0px 2px;
           --slide_shadow: rgba(0, 0, 0, 0.50) 0px 0px 2px;}
}

html {
  scroll-behavior: smooth;
}

#profil {
scroll-margin-top: calc(var(--nav-h) + 41px);
}


#news, #cv, #publikationen, #kontakt, #aw {
scroll-margin-top: calc(var(--nav-h) + 30px);
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: var(--bg);
  /*background: url('pics/back_img2.png');*/
  background-repeat: repeat;
  background-size: auto;
  background-attachment: fixed;
  color: var(--fc_normal);
  font-size: var(--fs_base);
  hyphens: auto;
  
}

.liner {
  display: block;
  width: 100%;
  height: var(--liner_gap);
}


h1 {
  padding: 0;
  position: relative;
  margin: 0 0 20px 0;
  font-size: var(--fs_h1);
  color: var(--fc_h1);
  letter-spacing: -0.1rem;
  text-shadow: 1px 1px 5px lightgrey;
  line-height: 1;
}

h2 {
  display: inline-block;
  position: relative;
  font-size: var(--fs_h2);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  margin: 0;
}

h2::before,
h2::after {
  content: "";
  position: absolute;
  left: 0%;
  width: 100%;
  height: 1px;
  background: var(--fc_section);
}

h2::before { width: calc(100% - 2px); top: -5px; height: 2px; }
h2::after  { width: calc(100% + 6px); bottom: -5px; height: 2px; }

h3 {
  padding: 0;
  position: relative;
  margin: 0 0 0px 0;
  font-size: 14px;
  letter-spacing: 0rem;
  text-shadow: 1px 1px 5px grey;
  font-weight: normal;
}

h4 {
  padding: 0;
  position: relative;
  margin: 10px 0 10px 0;
  font-size: 18px;
  color: var(--fc_title);
  letter-spacing: 0rem;
  line-height: 1;
}

p {
  margin: 0 0 5px 0;
  line-height: 1.5;
  font-size: var(--fs_base);
}

p.small {font-size: var(--fs_small);}
p.tiny {font-size: var(--fs_tiny);}

a, button {
  -webkit-tap-highlight-color: transparent; 
  outline: none;
}

a.link0 {
  display: inline;
  color: var(--fc_normal);
  text-decoration: none;
  font-weight: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  word-wrap: break-word;
  line-break: anywhere;
  white-space: normal;
  max-width: 100%;
  transition: color 0.3s ease;
}

a.link0:hover { color: #e67d00; }

a.link0::after {
  content: "⧉";
  font-size: 0.85em;
  color: #e67d00;
  margin-left: 2px;
  position: relative;
  vertical-align: top;
}

a.link1 {
  display: inline;
  color: var(--fc_section);
  text-decoration: underline;
  text-decoration-skip-ink: auto;
  font-weight: normal;
  white-space: normal;
  max-width: 100%;
  transition: color 0.3s ease;
}

a.link1:hover { color: white; }

a.link1::after {
  content: "⧉";
  display: inline-block; 
  text-decoration: none;
  font-size: 0.85em;
  color: var(--fc_section);
  margin-left: 2px;
  vertical-align: top;
}

a.mail0 {
  display: inline;
  text-decoration: none;
  font-weight: bold;
  color: var(--fc_h1);
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
  line-break: normal;
  white-space: normal;
  max-width: 100%;
  transition: color 0.3s ease;
}

a.mail0::after {
  content: "⧉";
  font-size: 0.85em;
  color: #e67d00;
  margin-left: 2px;
  margin-top: 0px;
  vertical-align: top;
  position: relative;
}

a.mail0:hover { color: #e67d00; }

a.mail1 {
  display: inline;
  color: var(--fc_section);
  text-decoration: none;
  font-weight: normal;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
  line-break: normal;
  white-space: normal;
  max-width: 100%;
  font-size: var(--fs_tiny);
  transition: color 0.3s ease;
}

a.mail1:hover { color: white; }



/***************/
/* Navigation: */
/***************/

nav {
  position: sticky;
  top: 0;
  background: var(--bg_navi);
  z-index: 10;
  border-bottom: 0px solid var(--bg);
}

.navwrap {
  color: var(--fc_navi);
  font-size: var(--fs_links);
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 10px;
}

.navlinks {
  color: var(--fc_navi);
  display: flex;
  gap: 30px;
  box-sizing: border-box;
  padding-right: 10px;
}

.nav_welc {font-size: var(--fs_links);}

.navlinks a {
  font-size: var(--fs_links);
  color: var(--fc_navi);
  text-decoration: none;
}

.navlinks a:visited {color: var(--fc_navi);}
.navlinks a:hover {color: var(--fc_navi_a);}

@media (min-width: 768px) {
@supports (-webkit-background-clip: text) or (background-clip: text) {
	
	.navlinks a {
	color: transparent;
	background-image: linear-gradient(to right, var(--fc_navi_a) 0%, var(--fc_navi_a) 50%, var(--fc_navi) 50%, var(--fc_navi) 100%);
					  
	background-size: 200% 100%;
	background-position: right center;
	background-repeat: no-repeat;
	
	-webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
	}

	.navlinks a:hover {
	color: transparent;
	background-position: left center;
	transition: background-position 0.7s ease;
	}
		
}
}		


/***********/
/* Profil: */
/***********/

.profil_cont {
  margin: 0 auto;
  margin-top:  var(--liner_gap);
  width: 90%;
  max-width: 1000px;
  display: grid;
  grid-template-columns: minmax(150px, 213px) 1fr;
  gap: var(--liner_gap);
  box-sizing: border-box;
  align-items: start;
  
}
    
.profil_left {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius);
  box-sizing: border-box;
  box-shadow: var(--card_shadow);
  background: var(--bg_section);
}

.profil_right {
  display: flex;
  background: var(--bg_text);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px 40px 30px 40px;
  text-align: center;
  border-radius: var(--radius);
  box-sizing: border-box;
  box-shadow: var(--card_shadow);
  border: 3px solid var(--bg_section);
}

.profil_right p {text-align: justify;}

.profil_right p.emph {
  font-weight: bold;
  color: var(--fc_h1);	
  text-align: center;
  margin: 0 30px 15px 30px;
}

.profil_imagebox img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 5 / 6;
  border-radius: 0 0 var(--radius) var(--radius);
}

.section_box {
  background: var(--bg_section);
  color: var(--fc_section);
  line-height: 1.0;
  padding: 14px;
  text-align: justify;
  box-sizing: border-box;
}


/*********/
/* News: */
/*********/

.news_cont {
  margin: 0 auto;
  margin-top:  var(--liner_gap);
  width: 90%;
  max-width: 1000px;
  display: flex;
  flex-direction: column;
  gap: 0px;
  box-sizing: border-box;
  align-items: stretch;
  background: var(--bg_section);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--card_shadow);
}

.news_item {
  background: var(--bg_text);
  padding: 18px 30px 18px 20px;
  margin-bottom: 0px;
  line-height: 1.5;
  text-align: justify;
  box-sizing: border-box;
}

.news_item p.hide {
  max-height: 1000px;
  opacity: 1;
  transition: max-height .35s ease, opacity .25s ease;
  margin: 0;
  margin-bottom: 10px;
}

.news_item p.hide.show {
  max-height: 1000px;
  opacity: 1;
  margin-top: 10px;
}

.news_liner {
  border-left: 20px solid white;
  border-right: 30px solid white;
  background: var(--bg_section);
  display: block;
  width: 100%;
  height: 2px;
  box-sizing: border-box;
}

.news_title {
  font-weight: bold;
  font-size: var(--fs_news_title);
  margin-bottom: 8px;
  color: var(--fc_title);
}

.news_item p {
  margin-bottom: 10px;
}

.news_img {
  float: right;                
  width: 40%;                   
  max-width: 350px;             
  margin: 5px 0 0px 20px;        
  object-fit: cover;
  border-radius: var(--radius_slides);
  overflow: hidden;
}

.news_cont button {
  display:none;
  background-color: rgba(106, 124, 146, 0.75);
  color: white;
  border: none;
  margin-right: 0px;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: var(--fs_base);
}


/******************/
/* Publikationen: */
/******************/
  
.pub_cont {
  margin: 0 auto;
  margin-top:  var(--liner_gap);
  width: 90%;
  max-width: 950px;
  display: flex;
  flex-direction: column;
  gap: 0px;
  box-sizing: border-box;
  align-items: stretch;
  background: var(--bg_section);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--card_shadow);
}

.pub_item {
  background: var(--bg_text);
  padding: 10px 40px 10px 20px;
  margin-bottom: 0px;
  line-height: 1.5;
  text-align: justify;
  box-sizing: border-box;
  min-width: 0;
}

.pub_item ul {
  margin: 0;
  margin-left: 0;
  padding: 0;
  padding-left: 1rem;
  margin-bottom: 0;
}

.pub_item li {
  margin-bottom: 5px;
  border-top: 1px solid #ddd;
  list-style-position: outside;
  padding: 8px 0 8px 0;
}

.pub_item li b {
  color: var(--fc_title); 
}

.pub_item li::marker {
  font-size: var(--fs_base);  
  color: var(--bg_section);   
}

.pub_item li:first-child {
  border-top: none;
  padding-top: 3px;
}


/**********************/
/* Artworks & Events: */
/**********************/
  
.aw_cont {
  margin: 0 auto;
  margin-top:  var(--liner_gap);
  width: 90%;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  gap: 0px;
  box-sizing: border-box;
  align-items: stretch;
  background: var(--bg_section);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--card_shadow);
}

.aw_info {
  background: var(--bg_text);
  padding: 18px 50px 18px 40px;
  margin-bottom: 0px;
  line-height: 1.5;
  text-align: justify;
  box-sizing: border-box;
  min-width: 0;
}

.aw_info p {
  background: var(--bg_text);
  padding: 0px 0px 0px 0px;   
  margin-bottom: 0px;
  line-height: 1.5;
  text-align: justify;
  box-sizing: border-box;
  min-width: 0;
  margin: 0 0 10px 0;
}

.aw_info .quote {
  color: var(--fc_h1);	
  margin: 10px 40px 10px 40px;
  display: inline-block;        
  box-sizing: border-box;
}

.aw_sh {
  margin: 0 auto;
  margin-top:  20px;
  width: 90%;
  max-width: 900px;
  background: white;
  padding: 15px;
  box-sizing: border-box;
  min-width: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--card_shadow);
}



/***************/
/* Lebenslauf: */
/***************/

.cv_cont {
  margin: 0 auto;
  margin-top:  var(--liner_gap);
  width: 90%;
  max-width: 850px;
  display: grid;
  grid-template-columns: minmax(300px, 600px) 1fr;
  gap: var(--liner_gap);
  box-sizing: border-box;
  align-items: start;  
}

.cv_cont_resp {
  background: var(--bg_text);
  margin: 0 auto;
  margin-top:  var(--liner_gap);
  width: 90%;
  max-width: 900px;
  display: none;
  flex: 1;
  box-sizing: border-box;
  justify-content: left;
  padding: 0px 0px;
  flex-wrap: wrap;
  text-align: center;
  border-radius: var(--radius);
  box-shadow: var(--card_shadow); 
  overflow: hidden; 
  align-items: center;  
}

.cv_cont_resp .section_box {
  flex-basis: 100%;
  overflow:hidden;
  width: 100%;
}
    
.cv_left {
  display: flex;
  flex-direction: column;
  gap: 0 0;
  padding: 0px;
  overflow: hidden;
  border-radius: var(--radius);
  box-sizing: border-box;
  box-shadow: var(--card_shadow);
}

.cv_text {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  align-items: center;   
  justify-content: center; 
  text-align: center;
  padding: 18px 20px 20px 20px;
  background: var(--bg_text);
  box-sizing: border-box;   
}

.cv_right {
  display: flex;
  background: var(--bg_section);
  min-width: 200px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: var(--radius);
  overflow: hidden;
  box-sizing: border-box;
  border: 3px solid var(--bg_section);
  box-shadow: var(--card_shadow);
}

.cv_imagebox img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
  overflow: hidden;
  object-fit: contain;
  box-sizing: border-box;
  border-radius: 0 0 var(--radius) var(--radius);
}

.cv_text svg {
  width: 100px;
  height:100px;
  stroke: var(--bg_section); 
  transition: transform 0.3s ease, stroke 0.3s ease;
  cursor: pointer;
}

.cv_text svg:hover {
  transform: scale(1.00);
  stroke: #e67d00;
}


/**************/
/* Impressum: */
/**************/


.imp_cont {
  color: var(--fc_section);
  background: var(--bg_navi);	
  margin: 0 auto;
  margin-top:  calc(3 * var(--liner_gap));
  width: 100%;
  height:auto;
  display: flex;
  box-sizing: border-box;
  padding: 15px 5px;
  align-items: center;
  text-align: center;
  justify-content: center;
  flex-direction: column;
}

.imp_sec {
  margin: 0 auto;
  padding: 0;
  width: 90%;
  max-width: 800px;
}

.imp_text {
  text-align: justify;
  margin: 0 auto;
  padding: 0;
  width: 90%;
  max-width: 800px;
  transition: max-height .35s ease, opacity .25s ease;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  pointer-events: none; 
}

.imp_toggle {
  background-color: var(--bg_section);
  color: var(--fc_section);
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: var(--fs_tiny);
  transition: color 0.3s ease;
}

.imp_toggle:hover { color: white;}

.imp_text.show{
  max-height: 1000px;      
  opacity: 1;
  pointer-events: auto;   
  margin-top: 6px;
}


/********************/
/* Responsive Mode: */
/********************/
  
@media (max-width: 700px) {

  #profil, #news, #cv, #publikationen, #kontakt, #aw {
  scroll-margin-top: 0px;
  }
  
  :root {
  --ml: 18px;
  --mr: 20px;
  --msl: 15px;
  }

  body {min-width: 0;}
  nav {position: static;}
  
  h1 {
  padding: 0 15px;
  margin: 0 0 15px 0;
  font-size: 25px;
  letter-spacing: -0.1rem;
  text-shadow: 1px 1px 5px lightgrey;  
  }
  
  h3 {
  padding: 0;
  margin: 0 0 0 0;
  font-size: 16px;
  letter-spacing: 0rem;
  text-shadow: 1px 1px 5px grey;
  font-weight: normal;
  }
    
  .navwrap {
  color: white;
  width: 100%;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: space-between;
  gap: 13px;
  padding: 10px 20px 15px 20px;
  }
  
  .nav_welc {font-size: 18px; margin-top: 10px;}
  
  .navlinks {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  gap: 13px 20px;
  line-height:1.0;
  padding: 0;
  }
  
  .navwrap a { padding: 0; white-space: nowrap; }
  
  .profil_cont {width: 100%; grid-template-columns: 100%; grid-template-rows: auto auto; gap: var(--liner_gap);}
  .profil_left {width: 72%; margin: 0 auto;}
  .profil_right {width: 90%; margin-left:auto; margin-right: auto; padding: 20px var(--mr) 10px var(--ml); border:none;}
  .profil_right p {text-align: justify;}
  .profil_right p.emph {margin: 0 10px 15px 10px;}
  .profil_imagebox img {border-radius: 0 0 0 0;}
  
  .section_box {padding: 14px 14px 14px var(--msl);}  
    
  .news_cont {
  width: 90%;
  max-width: none;
  display: flex;
  flex-direction: column;
  }
  
  .news_cont button {display: flex;}  
  .news_item {padding: 18px var(--mr) 10px var(--ml);}
  .news_item p {margin-bottom: 8px;}
  .news_item p.hide {opacity: 0; max-height: 0; overflow: hidden; margin-bottom: 0px;}
  .news_liner {border-left: 0px; border-right: 0px; height: 2px;}
  .news_title {text-align: left;}
  
  .news_img {
  float: none; 
  display: block;               
  width: 100%;                   
  max-width: none;              
  margin: 5px 0 0px 0px;        
  object-fit: cover;
  }
  
  .pub_cont {width: 90%; max-width: none; display: flex;}
  .pub_item {padding: 10px var(--mr) 10px var(--ml);} 
  .pub_item ul {padding-left: 0.75rem;}
  
  .cv_cont {display: none;}
  .cv_cont_resp {width: 90%; display: flex; }
  .cv_text {padding: 10px var(--mr) 5px var(--ml); font-weight: bold; color: var(--fc_h1)}
  .cv_text p {margin: 0 0 5px 0; line-height: 1.5;}
  .cv_imagebox img {border-radius: 0 0 0 0;}

  .aw_cont {width: 90%; display: flex; }
  .aw_info {padding: 10px 30px 10px 28px;}
  
  .aw_info .quote {
  margin-top: 10px;                           
  display: inline-block; 
  margin: 10px 15px 10px 15px;
  box-sizing: border-box;
}
  
  .aw_sh {
  margin: 0 auto;
  margin-top:  25px;
  width: 85%;
  background: transparent;
  padding: 0px;
  box-sizing: border-box;
  min-width: 0;
  border-radius: var(--radius_slides);
  overflow: hidden;
  box-shadow: none;
  }
  
  .imp_cont {margin-top:  calc(2 * var(--liner_gap));}
  
}