* {
  --header-height: 100px;  
  --title-height: 4.0em;   /* wie hoch Dein h1 tatsächlich sein soll */
  --footer-height: 20px;
}

body {
  margin: 0;
  font-family: sans-serif,tahoma,helvetica,arial;
  /* top right left = 0, bottom = --footer-height */
  padding: 0 0 var(--footer-height) 0;
}


.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 5%;
  background: linear-gradient(to right, #777, #454545, #1a1602, #454545, #777);
  z-index: 100;
  box-shadow: 0px 5px 10px #551A8B;
}

.header__content {
  display: flex;
  align-items: center;        /* vertikal zentrieren */
  justify-content: flex-start;/* beide Items am linken Rand */
  column-gap: 30px;           /* Abstand zwischen Logo und Nav */
}

.header__logo img {
  display: block;
  height: 100px; width: auto;
}

.header__middle {
  font-family: 'meine-schrift',sans-serif,tahoma,helvetica,arial;
  font-weight: bold;
  font-size:20px;         /*Größe Text */
  font-style:  normal;
  color: #ffffff;
  text-align: center;
  margin-top: -10px;
  margin-bottom: -10px;
  padding-top: 0px;
}

/* julee-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'meine-schrift';
  font-style: normal;
  font-weight: 600;
  src: url('/backinfos/julee-v25-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


.header__navigation {
	width: max-content;
}

.header__navigation ul {
	padding: 0;
    margin: 0;
	list-style: none;
    position: relative;
}
	
.header__navigation ul li {                /*Aussehen der Buttons in der Navileiste */
    display:inline-block;
    margin: 0px 0px;
    border-top:    0;
    border-bottom: 0;
    border-left:   2px solid transparent;
    border-right:  2px solid transparent;
    border-image-source: linear-gradient(to bottom,red,
      orange,
      yellow,
      lightgreen,
      cyan,
      #551A8B
    );
  border-image-slice: 1; 
  /* border-image-width: 2;  // optional, wenn Du mehr Kontrolle willst */
}

.header__navigation a {                    /*Aussehen der Links in der Navileiste */
	display:block;
	padding:0 10px;	        /*Abstand nach oben&unten zum Rand des Buttons und nach li&re*/
	color:#ffffff;             /*Farbe Text */
	font-size:100%;         /*Größe Text */
	line-height: 35px;      /*Höhe der einzelnen Button */
	text-decoration:none;
}

.header__navigation a:hover {                  /*Aussehen der Links in der Navileiste wenn Maus drauf*/
	background-color: #551A8B;  /*Hintergrund*/
    color: #ffffff;
}

/* Hide Dropdowns by Default */
.header__navigation ul ul {
	display: none;
	position: absolute; 
}
	
/* Display Dropdowns on Hover */
.header__navigation ul li:hover > ul {
	display:inherit;
    background: #ffffff;
}
	
/* First Tier Dropdown */
.header__navigation ul ul li {
	width:200px;        /*Breite des Submenu*/
    left:-2px;           /*Verschiebung des Submenu nach rechts (also Abstand nach links)*/
	float:none;
	display:list-item;
	position: relative;
	border-bottom: 1px solid #000000;
    box-shadow: 2px 2px 5px #551A8B;
}
.header__navigation ul ul li a {                  /*Aussehen der Links in der Navileiste wenn Maus drauf*/
    color: #000000;
}


/* Second, Third and more Tiers	*/
.header__navigation ul ul ul li {
	position: relative;
	top:-60px; 
	left:170px;
}


.main {
  /* 1) Höhe = Viewport – Header – Footer */
  min-height: calc(
    100vh 
    - var(--header-height) 
    - var(--footer-height)
  );
  /* 2) Innenabstand oben/unten, damit nichts unter Header/Foo­ter rutscht */
  padding-top: var(--header-height);
  padding-bottom: var(--footer-height);

  /* Dein übriges Layout */
  padding-left: 5%;
  padding-right: 5%;
  box-sizing: border-box;
}

.main_content {
  width: 100%;
  border: 0px solid red;
  padding: 0 2%;
}
.main a,
.main a:visited {
color: #551A8B;
  font-weight: bold;
  text-decoration: none;       /* was im Kern hinter text-decoration steckt */
}
.main a:hover {
  text-decoration-line: underline;       /* was im Kern hinter text-decoration steckt */
  text-decoration-color: #551A8B;        /* Farbe des Unterstrichs */
  text-decoration-style: wavy;           /* Stil: solid | dashed | dotted | wavy */
  text-decoration-thickness: 1px;        /* Dicke des Unterstrichs */
}

.content_two {
  display: flex;
  gap: 2%;                   /* anstatt padding-left/right in .main_content */
  /* optional: align-items: flex-start;  sorgt dafür, dass alle Kinder oben beginnen */
}
.content_left {
  flex: 0 0 20%;             /* festes 20 %-Breite */
  padding: 10px;
  box-sizing: border-box;
border-right: 1px dotted #555;
text-align: justify;
}
.content_right {
  flex: 1;                   /* füllt den restlichen Platz (entspricht ca. 64 %) */
  padding: 10px;
  box-sizing: border-box;
	margin: 0px 0px 10px 0px;
}


.footer {
position: fixed;
bottom: 0;
padding: 5px;
width: 100%;
background: #333;
color: #fff;
z-index: 100;
}
.footer_content {
display: flex;
justify-content: center;
align-items: center;
padding: 0 5%;
}
.footer_content a,
.footer_content a:visited {
color: #fff;
text-decoration: none;
}
.footer_content a:hover {
color: #ccc;
}


h1, h2, h3, h4, h5, h6 {
	text-shadow: 1px 1px 20px #551A8B;
    font-family: 'meine-schrift',sans-serif,tahoma,helvetica,arial;
    font-weight:400;
    border: 0px solid #000;
}


h1 {
  margin: 0;
  margin-left: -30px;
  position: sticky;
  top: var(--header-height);
  padding: 2.0em 0 1.5em 30px;          /* Text–Innenabstand: oben rechts unten links */
  width: calc(100% + 30px);      /* Gesamte Breite + 2px kompensieren */
  background: #ffffff;
  z-index: 90;
  font-size: 200%;
}
h2 {
	padding-bottom: 0.2em;
    padding-top:1em;
    font-size: 160%;
}
h3 {
	padding-bottom: 0.2em;
    padding-top:1em;
    font-size: 130%;
}

h2.news {
  display: table;               /* Block-level, aber autobreite */
  margin: 0 0 0.5em;              /* wie gewohnt Abstand nach unten */
  position: relative;           
  padding-bottom: 0.2em;       
  font-size: 130%;
  /* alles wie gehabt… */
  font-family: 'meine-schrift', sans-serif, tahoma, helvetica, arial;
  font-weight: 400;
  text-shadow: none;
}

h2.news::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;                  /* exakt so breit wie das h2 (= Table) */
  height: 2px;
  background: linear-gradient(to right,red,orange,yellow,lightgreen,cyan,#551A8B);
}





table.pubTable {
	width: 100%;
}


table.pubTable.odd {
	text-align: left;
	width: 100%;
    background: #F4F4F4;
}
table.pubTable.even {
	text-align: left;
	width: 100%;
    background: #E5D2F6;
}

table.pubTable th {
	background-color: #000;
	color: #FFCB6C;
}

table.pubTable tr:hover {
	background-color: #FFCB6C;
}

table.pubTable .no {
	padding: 2px;
	text-align: center;
	width: 40px;
}

table.pubTable .title {
	padding: 10px 5px;
	text-align: left;
	width: 300px;
}

table.pubTable .toc {
	padding: 10px 0px;
	text-align: center;
	width: 400px;
}

table.pubTable .cit {
	padding: 10px 5px;
	text-align: left;
}

table.pubTable .link {
	padding: 10px 5px;
	text-align: center;
	width: 36px;
}

table.pubTable .conf {
	padding: 10px 5px;
	text-align: center;
	width: 200px;
}

table.pubTable .loc {
	padding: 10px 5px;
	text-align: center;
	width: 150px;
}


img.grouppic {
	display: block;
	text-align: center;
    margin: 2px;
    margin-top: 20px;
    box-shadow: 2px 2px 5px #551A8B;
}
img.member {
	width: 222px;
    border: 1px solid #454545;
    box-shadow: 5px 5px 10px #551A8B;
}

img.tocimage {
  height: auto;
  width: auto;
}
img.tocimage.portrait { max-width: 150px;}
img.tocimage.wide {  max-width: 400px;}
img.tocimage.wide2 {  max-width: 300px;}
img.tocimage.normal {  max-width: 200px;}

img.coverimage.portrait { max-width: 220px;}
img.coverimage.normal {  max-width: 220px;}


figure.research {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

figcaption.research {
	display: block;
	font-style: italic;
	margin-left: 20px;
	margin-right: 20px;
}

img.research {
	display: block;
	margin-left: 20px;
	margin-right: 20px;
	text-align: center;
}




/*

.links li {
	color: #000;
	margin: 0px 15px 0px 0px;
	padding: 0px 15px 5px 0px;
	text-align: left;
	vertical-align: middle;
}

.links a {
	color: #006400;
	text-decoration: none;
}

.links a:hover {
	background: #006400;
	color: #FFF;
}


.date {
	font-size: 80%;
	margin: 0px;
}
*/