/* ALLGEMEIN */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html { 
	height: 100%;
}

body {
	min-height: 100%;
	height: 100%;
	background-color: rgb(235,237,236);
	color: rgb(60,60,62);
    font-family: "Roboto Slab", serif;
	font-size: 2vh;
}

@media screen and (min-width: 1024px) { 
	body {
		font-size: 2.5vh;
	}
}

a:link, a:visited {
	color: rgb(60,60,62);
	text-decoration: underline;
	font-weight: normal;
}

a:focus, a:hover, a:active {
	text-decoration: none;
}

main, header, article {
	display: block;
	position: fixed;
	top: 50%;
	left: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	-o-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

main {
	width: 100%;
	height: 100%;
	text-align: center;
}

/* HEADER */

header {
	width:100%;
}

header a:link, header a:visited {
	color: rgb(60,60,62);
	text-decoration: none;
	font-weight: bold;
}

header a:focus, header a:hover, header a:active,
header .onlybigscreen:focus, header .onlybigscreen:hover, header .onlybigscreen:active {
	text-decoration: underline;
}

header p {
	padding: 1vh 2vh;
}

header ul, header li {
	display: inline;
	overflow: hidden;
}

header li {
    margin: 0 1vh;
}

.onlybigscreen {
    display:none;
}

button {
	cursor: pointer;	
}

@media screen and (min-width: 1024px) { 
	header li {
		margin: 0 2vh;
	}
	.onlybigscreen {
		display:inline-block;
		padding-left:1vh;
	}
}

.header-flex-container {
	display:flex;
	flex-wrap: wrap;
	flex-direction:row;
	justify-content:center;
	align-items:center;
}

.header-flex-item {
	flex-basis: 100%;
	flex-grow: 1;
	flex-shrink:1;
}

.header-logo {
	width: 20vh;
	margin-top:3vh;
}

.header-btn {
	height:7vh;
	line-height:9vh;
	border:2px rgb(60,60,62) solid;
	border-radius: 10px;
	/*background: rgb(162,169,175);*/
	padding:2vh;	
	text-decoration: none;
	color: rgb(60,60,62);
}

.header-btn:focus, .header-btn:hover, .header-btn:active {
	/*color: rgb(235,237,236);*/
	background:rgb(162,169,175);
	text-decoration:none; 
}

.header-navigation {
	margin-top: 2vh;
}

.banner {
	padding:1vh 10vh;
	position:absolute;
	top:4vh;
	right:-10vh;
	background:rgb(76,88,111);
	transform: rotate(45deg);
	color:rgb(235,237,236);
	font-size:1.3vh;
	border: 2px rgb(60,60,62) solid;
}

@media screen and (min-width: 1024px) { 
	.banner {
		top:5vh;
		right:-10vh;
		font-size:1.75vh;
	}
}


@media screen and (max-width: 1280px) {
	
.banner-yt {
	display:block;
	position:absolute;
	bottom:1.5vh; left:1.5vh;
}
	.banner-yt img {
	width:15vh;
	}
}

@media screen and (max-width: 1024px) {
	
.banner-yt {
	display:block;
	position:absolute;
	top:1.5vh; left:1.5vh;
}
	.banner-yt img {
	width:10vh;
	}
}

@media screen and (min-width: 1280px) {
	
.banner-yt {
	display:block;
	position:absolute; bottom:1.5vh; left:1.5vh;
}
	.banner-yt img {
	width:20vh;
	}
}

/* prüfen wo hin */
.article-flex-container {
	flex-wrap: wrap;
	flex-direction:row;
	justify-content:center;
	align-items:baseline;
}

.article-flex-item {
	flex-basis: 100%;
	flex-grow: 1;
	flex-shrink:1;
}
/* ende prüfen wo hin */


@media screen and (min-width: 1024px) { 
	header {
	max-width:120vh;
	}

	.header-flex-item, .article-flex-item {
		flex-basis:49%;
		flex-grow: 1;
		flex-shrink:1;
	}
	
	.header-flex-item-logo {
		flex-basis:33%;		
	}
	
	.article-flex-item-tool {
		flex-basis:40%;
		flex-grow: 0;
		flex-shrink:0;
	}
	
	.header-logo {
		width: 48vh;
		margin-top:0;
	}
	
	.header-navigation {
		margin-top: 7vh;
	}
}

@media screen and (min-width: 1024px) {
  .SearchTool, .UploadTool {
    align-items: stretch;
    overflow-y: auto;
  }

  .sticky-filters {
    position: sticky;
    top: 8vh;
    align-self: flex-start;
  }
}

/* ARTICLE HEAD */

.article-head {
	z-index: 9999;
	display:block;
    top: 0;
    bottom:0;
    position:sticky;
    overflow-y:hidden;
    overflow-x:hidden;
	height: 7vh;
	width:100%;
	background: rgb(60,60,62);
	color: rgb(235,237,236);
	text-align:center;
}

.article-head h2, .article-head a, .article-head i, .article-head span {
	color: rgb(235,237,236);
}

.article-head h2 {
	display:inline-block;
   height:5vh;
   line-height:5vh;
   padding: 1vh 1vh;
	vertical-align: middle;
}

.article-head a {
	margin-right:2vh;
	display:inline-block;
   height:5vh;
   line-height:5vh;
   padding: 1vh 1vh;
	vertical-align: middle;
	position:absolute;
	top:0;
	right:0;
	vertical-align: middle;
}

.article-head span {
	margin-left:1vh;
}

.article-head a:link, .article-head a:visited {
	color: rgb(235,237,236);
 text-decoration: none;
}

.article-head a:focus, .article-head a:hover, .article-head a:active {
 color: rgba(235,237,236,.5);
 text-decoration: none;
}


@media only screen and (max-width: 1024px) { 
	.close .hide { display: none; } 
}

/* ARTICLE */

article {
	z-index: 9999;
	display:none;
	/*visibility: hidden;*/
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(235,237,236);
	color: rgb(60,60,62);
	text-align: left;
    /*opacity: 0;
	transition: visibility 0s, opacity 0.1s;*/
}

article h1, /*article h2,*/ article h3, article h4,article p, article aside, article form, article details {
	font-weight: normal;
	font-style: normal;
	line-height: normal;
	margin: 2vh;
}

article h3 {
	text-decoration: underline;
}

article aside {
	font-style: italic;
}

article ul, article ol {
	margin: 3vh 3vh 3vh 6vh;
}

article i {
	
}

.p-icon {
	display: block;
	float: left;
	font-size: 3vh;
	width: 4vh;
	text-align: center;
}

.p-text {
	display: block;
	margin-left: 5vh;
}

article a:link, article a:visited {
 color: rgb(60,60,62);
 text-decoration: underline;
}

article a:focus, article a:hover, article a:active {
 color:  rgb(162,169,175);
 text-decoration: none;
}

/* ARTICLE FEEDBACK */

.feedback-btn {
	margin-top:2vh;
	height:7vh;
	border:2px rgb(60,60,62) solid;
	border-radius: 10px;
	padding:2vh;	
	text-decoration: none;
	color: rgb(60,60,62);
}

.feedback-btn:focus, .feedback-btn:hover, .feedback-btn:active {
	/*color: rgb(235,237,236);*/
	background:rgb(162,169,175);
	text-decoration:none; 
	color: rgb(60,60,62);
}

/* ARTICLE UPLOADTOOL UPLOAD */
/*
input[type=file]{
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

input[type=file] + label {
	display:inline-block;
	margin-right:2vh; padding:0;
	height:7vh;	
	line-height:7vh;
	
    vertical-align: middle;
	border:2px rgb(60,60,62) solid;
	border-radius: 10px;
    cursor: pointer;
	color: rgb(60,60,62);
    font-family: "Roboto Slab", serif;
	font-size: 2vh;
	font-weight:bold;
}

input[type=file] + label svg {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
    margin-top: -0.25em;
    margin-right: 0.25em;
}

input[type=file] + label:hover {
	background:rgb(162,169,175);
}

.labelbar {
	display:block;
	width:0%;
	background:rgb(199,235,192);
}

.labeltext {
	margin:0 2vh;
	position:relative;
	display:block;
	top:-7vh;
	width:100%;
}
*/


input[type=file]{
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

input[type=file] + label {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;

	box-sizing: border-box;
	margin-right: 2vh;
	padding: 0 2vh;
	height: 7vh;

	border: 2px solid rgb(60,60,62);
	border-radius: 10px;
	cursor: pointer;

	color: rgb(60,60,62);
	font-family: "Roboto Slab", serif;
	font-size: 2vh;
	font-weight: bold;
	overflow: hidden;
}

.labelbar {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0%;
	background: rgb(199,235,192);
	z-index: 0;
}

.labeltext {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin: 0;
	width: auto;
	top: auto;
}

input[type=file] + label svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
	margin: 0;
}

@media screen and (min-width: 1024px) { 
	input[type=file] + label {
		font-size: 2.5vh;
	}
}

/* ARTICLE UPLOADTOOL FILELIST */

details {
	padding:0;
	border:3px rgb(60,60,62) solid;
	border-radius: 10px;
	background: rgb(235,237,236);	
}


.details p, .details ul {
	margin:0;
	padding:2vh;
}

.details ul li {
	display:inline-block;
	width:100%;
	padding: 2vh 0;
	border-top:2px rgb(60,60,62) dotted;
	list-style-type:none;
	 
}

.details ul li ul {
	margin:0;
	padding:3vh 0 0 0;
}

.details ul li img {
	width:15vh;
	float:right;
    cursor: pointer;
	transition: width 0.2s;
}

.details ul li img:focus {
	margin:0;
	padding:0;
	box-sizing: border-box !important;
	display:inline-block;
	margin-bottom:2vh;
	width: 100%;
	border:3px rgb(60,60,62) solid;
	border-radius: 10px;
	background-color: rgb(235,237,236);
	pointer-events: none;
}

.details ul li.makelegal img:focus {
	width:calc(100% - 2vh);
	float:right;
	margin-right:2vh;
}

.custombricks img {
	cursor: pointer;
	transition: width 0.2s;
}

.custombricks img:focus {
	width: 100%;
	pointer-events: none;
}


@media screen and (min-width: 1024px) { 
	.details ul li img {
		width:25vh;
	}
}

summary {
	display: flex;
	padding:2vh;
	background: rgb(60,60,62);
	color: rgb(255,255,255);
    cursor: pointer;
}

summary i {
	font-size:3vh;
	margin-right:2vh;
}

.notlegal {
	background:rgb(235,199,192);
}

.legal {
	background:rgb(199,235,192);
}

.unknown {
	
	background:rgb(235,233,192);
}

.makelegal {
	width:100%;
	border:none !important;
	padding-left:2vh !important;
	box-sizing: border-box !important;
	background: rgb(235,211,192);
	margin-bottom:5px;
}

/* DIVERSES */

.Datenschutz:target {
  display: block;
  outline: none;
  /*visibility: visible;
  opacity: 1;*/
}

.Impressum:target {
  display:flex;
  outline: none;
  /*visibility: visible;
  opacity: 1;*/
}

.UploadTool:target {
  display:flex;
  outline: none;
  /*visibility: visible;
  opacity: 1;*/
}

.SearchTool:target {
  display:flex;
  outline: none;
  /*visibility: visible;
  opacity: 1;*/
}

.SpecialTool:target {
  display:flex;
  outline: none;
  /*visibility: visible;
  opacity: 1;*/
}

.Feedback:target {
  display:flex;
  outline: none;
  /*visibility: visible;
  opacity: 1;*/
}

.hidden {
 display: block;
 clip-path: inset(100%);
 clip: rect(1px 1px 1px 1px); /* IE 6/7 */
 clip: rect(1px, 1px, 1px, 1px);
 height: 1px;
 overflow: hidden;
 position: absolute;
 white-space: nowrap; /* added line */
 width: 1px;
}

.red, .red a:link, .red a:visited, .red a:focus, .red a:hover, .red a:active {
 color: red;
}

.orange {
  color: orange;
}

.green {
 color: green;
}

/*Functional Styling*/
@media (pointer: coarse), (hover: none) {
  span[title] {
    position: relative;
    display: inline-flex;
    justify-content: center;
  }
  span[title]:focus::after {
    content: attr(title);
    position: absolute;
    top: 90%;
    color:  rgb(60,60,62);
    background-color: rgb(235,237,236);
    border: 1px solid;
    width: max-content;
    padding: 0.75vh;
    font-size: 1vh;
	pointer-events: none;
  }

}

.filter-btn {
	color: rgb(235,237,236);
	background-color: rgb(60,60,62);
    font-family: "Roboto Slab", serif;
	font-size: 2vh;
	padding:0vh 3vh;
	height:6vh;
	border:2px rgb(60,60,62) solid;
	border-radius: 10px;
	text-decoration: none;
	display:inline-block;
	/*margin-bottom:2vh;*/
	box-sizing: border-box;
	vertical-align: middle;
}


input[type="text"] {
	color: rgb(60,60,62);
    font-family: "Roboto Slab", serif;
	font-size: 2vh;
	padding:0vh 3vh;
	height:6vh;
	border:2px rgb(60,60,62) solid;
	border-radius: 10px;
	text-decoration: none;
	display:inline-block;
	/*margin-bottom:2vh;*/
	box-sizing: border-box;
	vertical-align: middle;
	width:75%;
}

.filter-btn:focus, .filter-btn:hover, .filter-btn:active {
	/*color: rgb(235,237,236);*/
	background:rgb(162,169,175);
	text-decoration:none; 
	color: rgb(60,60,62);
}

input[type="checkbox"] { 
	margin:0.75vh 2vh;
    vertical-align: top;
	accent-color: rgb(60,60,62);
	cursor: pointer;
}

.checkbox-label {
	margin:0.5vh 0;
	display:inline-block;
	max-width:85%;
	white-space: normal;
	word-wrap: break-word;
	cursor: pointer;
}


@media screen and (min-width: 1024px) { 
	input[type="checkbox"] { 
		margin:1.25vh 2vh;
		transform: scale(1.5);
	}
	.filter-btn {
		font-size: 2.5vh;
	}
}

.badge-new {
    color: rgb(60,60,62);
    background: #A4C29E;
    padding: 2px 6px;
    font-size: 0.5em;
    border-radius: 3px;
    margin-left: 5px;
    position: relative;
    top: -4px;
}
.publication-timeline {
    list-style: none;
    margin: 1vh 0 0;
    padding: 0;

    display: flex;
    flex-wrap: wrap;
    gap: 2vh;
}

.publication-timeline li {
	cursor: pointer;

    width: fit-content !important;
    max-width: none !important;
    flex: 0 0 auto !important;

    position: relative;

    display: inline-flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: 1vh 1.4vh !important;
    margin: 0 !important;

    color: rgb(235,237,236);
    background-color: rgb(60,60,62);

    border: 0 !important;
    border-radius: 1.8vh;

    font-size: 1.5vh;
    line-height: 1.1;

    white-space: nowrap;

    gap: 0 !important;
}

.publication-timeline li:not(:last-child)::after {
    content: "";

    position: absolute;

    right: -1.6vh;
    top: 50%;

    width: 1.2vh;
    height: 0.2vh;

    transform: translateY(-50%);

    background-color: rgb(60,60,62);

    border-radius: 999px;
}

.timeline-date,
.timeline-section {
    display: block;

    margin: 0 !important;
    padding: 0 !important;

    line-height: 1 !important;
}

.timeline-date {
   font-weight: bold;
    margin-bottom: 0.4vh !important;
}

.timeline-section {
    font-size: 1.4vh;
}

@media (pointer: coarse), (hover: none) {

    .publication-timeline li[title] {
        position: relative;
    }

.publication-timeline li[title]:focus::before {
    content: attr(title);

    position: absolute;

    top: 115%;
    left: 0;

    transform: none;

    color: rgb(60,60,62);
    background-color: rgb(235,237,236);

    border: 1px solid rgb(60,60,62);
    border-radius: 0.8vh;

    min-width: 30vw;
    max-width: 85vw;

    padding: 0.75vh;

    font-size: 1vh;
    line-height: 1.3;

    white-space: normal;
    word-break: break-word;

    pointer-events: none;

    z-index: 9999;
}
}