/* SEITENSTRUKTUR 
body
	rahmen
		inh1
			[hnrgnd/bild]
		inh2 [INHALTE: TEXT und BILD]
			head
			main
			foot
				foot-box
				foot-box
				foot-box
			impr
	rahmen
body
SEITENSTRUKTUR */

/* FLEX-LAYOUT (inh2: margin-left obligatorisch hier) */
*       { box-sizing: border-box; }
body    { display: flex;  align-items: center; height: 100vh; }
.rahmen { display: flex; flex-direction: row; width: 100vw; height: 100vh; }
.inh1   { width: 50%; height: 100vh; position: fixed; overflow: hidden; }
.inh2   { width: 50%; height: 100vh; margin-left: 50%; overflow-y: auto; overflow-x: hidden;}
.main   { height: auto; overflow-y: auto; /* Scrollen bei Überlauf aktivieren */ }
.foot   { display: flex; flex-direction: row; width: auto; height: auto; }
.foot-box   { width: 100vw; height: auto; }

/* Media Queries: Anpassungen für kleinere Bildschirme */
@media (max-width: 800px) { 
body             { display: flex;  align-items: flex-start; margin-left: 5px;}
    .rahmen      { flex-direction: column; height: auto;  }
    .inh1, .inh2 { width: 100%;  position: static;}
    .inh1        { height: 40vh; } 
    .inh2        { height: 60%; } 
    .inh2        { order: -1; margin-left: 0; } 
    .head        { padding: 0px; } 
    .head h1     { padding-top: 0px; } 
    .main        { padding-top: 0px; padding-left: 0px; } 
    .foot        { padding-top: 0px; padding-left: 0px; flex-direction: column; } 
    .foot-box    { margin: 5px 0; } 
}

/* BILDER */
.inh2   { background-image: radial-gradient(circle, rgba(10, 15, 37, 0) 60%, rgba(10, 15, 37, 0) 90%, rgba(10, 15, 37, 0) 100%), 
		  url("assets/bgrnd_right.svg"); background-repeat: no-repeat; background-size: 42%; background-position: center center;}
/*.inh1 {background-image: url("assets/bild0.jpg"); background-repeat: no-repeat;  background-size: cover; background-position: center center;}*/
/*.inh2 {background-image: url("assets/bgrnd_right.svg"); background-repeat: no-repeat;  background-size: contain; background-position: center center;}*/


/* AUSRICHTUNG */ 
img.alignright  {float: right; }
img.alignleft   {float: left; }
img.aligncenter {clear: both; display: block; margin-right: auto; margin-left: auto; }

/* RÄNDER und ABSTÄNDE, ABSATZ-Formatierung*/ 
*            {margin: 0; padding: 0; }
ol, ul       {padding-left: 1em; list-style: circle;} 

.rahmen      {border: none; /* 0px solid transparent; */ } 
.inh1, .inh2 {padding: 0.3em; } 
.head        {margin-bottom: 24px;} 
.head h1     {line-height:0.8em; }
.head h2     {line-height:0.8em; }

.main        {line-height: 1.7em; }
.main        {margin-left: 12px;} 
.main        {margin-right: 12px;} 
.main        {margin-bottom: 24px;} 
.main h2     {margin-top: 10px; margin-bottom: 5px; }
.main h3     {margin-top: 10px; }

.foot        {line-height: 1.3em; }
.foot        {margin-left: 12px;} 
.foot        {margin-right: 12px;} 
.foot        {margin-bottom: 0px;} 
.foot-box    {margin: 0 5px;  margin-bottom: 0; } 

/* ZEICHEN-Formatierung */ 
@font-face {font-family: 'Journal'; src: url('assets/journal.ttf') format('truetype'); }

body {font-family: 'Verdana', sans-serif; }
body {font-size: 18px; font-weight: 200;}
a, a:hover {text-decoration: none; border: none; border-style: none; box-shadow: none; }
.main ol {font-size: 0.9em; } 
.main ul {font-size: 0.9em; } 
ol, ul   {font-size: 0.7em; } 

.head    {font-family: 'Journal', sans-serif; }
.head h1 {font-size: 92px; font-weight: 900; }
.head h2 {font-size: 42px; font-weight: 500; }

.main h2 {font-family: 'Journal', sans-serif; }
.main h2 {font-size: 42px; font-weight: 200; }
.main h3 {font-size: 42px; }

.foot    {font-size: 18px; }
.foot h3 {font-size: 14px; }
.impr    {font-size: 12px; }

.fssnt   {font-size: 12px; }


/* FARBEN */ 
a         {color: #54c3d7; }
a:hover   {color: #F9C74F; }
body      {color: #F0E68C; } 
.head h1  {color: #54c3d7; }
.head h2  {color: #F0E68C; }

body      {background-color: #0A0F25 ; } 
ul,ol     {background-color: transparent; } 
.inh1     {background-color: transparent; } 
.inh2     {background-color: transparent; } 
.head     {background-color: transparent; } 
.main     {background-color: transparent; } 
.foot     {background-color: transparent; } 
.foot-box {background-color: transparent; }

/* ANIMATION */
@keyframes fadein {from {opacity: 0; } to {opacity: 1; } }
body    { animation: fadein 2s; }
a       { transition-duration: 0.5s; border-bottom: 1px dotted #848d96; }
a:hover { transition-duration: 0.1s; border-bottom: 1px dotted #CA486d; }
.foot ul li a       { transition-duration: 0.5s; }
.foot ul li a:hover { transition-duration: 0.1s; }