/*----- schrift laden -----*/

@font-face {
    font-family: 'Activist';
    src: url('../fonts/Activist/Activist.woff2') format('woff2'),
        url('../fonts/Activist/Activist.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Biko';
    src: url('../fonts/Biko/Biko_Regular.woff2') format('woff2'),
        url('../fonts/Biko/Biko_Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Renner';
    src: url('../fonts/Renner/Renner-it-Book.woff2') format('woff2'),
        url('../fonts/Renner/Renner-it-Book.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/*----- schrift laden -----*/

/*----- animationen -----*/

@keyframes move {
	from {
		left: 75%;
	}
	to {
		left: 0%;
	}
}

@keyframes typing12 {
	from {
		width: 0;
	}
	to {
		width: 12ch;
	}
}

@keyframes typing15 {
	from {
		width: 0;
	}
	to {
		width: 15ch;
	}
}

@keyframes typing18 {
	from {
		width: 0;
	}
	to {
		width: 18ch;
	}
}

@keyframes typing19 {
	from {
		width: 0;
	}
	to {
		width: 19ch;
	}
}

@keyframes typing21 {
	from {
		width: 0;
	}
	to {
		width: 21ch;
	}
}

@keyframes typing23 {
	from {
		width: 0;
	}
	to {
		width: 23ch;
	}
}

@keyframes FS506 {
	from {
		width: 0;
	}
	to {
		width: 30ch;
	}
}

@keyframes FS506b {
	0% {
		width: 0;
		visibility: hidden;
	}
	50% {
		visibility: visible;
	}

	100% {
		width: 80ch;
		visibility: visible;
	}
}

/*----- animationen -----*/

/*----- body definition -----*/
body {
	margin: 0;
	font-family: 'Biko';
	font-size: 14px;
	line-height: 18px;
	color: #dadada;
	background-color: #000;
	transition: all .5s;
}
/*----- body definition -----*/

/*----- ueberschriften -----*/

h1 {
	font-family: 'Biko';
	font-size: 1.3em;
	font-weight: normal;
}

h2 {
	font-family: 'Biko';
	font-size: 1.2em;
}

h3 {
	font-size: 1.1em;
}

h4 {
	font-family: 'Biko';
	font-size: 1.05em;
	font-weight: normal;
}

.h4-grid {
	font-family: 'Biko';
	font-size: 0.8em;
	font-weight: normal;
	margin-bottom: 0.3em;
}
.h4-grid-newest,
.h4-grid-rtisterei,
.h4-grid-werbung {
	font-size: 0rem;
	margin: 0 0 0.2rem 0;
}
.h4-grid-newest::before {
	content: "th.newest";
	font-family: 'Activist';
	font-size: 1.2rem;
	font-weight: normal;
}
.h4-grid-rtisterei::before {
	content: "Rtisterei";
	font-family: 'Activist';
	font-size: 1.2rem;
	font-weight: normal;
}

.h4-grid-werbung::before {
	content: "Webworks";
	font-family: 'Activist';
	font-size: 1.2rem;
	font-weight: normal;
}

/*----- ueberschriften -----*/

/*----- seiten elemente  architektur -----*/

.site {
	padding-left: 2em;
	padding-top: 2em;
	padding-right: 2em;
	padding-bottom: 2em;
	transition: all .5s;
}

.site-grid {
	grid-template-columns:
		[full-start] minmax(0,1fr)
		[main-start] repeat(2,minmax(0,50%))
		[main-end] minmax(0,1fr) [full-end] !important;
	grid-template-areas: 
		". thre  thre ."
		". top-b  top-c ."
		". top-a  top-a ."
		". comp  comp ."
		". bot-a  bot-a .";
	grid-gap: 0.8em 0.8em !important;
	width: 49%;
	margin-left: 0;
	background-color: transparent;
	transition: all .5s;
}

.container-thre {
	grid-area: thre;
}
.thre {
	padding: 0.8em 0.8em 0.8em 0.8em;
}

.container-component {
	grid-area: comp;
	padding: 0 5% 0 0.5%;
}

.container-top-a {
	grid-area: top-a;
	overflow: hidden;
	max-height: 13.2rem;
	padding: 0 5% 0 5%;
	transition: max-height 1.5s;
}
.top-a {
	padding: 0.8em 0;
}

.container-top-b {
	grid-area: top-b;
	overflow: hidden;
	max-height: 12.5rem;
	padding: 0 2.5% 0 10%;
}
.top-b {
	padding: 0.8em 0;
	margin: 0;
}

.container-top-c {
	grid-area: top-c;
	max-height: 12.5rem;
	overflow: hidden;
	padding: 0 10% 0 2.5%;
}
.top-c {
	padding: 0.8em 0;
	margin: 0;
}


.footer,
body.wrapper-fluid footer > .grid-child {
	padding: 0;
	background-color: transparent;
	background-image: none;
}

/*----- ThRe NewsModul -----*/

.mod-articlesnews__item {
	padding: 0.25rem 0;
}

.newsflash-image {
	margin: 0 !important;
}
.news-img {
	object-fit: cover;
	width: 100rem;
	height: 10em;
}
.newsflash-title {
	display: none;
	font-family: 'Biko';
	font-weight: normal !important;
	margin-bottom: 0.15em;
}

.mod-articlesnews_item-298,
.mod-articlesnews_item-300 {
	display: block;
	position: relative;
	transition: rotate 1.5s;
}

/*----- ThRe rtisterei -----*/

.newsflash-title-298 {
	display: none;
	position: relative;
	font-size: 1.2em;
}

	/*----- ThRe be smart -----*/

.mod-articlesnews_item-298:hover .newsflash-title-159 {
	display: block;
	position: absolute;
	top: 60%;
	left: 20%;
	background-color: rgba(0, 0, 0, .5);
}


.ai-rtisterei .mod-articlesnews_item-159::after {
	position: absolute;
	top: -20%;
	left: 80%;
	scale: 35% 35%;
	opacity: .9;
	content: url('/images/thre/flieg.gif');
	transition: top 2.5s cubic-bezier(.25,3.5,.15,-1.5), left 2.5s cubic-bezier(.75,-1.5,.75,1.5);
}

.ai-rtisterei .mod-articlesnews_item-159:hover:after {
	position: absolute;
	top: 45%;
	left: 0%;
	content: url('/images/thre/flieg.gif');
	transition: top 1.5s cubic-bezier(.25,1.5,.15,-1.5), left 0.5s cubic-bezier(.25,-0.5,.15,1.5);
}

.news-img-298, .news-img-300 {
	object-fit: cover;
	width: 100rem;
	height: 12.5em;
}

.news-img-cat9 {
	display: none;
}

.newsflash-title-9 {
	display: block;
	font-size: 1.2em;
}

	/*----- ThRe Webworks -----*/

.newsflash-title-300 {
	display: none;
	position: relative;
	font-size: 1.2em;
}
.newsflash-title-300 > a {
	display: block;
	position: relative;
	font-size: 1.1em;
	color: #dadada;
}
.newsflash-title-300 > a:hover {
	display: block;
	position: relative;
	font-size: 1.1em;
	color: #dadada;
	text-shadow: 0px 0px 0px transparent;
}
.mod-articlesnews_item-300:hover .newsflash-title-300 {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	height: 1.3em;
	word-wrap: break-word;
	white-space: nowrap;
}
.mod-articlesnews_item-300:hover .newsflash-title-51 {
	background-color: rgba(0, 0, 0, 0.7);
	animation: typing21 3.5s steps(21) forwards;
}
.newsflash-title-52 > a {
	color: #838383;
}
.mod-articlesnews_item-300:hover .newsflash-title-52 {
	animation: typing21 3.5s steps(21) forwards;
}
.mod-articlesnews_item-300:hover .newsflash-title-53 {
	animation: typing18 3.5s steps(18) forwards;
}
.mod-articlesnews_item-300:hover .newsflash-title-82 {
	animation: typing12 1.5s steps(12) forwards;
}
.mod-articlesnews_item-300:hover .newsflash-title-87 {
	background-color: rgba(0, 0, 0, 0.7);
	animation: typing15 1.5s steps(15) forwards;
}
.mod-articlesnews_item-300:hover .newsflash-title-113 {
	background-color: rgba(0, 0, 0, 0.7);
	animation: typing18 2.5s steps(18) forwards;
}
.mod-articlesnews_item-300:hover .newsflash-title-114 {
	background-color: rgba(0, 0, 0, 0.7);
	animation: typing19 3.5s steps(19) forwards;
}
.mod-articlesnews_item-300:hover .newsflash-title-156 {
	animation: typing23 3.5s steps(23) forwards;
}

	/*----- ThRe Newest -----*/

.newsflash-title-303 {
	display: block;
	position: relative;
	font-size: 1.2em;
}

-body:has(.mod-articlesnews_cat-9:hover) .container-top-a {
	height: 100%;
	max-height: 100%;
	transition: max-height 3s;
}
.mod-articlesnews_cat-9 {
}
.mod-articlesnews_cat-9::after {
}

.newsflash-figcaption {
	color: #dadada;
}
.newsflash-figcaption-215,
.newsflash-figcaption-303 {
	display: none;
	line-height: 0.1em;
}
/*----- ThRe NewsModul -----*/


/*----- paragraph -----*/

.kontakt {
	font-size: 10px;
	padding-left: 0px;
	text-align:left;
}

.klein {
	font-size: 11px;
}

.copyright {
	text-align: right;
	margin-bottom: 0.6em;
}

.scheitern {
	font-size: 0.7rem;
}

.soli {
	width: 25%;
}

.schreibmaschineFS {
	font-size: 1.7em;
	padding-left: 1.7rem;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
	overflow: hidden;
	height: 1.1em;
	word-wrap: break-word;
	white-space: nowrap;
	animation: FS506 3.5s steps(30) forwards;
}
.schreibmaschineFS-zeile2 {
	font-size: 1.7em;
	padding-left: 1.7rem;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
	visibility: hidden;
	overflow: hidden;
	height: 1.1em;
	word-wrap: break-word;
	white-space: nowrap;
	animation: FS506b 5.5s 3.5s steps(80) forwards;
}

/*----- paragraph -----*/


/*----- breadcrumb -----*/

.mod-breadcrumbs {
	padding: 0 !important;
}
.icon-location {
	content:url(http://thre.org/images/thre/website-elemente/pixel.png);
	width: 0px;
}
/*----- breadcrumb -----*/


/*----- hyperlinks -----*/

a {
	color: #838383;
	text-decoration: none;
}
a:hover,
a:focus {
	color: #000;
	text-decoration: none;
	text-shadow: 2px 0.5px 1px #dadada;
}

a:not([class]) {
	text-decoration: none;
}

.h1-thre {
	font-family: 'Activist';
	font-size: 2.3em;
	color: #dadada;
}
.h1-thre:hover,
.h1-thre:focus {
	color: #dadada;
	text-shadow: none;
}

.newest .mod-articles-link  {
	color: #dadada;
	text-decoration: none !important;
	text-shadow: none !important;
}

.newest > a {
	color: #dadada;
}
.newest:hover > a {
	color: #dadada;
	text-decoration: none !important;
	text-shadow: none !important;
}

.back-to-top-link {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	border-color: transparent;
	background-color: transparent;
}
.back-to-top-link:focus,
.back-to-top-link:hover {
	border-color: transparent;
	background-color: transparent;
}

/*----- hyperlinks -----*/


/*----- images -----*/

.art-img-right {
	float: right;
	width: 25%;
}

.img-icon {
	margin-top: -3px;
	margin-right: 0.5em;
}

.icon-arrow-up::before {
	content: url(/images/thre/website-elemente/pfeil2_klein_weiss.svg);
}

.img-menu {
	display: none;
}

/*----- images -----*/

.video-kontakt {
	position: relative;
	top 0;
	left: 0;
	width: 100%;
	height: auto;
}
#flucht {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.content-kontakt {
	position: relative;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.5);
	background-image: radial-gradient(farthest-side at 55% 30%, transparent, transparent, black);
	color: #dadada;
	width: 100%;
	height: 100%;
	padding: 1.5rem 1rem 1rem 5rem;
}


/*----- bildschirmgroessen -----*/

@media (max-width: 1200px) {
}

@media (max-width: 991px) {
	.site-grid {
		width: 66%;
	}
}

@media (max-width: 900px) {
	.site-grid {
		width: 80%;
	}
}

@media (max-width: 768px) {
	.site-grid {
		width: 99%;
	}
	.content-kontakt {
		padding-left: 1rem;
	}
}

@media (max-width: 480px) {

	.site {
		padding: 1rem;
	}
	.site-grid {
		grid-template-columns:
			[full-start] minmax(0,1fr)
			[main-start] repeat(1,minmax(0,100%))
			[main-end] minmax(0,1fr) [full-end] !important;
		grid-template-areas: 
			". thre ."
			". top-b ."
			". top-c ."
			". top-a ."
			". comp ."
			". bot-a .";
			width: 99%;
			padding: 1%;
			margin: 0;
	}
	.thre {
		padding: 0;
	}
	.container-top-a, .container-top-b, .container-top-c {
		padding: 0;
	}
	.soli {
		width: 70%;
		word-wrap: break-word;
		white-space: normal;
	}
	.schreibmaschineFS, .schreibmaschineFS-zeile2 {
		padding-left: 0;
		height: auto;
		line-height: 1.7em;
		visibility: visible;
		white-space: normal;
		animation: none;
	}
		
}