:root {
  --primary-color: black;
  --secondary-color: linen;
  }

*{
	font-family: Bembo;
	color: var(--primary-color);
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-size: 24px;
	text-decoration-thickness: 1px !important;
	text-underline-offset: 3px !important;
	text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1;
  font-kerning: normal;
  scroll-behavior: smooth;
  background-color: none;
  word-spacing: -1px;
  max-width: 100vw;
  mix-blend-mode: multiply;
/*  overflow-x: hidden;*/

}


body{
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: brown;

}

section{
	min-height: 100vh;
	
	padding: 1rem 0 10rem 0;
/*	background-color: brown;*/

}


.left, .right {
  padding: 2rem;
  overflow-y: auto;
}

.gutter {
	position: fixed;
    display: flex;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;	
    z-index: -1;

}
.left-gutter{
	width: 50%;
  height: 100%;
  box-shadow: 0px 0 27px 0 black;
}

.right-gutter{
	width: 50%;
  height: 100%;
  box-shadow: 0px 0 27px 0 black;
}

h1,h2,h3,h4,h5,h6,p,ul,hr,ol{
	margin-left: 50vw;
	padding: 0 2rem 0rem 2rem;
}



ul ul{
	margin-left: 0;
	padding-left: 1.5rem;
}

li{
	list-style: decimal-leading-zero;
	padding-left: .5rem;
/*  text-indent: -.95rem;*/
}

ol {
  list-style: outside;  
  padding-left: 5.5rem;
}

ul{
	margin-left: 50vw;
	padding-left: 5.5rem;
}



ul li{
	list-style: disc;
}

.index ol{
	padding: 0;
}

.smalltype{
	font-size: 1rem;
	text-indent: 0;
	font-weight: normal;
}

p{
/*	position: relative;*/
	pointer-events: auto;
	z-index: 10;
	padding-left: 5.85rem;
	text-indent: -2rem;
/*	list-style: none;*/
}

#material > p,
#links > p,
.aufgaben > p,
.minutes p,
	.submissions > p,{
	padding-left: 5.85rem !important;
	text-indent: -2rem;
}

hr{
	color: black;
	border-width: .5px;
	border-style: solid;
	margin: 20px 2vw 10px 52vw;
}




ol {
  list-style-type: decimal; 
}


li > p{
	margin:0;
	padding: 0 2vw 0 0rem;
	text-indent: 0rem;
}

img{
	position: absolute;
	left: 3vw;
	filter: grayscale(100%);
	max-width: 43vw;
	max-height: 100vh;
/*	margin: 2rem 0 4rem 0;*/
}

img, p > img{
	mix-blend-mode: multiply;
}


.submissions {
/*padding-top: 2rem;*/
/*column-count: 2;*/
	max-width: 100vw;
	mix-blend-mode: multiply;
}


.protokolle .contains-images,
.submissions .contains-images,
.contains-images{
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: 0;
	padding: 0;
}

.contains-images > *:not(img) {
  position: absolute;
  color: yellow;
}

.submissions > p > img,
.protokolle img,
.submissions > :is(p, h2, h3, h4, h5, h6){
	position: relative;
	display: block;
	padding: 0;
	margin: 0;
	text-indent: 2rem;
	
}
.submissions > p{
/*	width: 100vw;*/
/*	display: block;*/
}

.submissions > p > a,
.submissions h3 {
	display: block;
	margin: -0rem 0 1rem 50vw;
/*	padding-left: 2rem;*/
	width: 50vw;
}

.submissions hr {
	margin: 0px -50vw 22px 1.5vw;
	width: 46vw;
}

/*.protokolle > p > img{
	margin-left: -50vw;
	column-count: 2;
}*/

/*.protokolle > p > img + img{
	margin-left: 0;
}*/

.submissions > :is(h2,h3,h4) {
/*	column-span: all;*/
/*	padding-top: 1rem;*/
}

.submissions > h5,p {
	break-inside: avoid-column;
}


.submissions > p > img,
.protokolle img{
	padding: 5px 0;
	break-after: column;
}






code{
	font-family: Courier New, monospace;
}

strong{
	font-weight: normal;
	letter-spacing: 5px;
}



h1, h1 > i, h1 > em{
	font-size: 4rem;
	text-align: center;
	letter-spacing: -1px;
	line-height: 1.1em;
}

h2, h2 > a{
	font-size: 2rem;
	padding-left: 2rem;
	line-height: .95em;
	padding-bottom: .25rem;
	text-decoration:none;
/*	text-align: center;*/
}

h2 > a{
	padding-left: 0rem !important;

}

h3{
	padding-top: .5rem;

}

h3,h4{
	font-weight: 600;
	text-transform: uppercase;
}



h4{
	text-shadow: -.1px -.1px 0 #000, .1px -.1px 0 #000, -.1px .1px 0 #000, .1px .1px 0 #000;
	text-transform: none;
	padding-top: .5rem;
	padding-left: 3.75rem;
	font-weight: normal;
	text-transform: uppercase;
}


h5{
	font-weight: bolder;
	padding-top: .25rem;
}

.pagina{
	position: absolute;
	right: 2rem;
/*	padding: 1rem 4rem 0rem 27.5rem;*/
	font-weight: normal;
	text-align: center;
}

a.arrow{
	position: fixed;
	margin: -.35rem 0 0 0;
	top: 0;
	left: 0;
	z-index: 9999;
	text-decoration: none;
	font-size: .8rem;
	padding: 10px;
	display: inline-block;
	pointer-events: auto;
	text-indent: 2rem;
/*	outline: 2px solid;*/
/*	background-color: none;*/
}



#title > h2, #title > p{
	text-align: center;
	padding-left: 2rem;
	text-indent: 0;
}




#intro{
	position: relative;
}

#index > ol li {
  position: relative;
  padding-left: 2em;
  list-style: none;
}

#index > ol li::before {
  content: counter(list-item) " ";
  position: absolute;
  right: 2em;
  text-align: right;
  width: 2em;  
}

blockquote, blockquote > p{
	font-style: italic;
	padding: 0 1rem 0rem 2rem;
	text-indent: -2rem;
}

.blankpage{
	height: 110vh;
}

.halfpage{
	height: 50vh;
}

/*----------PHONES----------*/

@media only screen and (max-width: 600px) and (orientation: portrait) {

*{
	font-size: 18px;
	padding-right: .05rem;
}

/*	.submissions{
		column-count: 1;
	}*/

	h1,h2,h3,h4,h5,h6,p,li, hr{
	margin: 0;
	padding: 0 0rem 0rem 0rem;
}

h2{
	font-size: 1.5rem;
}

#title > :is(h2,p) {
	padding: 0;
}

.contains-images{
	grid-template-columns: 1fr !important;
}

p{
	text-indent: 1rem;
	hyphens: auto;
}

img{
	      position: static;
        width: auto;
        height: auto;
        max-height: none;
        max-width: 90vw;
        margin-left: -4rem;
        text-indent: 0;
}


#index img,
#intro img{
	margin-left: -1rem;
}
#title img{
	margin-left: 0rem;

}

blockquote, blockquote > p{
	text-indent: -1rem;
	padding: 0 0rem 0rem 0.5rem;
}

#index ol > li, ol{
		margin-left: 0;
/*		padding: 0;*/
	}

	#assignment-01 :is(ol),
	#abgaben :is(h3,li,ol,hr){
		padding-left: .5rem;
		margin: 0 0 0 1rem;
		width: 100%;
		display: inline-block;
	}

	li{
		padding-left: .5rem;
	}
	#assignment-01 p,
	#protokolle p,
	ul{
		margin-left: 1.5rem;
		padding-left: .5rem;
		padding-right: 0;
	}


a.arrow{
	font-size: .9rem;
	padding: 10px;

/*	margin: -18px -10px -55px -10px;*/
}

	#title > p > img, .gutter {
    display: none; /* Gutter ausblenden */
  }
  #title{
/*  	height: 100vh;*/
  }

  .pagina{
  	right: 1rem;
  	margin-top: -1rem;
  }



section{
	min-height: unset;
	padding: .5rem 1rem 4rem 1rem;
	width: 100%;
}

  .halfpage, 
  .blankpage{
  	min-height: none;
  }



}


@media only screen and (min-width: 1450px) and (orientation: landscape) {

*{
	font-size: 24px;
}

#title {
	font-size: 2.5vw !important;
	padding-top: 10vh ;
}

#title img {
	margin-top: -10vh;
}

#title :is(h1,em) {
	font-size: 4rem !important;
}


#index > ol > :is(li,p,a),
#index > ol > :is(li,p,a) > :is(li,p,a) > a{
	font-size: 2rem;
	text-decoration: none;
	text-indent: 0;
	padding-left: 2rem;
}

#intro > :is(p,a,strong),
#einschreibeaufgabe :is(p,a,strong) {
	column-count: 2;
}

#intro br,
#einschreibeaufgabe br{
	column-span: all;
}

blockquote{
	padding-right: 10%;
}
img{
	max-width: 42vw;
/*	max-height: 90vh;*/
}

a.arrow, .pagina{
	font-size: 1.5rem;
/*	margin-top: -50px;*/
}


}



@media only screen and (max-width: 900px) and (orientation: landscape) {

*	{
		font-size: 18px;
/*		max-height: 100vh;*/


	}
	body{
/*		height: 100vh;*/

	}

	h1, h1 > em{
		font-size: 6vw;
	}

	h2{
		font-size: 1.5rem;
	}
	h1, h2, h3, h4, h5, h6, p, hr{
		margin-left: 48vw;
/*		padding: 0 0rem 0 1rem !important;*/
	}

	p{
		padding-left: 4rem !important;
	}

	blockquote, blockquote > p{
	text-indent: -1rem;
	padding: 0 0rem 0rem 1rem;
}

	section{
		padding: .5rem 1rem 4rem 1rem;
	}
	p,strong{
		line-height: 1.2em;
	}
ol{
	margin-left: 50vw;
	padding-left: 2.5rem;
}




	a.arrow{
/*		margin: -2rem 0 0 0;*/
	}
	.pagina{
		margin: -1rem 0rem;
	}

.submissions, .submissions > :is(h2,h3,h4,p,img){
		padding: 0 !important;
		margin: 0;
		text-indent: 0;
		column-gap: 10vw;
	}
	.submissions > p > img {
		position: static;
	}

  .gutter {
    display: flex; /* Gutter anzeigen (sofern du es so definiert hast) */
    position: fixed;
    height: 100%;
  }
}