@import url('./boilerplate.css');

:root {
  --scrollbarWidth: 9px;
  --scrollbarBg: oklch(98.49% 0.016 91.55);
  --scrollbarThumb: oklch(40% 0.185 30);
}
.hs-content {
  scrollbar-width: var(--scrollbarWidth);
  scrollbar-color: var(--scrollbarThumb) var(--scrollbarBg);
}
.hs-content::-webkit-scrollbar {
  width: var(--scrollbarWidth);
}
.hs-content::-webkit-scrollbar-track {
  background: var(--scrollbarBg);
}
.hs-content::-webkit-scrollbar-thumb {
  background-color: var(--scrollbarThumb);
  border-radius: 6px;
  border: 3px solid var(--scrollbarBg);
}

body{
	font-family: Garamond, Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
	background: #fefaee url("../bilder/bg.gif") repeat top left;
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.275;
	color: var(--purpur);/* font-color */
}

h1, h3, h4{
	font-weight: 400;
}
h1{
	font-style: italic;
	/*border-bottom: 1px solid rgba(126, 126, 126, 0.3);*/
	/*padding: 0.25em 0 0.35em 0;*/
	/*margin:0;*/
	position: relative;
	font-size: 2.45rem;
	text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.4);
}
h2{
	font-size: 2.15rem;
	/*padding-bottom: 0.5em;*/
	border-bottom: 5px solid rgba(190, 211, 226, 0.2);
	color: #a9becd;
	text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.4);
	font-weight: 700;
}
h3{
	font-style: italic;
	font-size: 1.75rem;
	color: #585959;
	text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.4);
}
h4{
	text-transform: uppercase;
	letter-spacing: 3px;
	line-height: 24px;
	/*padding: 1em 0;*/
	color: #626a6f;
	border-bottom: 1px solid rgba(126, 126, 126, 0.1);
	text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.4);
}

a{
	color: #308fd9;
	text-decoration: none;
	letter-spacing: 1px;
	font-style: italic;
}
a:hover{
	color: #abcdef;
}
a[rel="noopener"]::after {
	content:" (ext. Link)";
	font-size: smaller;
	color: currentColor;
	font-stretch: ultra-condensed;
	letter-spacing: -0.1px;
	}

.hs-headline::before {
   position: absolute;
   content: "5";
   z-index: -1;
   text-align: center;
	display: block;
   top: 4em;
   font-size: 2000%;
   overflow: hidden;
   color: rgba(44,43,43,0.4)
}

.hs-headline h1 {
	font-size: 2.2em;
	text-align: center;
	padding-top: 0.5em;
}
.hs-headline h1::after {
	content: 'Ausgabe 2023';
	font-size: 0.80%;
	text-align: center;
	font-weight: 300;
	text-transform: uppercase;
	color: white;
}

.hs-author-name { /* Autor Name über Navliste */
	text-transform: uppercase;
	display: block;
	letter-spacing: 1px;
	font-weight: 400;
	padding: 1em 0;
	border-bottom: 1px solid rgba(126, 126, 126, 0.3);
	color: white;
}
.hs-author-name:before {
	content: 'Dr. med.';
	text-transform: none;
	display: block;
	text-align: center;
	letter-spacing: 0;
	font-weight: 300;
	color: white;
}
.hs-headline a { color: #fff; }

.hs-menu{
	position: fixed;
	z-index: 100;
	color: #f8f8f8;
	background-color: #600;
	width: 200px;
	left: 0px;
	top: 0px;
	height: 100%;
	overflow: hidden;
}
.hs-menu nav {
	position: absolute;
	top: 13em;
	left: 0;
	right: 0;
	bottom: 0;
	overflow-y: auto;
	overflow-x: hidden;
}
.hs-menu nav a {
	display: block;
	padding: 0.75em 1em;
	text-align: center;
	line-height: 1;
	outline: none;
	border-bottom: 1px dashed rgba(126, 126, 126, 0.5);
	
}
.hs-menu nav a:active{
	box-shadow: 8px 0px 16px #000 inset;
}

.hs-menu nav a span:nth-child(2){
	display: block;
	color: #fff;
	font-style: italic;
	font-weight: 400;
	text-transform: none;
	padding-top: 3px;
	font-size: 110%;
	letter-spacing: -0.1px;
}

/** 
* Now, let's style the content part. 
* As mentioned before, the division with the class .hs-content-scroller 
* will be acting as a mask where any overflow won't be visible. 
* This is basically the same principle as in sliders. 
* The left will be set to 14rem because of the sidebar:
*/
.hs-content-scroller {
	position: absolute;
	left: 14rem;
	right: 0px;
	height: 100%;
	overflow: scroll; /* Importent for horizont scroll useability */
}

/** 
* The next wrapper will have a width which allows all the inner content panels to fit inside 
* of it if stacked horizontally. 
* We'll set the overflow to hidden, 
* because each of our content panels will have a custom scroll bar.
*/
.hs-content-wrapper{
	width: 465rem; /* 7450px gesamtbreite vom leseinhalt */
	position: absolute;
	height: 100%;
	overflow: hidden;
}

/**
* Each content panel is going to have a width of 500 px and float left. 
* We'll add a transition for the background when we hover and when we add a active class: 
*/
.hs-content{
	max-width: 75ch;
	height: 100%;
	float: left;
	border-right: 1px dashed rgba(126, 126, 126, 0.2);
	border-left: 1px dashed rgba(255, 255, 255, 0.5);
	background: transparent;
	-webkit-transition: background 0.3s linear;
	-moz-transition: background 0.3s linear;
	-o-transition: background 0.3s linear;
	-ms-transition: background 0.3s linear;
	transition: background 0.3s linear;
	overflow: scroll;
	padding-bottom: 8rem;
}
.hs-content:hover, .hs-content-active{
	background: #feffee;
}

/**
* When we add the custom scrolling to the content panels, 
* we only want them to be visible when we hover over them: 
*/
.hs-content:hover .jspVerticalBar,
.hs-menu nav:hover .jspVerticalBar{
	opacity: 1;
}

/* add some padding and style the text elements */
.hs-inner {
	padding:1.5em;
}
/* this applies a top margin to all elements that follow an element. 
	This is a quick way to gain vertical rhythm. */
  .hs-inner * + * {
    padding-top: min(1rem, 5vh); 
  }

.hs-inner p, .hs-inner blockquote, .hs-inner dl, .hs-inner ol {
	font-size: clamp(0.875rem, 0.575rem + 1vw, 1.375rem);
	text-align: justify;
	position: relative;
}
.hs-inner li {
/* Ausrichtung der Literaturliste nach links */
	margin-left:-2rem;
	text-align: left;
}

.hs-inner p:first-of-type::first-letter {
   background-image: linear-gradient(
      45deg,
      hsl(240deg 100% 20%) 0%,
      hsl(289deg 100% 21%) 21%,
      hsl(315deg 100% 27%) 30%,
      hsl(329deg 100% 36%) 39%,
      hsl(337deg 100% 43%) 46%,
      hsl(357deg 91% 59%) 54%,
      hsl(17deg 100% 59%) 61%,
      hsl(34deg 100% 53%) 69%,
      hsl(45deg 100% 50%) 79%,
      hsl(55deg 100% 50%) 100%
      );
	color: transparent; /* for cliping the background to the text */
      -webkit-background-clip: text;
/* The first argument defines the size of the letter and how many lines it will occupy. The second argument defines the letter sink */
   initial-letter:2 2;
   font-weight: bold;
	font-size: 2.5em;
   margin: 0;
   padding: 0;
	text-align: left;
	line-height: 1;
	font-style: normal;
	letter-spacing: 0px;
}

.logo { /* paypal lable */
	margin-bottom:-4px; 
	max-height:24px;
	}

.st0 { fill-rule:evenodd; clip-rule:evenodd; } /* yingyan logo #chapter7 */

.bookname {
  color: transparent;
  text-shadow: 1px 1px 0 #600;
  text-decoration-line: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 3px;
}

/* visibel only on mobile divices */
a.hs-totop-link{
	display: none;
	position: fixed;
	z-index: 30000;
	bottom: 7px;
	min-width:100%;
	width: 100vw;
	height: 40px;
	line-height: 24px;
	font-size: 16px;
	color: #CCC;
	text-shadow: 1px 1px 1px #fff;
	font-weight: 700;
	cursor: pointer;
	text-transform: uppercase;
	text-align: center;
	background: #feefee; /* Old browsers */
	/*background: linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ff0000 100%);*/
	border-top: 1px solid #cacaca;
}

/*-------------------------------------------*\ 
	Buttons 
\*-------------------------------------------*/
.button {
	display: inline-block;
/* zoom: 1;  zoom and *display = ie7 hack for display:inline-block 
	*display: inline;*/
	vertical-align: baseline;
	margin: 2em 0.5em;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	padding: 0.75em 2em .75em;
	text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.2);
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
	text-decoration: none;
	color: #600;
}
.button:active {
	position: relative;
	top: 1px;
}
.button:focus { /* normal - old Browser */
  outline: 2px solid #600 ;
}
.button:focus:not(:focus-visible) { /* modern Browser: hide focus styles if they're not needed, for example when an element receives focus via the mouse. */
  outline: 0;
}
.button:focus-visible { /* Show focus styles on keyboard focus. */
  outline: 3px solid #600;
}
/* white */
.white {
	color: #308fd9;
	border: solid 1px #b7b7b7;
	background: #feefee;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
	background: -moz-linear-gradient(top, #fff, #ededed);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
}
/*.white:hover {
	background: #ededed;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
	background: -moz-linear-gradient(top,  #fff,  #dcdcdc);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
}
.white:active {
	color: #999;
	background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
	background: -moz-linear-gradient(top,  #ededed,  #fff);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');
}
*/

/* Normal styles for the modal */

#modalbox {
	position:absolute;
	min-height:50%; top:-50%; 
	width:80%; left:50%; margin-left:-40%;
	opacity: 0;
	visibility: hidden;
	  -moz-transition: all 0.4s ease-in-out;
	  -webkit-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}
#modalbox .overlay {
	position: fixed;
	top: 0; left: 0;
	height: 100vh;
	width: 100vw;
	z-index: 10000;
	background: rgba(102,0,0,0.75);
}	
.modalbox-content {
	position: relative;
	z-index: 100001;
	background: #f7f7f7;
	text-align:left;
	border-radius:5px;
	box-shadow:0 3px 7px rgba(0,0,0,.25);
	box-sizing:border-box;
}
#modalbox .header, #modalbox .footer {
	border-bottom: 1px solid #e7e7e7;
	border-radius: 5px 5px 0 0;
}
#modalbox .footer {
	border:none;
	border-top: 1px solid #e7e7e7;
	border-radius: 0 0 5px 5px;
	text-align: right;
	}
#modalbox h2 {
	margin:0;
	}
#modalbox .copy, #modalbox .header, #modalbox .footer {
	padding:15px;
	}
#modalbox .copy {
	background: #eee;
}

#closeBtn {
	margin:0 0 1em 0; 
	border: 1px solid #ccc;
	color:#fff;
	padding:3px 16px;
	text-decoration:none;
	border-radius:16px;
	box-shadow:0 1px rgba(0,0,0,.35);
	}
#openBtn {/*background:rgba(102,0,0,0.75);*/ display:inline-block; }
#closeBtn {display:none;}

/* Make the modal appear when targeted */
#modal:target #modalbox { opacity: 1; visibility:visible; top:25%; }
#modal:target #openBtn { display:none; }
#modal:target #closeBtn { display:inline-block; background:rgba(102,0,0,0.75);}

/* ===============================================================*/
/* Media Queries */
/* ===============================================================*/

/*When we reach the size of the iPad, we want to get rid of the hover behavior and show the horizontal scrollbar. This will allow us to "swipe" the content on the iPad:*/
@media screen and (max-width: 64.1rem ) /*1024px*/{
	.jspVerticalBar{
		opacity: 1;
	}
	.hs-content-scroller{
		overflow-x: scroll;
	}
	.hs-content:hover{
		background: transparent;
	}
	.hs-content-active:hover {
		background: #f1f5f8;
	}
} /* end of @media max-width: 1028px */

/* At this point, we'll change the layout in order to be stacked vertically. We have to "reset" all the properties that forced the content to be stacked horizontally. We'll also show the anchor that will bring us back to the top: */

@media screen and (max-width: 45.1rem) /*715px*/{
	:root { 
     line-height: 1; 
	} 
	body {
      overflow-x: hidden;
		overflow-y: scroll;
	}
	a.hs-totop-link{
		display: block;
	}
	.hs-menu{
		position: relative;
		width: 100%;
		height: 720px;
		overflow: hidden;
	}
	.hs-menu nav{
		top: 10rem;
		/*bottom: 0;*/
	}
	
	.hs-content-scroller{
		position: relative;
		height: auto;
		left: 0;
		overflow:scroll; /* Importent for horizont scroll useability */
	}
	.hs-content-wrapper{
      height: auto;
      width: auto;
      margin: 0px;
      position:relative;
      overflow: visible;
	}
	.hs-content{
		border: none;
		width: auto;
		float: none !important;
		overflow: scroll;
	}
	.hs-content:hover, .hs-content-active{
      background: #feffee; width:100%;
	}
	.hs-headline:before{
      display: none;
      top: 0;
      font-size:0;
      overflow: hidden;
      color: transparent;
      visibility: hidden;
  }
} /* end of @media max-width: 45.1rem * /

/*
 * CSS Styles that are needed by jScrollPane to operate correctly. 
 * jScrollPane may not operate correctly without them.
 */

.jspContainer {
	overflow: hidden;
	position: relative;
}

.jspPane {
	position: absolute;
}

.jspVerticalBar {
	position: absolute;
	top: 0;
	right: 5px;
	width: 7px;
	height: 100%;
	background: transparent;
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	-moz-transition: opacity 0.2s linear;
	-o-transition: opacity 0.2s linear;
	-ms-transition: opacity 0.2s linear;
	transition: opacity 0.2s linear;
}

.jspHorizontalBar {
	position: absolute;
	bottom: 5px;
	left: 0;
	width: 100%;
	height: 7px;
	background: transparent;
}

.jspVerticalBar *,
.jspHorizontalBar * {
	margin: 0; padding: 0;
}

.jspCap {
	display: none;
}

.jspHorizontalBar .jspCap {
	float: left;
}

.jspTrack {
	background: rgba(202, 202, 202, 0.2);
	position: relative;
}

.jspDrag {
	background: rgba(255, 255, 255, 0.8);
	position: relative;
	top: 0;
	left: 0;
	cursor: pointer;
}

.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag {
	float: left;
	height: 100%;
}

.jspArrow {
	background: #50506d;
	text-indent: -20000px;
	display: block;
	cursor: pointer;
}

.jspArrow.jspDisabled {
	cursor: default;
	background: #80808d;
}

.jspVerticalBar .jspArrow {
	height: 16px;
}

.jspHorizontalBar .jspArrow {
	width: 16px;
	float: left;
	height: 100%;
}

.jspVerticalBar .jspArrow:focus {
	outline: none;
}

.jspCorner {
	background: #eeeef4;
	float: left;
	height: 100%;
}

/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner {
	margin: 0 -3px 0 0;
}