@charset "utf-8";

/*
 * File: /blog.css
 * Created Date: Wednesday, 03.02.21, 18:11:36
 * Author: Stephan Romhart
 * -----
 * Last Modified: Thursday, 21.11.2024 15:55:05
 * Modified By: Stephan Romhart
 * -----
 * Copyright (c) 2024 kreisform GmbH
 */


/*** Reset */

html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{
	margin:0;
	padding:0;
}
fieldset,img{
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var{
	font-style:normal;
	font-weight:400;
}
ol,ul{
	list-style:none;
}
caption,th{
	text-align:left;
}
h1,h2,h3,h4,h5,h6{
	font-size:100%;
	font-weight:400;
}
q:before,q:after{
	content:'';
}
abbr,acronym{
	border:0;
}
a{
	text-decoration:none;
}
a:active,a:focus{
	outline:none;
} 
header,footer,aside,nav,article,figure,figcaption{
	display:block;
	margin:0;
	padding:0;
}
*,*::before,*::after{
	box-sizing:border-box;
}
*:focus{
	outline:none;
}



/*** Page */

:root{
	font-size:10px;
	
	--header-height:11rem;
	--header-nav-height:5rem;
	--header-logo-width:22rem;
	--header-transition:top 0.5s ease-in-out;
	--content-width:100rem;
	--content-padding:3rem;
	--article-padding-top:6rem;
	--article-padding-left:10rem;
	--grid-gap:2rem;
	--mobile-menu-width:4rem;
	--link-transition:background 0.3s ease-in-out;
	--standard-transition:all 0.3s ease-in-out;
	
	--schwarz:#000000;
	--schwarz-t10:rgba(0,0,0,0.1);
	--schwarz-t20:rgba(0,0,0,0.2);
	--schwarz-t40:rgba(0,0,0,0.4);
	--schwarz-t70:rgba(0,0,0,0.7);
	

	--schwarz-90:#191919;
	--schwarz-87:#202020;
	--schwarz-85:#262626;
	--schwarz-80:#333333;
	--schwarz-70:#4c4c4c;
	--schwarz-60:#666666;
	--schwarz-50:#7f7f7f;
	--schwarz-40:#999999;
	--schwarz-30:#b2b2b2;
	--schwarz-20:#cccccc;
	--schwarz-10:#e5e5e5;

	--weiss:#ffffff;
	--weiss-t50:rgba(255,255,255,0.5);
	
	--grau-hell:#f5f5f5;
	
	--blau:#213868;
	--blau-hell-1:#27427c;
	--blau-hell-2:#32559f;
	--blau-hell-3:#4c6eb5;
	--blau-hell-4:#7992c8;
	--blau-hell-5:#97aad2;
	--blau-hell-6:#e4eaf7;
	--blau-dunkel-1:hsl(221,76%,18%);
	--blau-dunkel-2:hsl(221,50%,18%);
	
	
	--gelb:#fcb912;
	--gelb-dunkel-1:#eba800;
	--gelb-dunkel-2:hsl(43,100%,40%);
	--gelb-hell-4:hsl(43,96%,70%);
	--gelb-hell-5:#fde2a0;
	--gelb-hell-6:#fff0cb;
	
	--gruen:#81b902;
	--gruen-dunkel-1:#76a802;
	--gruen-hell-5:#e1f1bd;
	
	--rot:#dd5136;
	
	--cyan:#3598d6;
	
	
	--facebook:#3b5998;
	--twitter:#55acee;
	
	
	--debug:#27427c; /*#FF1493;*/
}


html,
body,
#page{
	height:100.1%;
}
body{
	background-color:var(--schwarz-10);
	color:var(--schwarz-80);
	font-family:'Segoe UI',sans-serif;
	font-size:2rem;
	line-height:1.4;
	font-weight:400;
}
body.logged-in{
	margin-top:-32px !important;
}
::selection{
	color:var(--weiss);
	background-color:var(--blau-hell-2);
}
::-moz-selection{
	color:var(--weiss);
	background-color:var(--blau-hell-2);
}
a{
	color:var(--debug);
}
section{
	padding:var(--content-padding) calc((100vw - var(--content-width)) / 2);
}
figure img{
	display:block;
	width:100%;
	height:auto;
}
h1,h2,h3,h4,h5{
	line-height:1.2;
}
.grid{
	display:grid;
}
.grid.grid-2{
	grid-template-columns:1fr 1fr;
	grid-gap:var(--grid-gap);
}


/*** Werbung */

div.anzeige{
	position:fixed;
	top:25rem;
	left:auto;
	right:auto;
	width:30rem;
	min-height:60rem;
	z-index:1000;
}
div.anzeige h5{
	font-size:1.2rem;
	color:var(--schwarz-50);
	margin-bottom:0.5rem;
}
div.anzeige.rechts-der-seite{
	left:calc(((100% - var(--content-width)) / 2) + var(--content-width) + 1rem);
}
div.anzeige.links-der-seite{
	right:calc(((100% - var(--content-width)) / 2) + var(--content-width) + 1rem);
	display:flex;
	flex-direction:column;
	align-items:flex-end;
}
.vm-hook{
	color:var(--cyan) !important;
	text-decoration:none !important;
	border-bottom:2px dotted var(--cyan) !important;
}


/*** Header */

header{
	width:100%;
	height:calc(var(--header-height) + var(--header-nav-height));
	top:0;
	left:0;
	background-color:var(--blau);
	box-shadow:0 0 1rem var(--schwarz-t20);
	position:relative;
}
/* Darkmode-Update */
body.admin-bar{
	padding-top:32px;
}
header section{
	padding-top:0;
	padding-bottom:0;
	display:flex;
}

/* Marke */
header section.marke{
	align-items:center;
	position:relative;
}
header section.marke h3{
	width:var(--header-logo-width);
	height:var(--header-height);
	transition:var(--header-transition);
}
header section.marke h3 a{
	display:flex;
	align-items:center;
	height:var(--header-height);
	transition:var(--header-transition);
}
header section.marke h3 a img{
	width:100%;
	height:auto;
	display:block;
}
header section.marke h4{
	color:var(--blau-hell-4);
	margin-left:4rem;
	border-left:1px solid var(--blau-hell-4);
	padding-left:2rem;
	line-height:5rem;
}
/* Darkmode-Update */
header section.marke nav#social-media{
	margin-left:auto;
	display:flex;
	align-items:center;
}
header section.marke nav#social-media ul{
	display:flex;
}
header section.marke nav#social-media ul li{
	margin-left:1rem;
}
header section.marke nav#social-media ul li a{
	background:var(--blau-hell-2);
	display:block;
	width:4rem;
	height:4rem;
	border-radius:50%;
	background-repeat:no-repeat;
	background-size:2rem;
	background-position:center center;
}
header section.marke nav#social-media ul li a span{
	display:none;
}
header section.marke nav#social-media ul li.facebook a{
	background-image:url('images/facebook.svg');
}
header section.marke nav#social-media ul li.twitter a{
	background-image:url('images/twitter.svg');
}
header section.marke nav#social-media ul li.youtube a{
	background-image:url('images/youtube.svg');
}
header section.marke nav#social-media ul li.telegram a{
	background-image:url('images/telegram.svg');
}
header section.marke nav#social-media ul li.mastodon a{
	background-image:url('images/mastodon.svg');
}
header section.marke nav#social-media ul li.rss-feed a{
	background-image:url('images/rss.svg');
	background-size:1.5rem;
}

/* Darkmode-Update */

header section.marke nav#social-media div.darkmode,
#mobile-menu-content ul li.darkmode div.darkmode{
	width:6rem;
	height:2.8rem;
	border-radius:500px;
	border:2px solid var(--blau-hell-2);
	margin-left:2rem;
	position:relative;
	background-color:var(--blau);
	background-image:url('images/darkmode.svg');
	background-size:5rem;
	background-repeat:no-repeat;
	background-position:center center;
	cursor:pointer;
}
header section.marke nav#social-media div.darkmode::before,
#mobile-menu-content ul li.darkmode div.darkmode::before{
	content:'';
	position:absolute;
	width:2.4rem;
	height:2.4rem;
	left:0;
	top:50%;
	background-color:var(--blau-hell-3);
	border-radius:50%;
	transform:translateY(-50%);
	transition:all 0.3s ease-in-out;
}
header section.marke nav#social-media div.darkmode.active::before,
#mobile-menu-content ul li.darkmode div.darkmode.active::before{
	left:calc(100% - 2.4rem);
}


/** - Navigation */

header section.navigation{
	background-color:var(--blau-hell-1);
	justify-content:space-between;
	height:var(--header-nav-height);
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
	grid-gap:var(--grid-gap);
}
header section.navigation nav#main{
	min-height:0;
	min-width:0;
	grid-column:1 / span 2;
}
header section.navigation nav#main ul{
	display:flex;
}
header section.navigation nav#main ul li a{
	display:block;
	position:relative;
	color:var(--weiss);
	line-height:var(--header-nav-height);
	font-weight:400;
	font-size:1.6rem;
	padding:0 2rem;
	border-left:1px solid var(--blau);
	text-transform:uppercase;
	transition:var(--link-transition);
}
body.home header section.navigation nav#main ul li.start a,
body.archive.category header section.navigation nav#main ul li.start a,
body.search header section.navigation nav#main ul li.start a,
body.single-post section.navigation nav#main ul li.start a,

body.forum section.navigation nav#main ul li.forum a,

body.single-download section.navigation nav#main ul li.downloads a,
body.post-type-archive-download section.navigation nav#main ul li.downloads a,
body.archive.tax-download-kategorien section.navigation nav#main ul li.downloads a,

body.single-anleitung section.navigation nav#main ul li.anleitungen a,
body.archive.tax-anleitungen section.navigation nav#main ul li.anleitungen a,
body.post-type-archive-anleitung section.navigation nav#main ul li.anleitungen a{
	font-weight:700;
	background-color:var(--blau);
}
header section.navigation nav#main ul li:last-of-type a{
	border-right:1px solid var(--blau);
}
header section.navigation nav#main ul li a::before{
	content:'';
	position:absolute;
	width:calc(100% - 4rem);
	height:2px;
	background-color:var(--cyan);
	bottom:1.3rem;
	left:50%;
	transform:translateX(-50%);
}
header section.navigation nav#main ul li.forum a::before{
	background-color:var(--gelb);
}
header section.navigation nav#main ul li.downloads a::before{
	background-color:var(--gruen);
}
header section.navigation nav#main ul li.anleitungen a::before{
	background-color:var(--rot);
}

header section.navigation form{
	display:flex;
	min-height:0;
	min-width:0;
	--input-padding:0.7rem;
}
header section.navigation form div{
	display:flex;
	width:100%;
	position:relative;
}
header section.navigation form input{
	padding:var(--input-padding) 5rem var(--input-padding) 2rem;
	margin:0.75rem 0;
	width:100%;
	border:0;
	border-radius:0;
	background-color:var(--blau-hell-2);
	background-image:url('images/suche.svg');
	background-repeat:no-repeat;
	background-size:1.6rem;
	background-position:center right 2rem;
	color:var(--weiss);
	font-family:'Segoe UI',sans-serif;
	font-size:1.5rem !important;
}
header section.navigation form input::-webkit-input-placeholder{
	color:var(--blau-hell-4);
}
header section.navigation form input::-moz-placeholder{
	color:var(--blau-hell-4);
}
header section.navigation form input:focus{
	box-shadow:0 0 0 0.2rem var(--blau-hell-3);
}
header section.navigation form button{
	background-color:transparent;
	position:absolute;
	height:calc(100% - 2 * var(--input-padding));
	width:5rem;
	top:50%;
	right:0;
	transform:translateY(-50%);
	cursor:pointer;
	border-radius:0;
	border:0;
	display:flex;
}


/*** Featured Posts */

section.featured{
	padding-top:5rem;
	padding-bottom:5rem;
}
section.featured ul{
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
	grid-gap:var(--grid-gap);
}

section.featured ul li{
	background-color:var(--weiss);
	position:relative;
}
section.featured ul li a{
	display:flex;
	flex-direction:column;
	height:100%;
}
section.featured ul li h3{
	background-color:var(--cyan);
	color:var(--weiss);
	position:absolute;
	letter-spacing:0.1rem;
	padding:0.5rem 1rem;
	font-size:1.1rem;
	font-weight:700;
	top:1rem;
	left:1rem;
	text-transform:uppercase;
}
section.featured ul li figure{
	border-bottom:4px solid var(--blau-hell-2);
}
section.featured ul li h2{
	position:relative;
	display:flex;
	align-items:center;
	padding:2rem 5rem 2rem 2rem;
	height:100%;
	font-weight:700;
	font-size:1.8rem;
	color:var(--blau-hell-2);
}
section.featured ul li h2 > span span{
	display:inline;
	font-weight:400;
}
section.featured ul li h2::before{
	position:absolute;
	content:'';
	width:1rem;
	height:1rem;
	border-top:1px solid var(--blau);
	border-right:1px solid var(--blau);
	right:2rem;
	top:50%;
	transform:translateY(-50%) rotate(45deg);
}


/*** Weitere Artikel */
section.weitere-artikel{
	border-top:4px solid var(--blau-hell-3);
	padding-top:6rem;
	padding-bottom:6rem;
}




/*** Artikel-Übersicht */

section.artikel-übersicht{
	background-color:var(--weiss);
	text-align:center;
	display:block !important;
}
section.artikel-übersicht > h1,
section.artikel-übersicht > h2{
	margin-bottom:4rem;
	font-weight:700;
	text-align:center;
	border-bottom:2px solid var(--blau-hell-2);
	display:inline-block;
	font-size:3rem;
	color:var(--blau-hell-3);
}
section.artikel-übersicht > h1.suche{
	padding-left:3rem;
	background-image:url('images/suche-blau.svg');
	background-size:2rem;
	background-repeat:no-repeat;
	background-position:left center;
	font-weight:400;
}
section.artikel-übersicht > h1.suche span{
	font-weight:700;
}
section.artikel-übersicht.autor > h2{
	font-weight:400;
}
section.artikel-übersicht.autor > h2 span{
	font-weight:700;
}
section.artikel-übersicht > p{
	margin-bottom:5rem;
	padding:0 10%;
}
section.artikel-übersicht > ul{
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
	grid-gap:var(--grid-gap);
}
section.artikel-übersicht > ul li{
	position:relative;
	display:block;
	background-color:var(--grau-hell);
	text-align:left;
}
section.artikel-übersicht.startseite > ul > li:first-of-type{
	grid-column:1 / span 2;
}
section.artikel-übersicht > ul > li > a{
	padding:2rem 2rem 8rem 2rem;
	display:flex;
	flex-direction:column;
	height:100%;
	background-color:var(--grau-hell);
	transition:background 0.25s ease-in;
	color:var(--schwarz-70);
}
section.artikel-übersicht > ul li figure{
	margin-bottom:1rem;
}
section.artikel-übersicht > ul li figure img{
	aspect-ratio:2/1;
	object-fit:cover;
}
section.artikel-übersicht > ul > li > a > h3{
	position:absolute;
	background-color:pink;
	color:var(--weiss);
	padding:0.5rem 1rem;
	font-size:1rem;
	font-weight:700;
	top:1rem;
	left:1rem;
	text-transform:uppercase;
}
section.artikel-übersicht > ul > li > a > h3.news,
section.artikel-übersicht > ul > li > a > h3.post{
	background-color:var(--cyan);
}
section.artikel-übersicht > ul > li > a > h3.download{
	background-color:var(--gruen);
}
section.artikel-übersicht > ul > li > a > h3.anleitung{
	background-color:var(--rot);
}
section.artikel-übersicht > ul li h2{
	font-size:2.4rem;
	font-weight:700;
	color:var(--blau-hell-3);
	margin-bottom:1rem;
}
section.artikel-übersicht > ul li h2 span{
	font-weight:400;
}
section.artikel-übersicht > ul li p.teaser{
	font-size:1.5rem;
	word-break:break-word;
}
section.artikel-übersicht > ul li p.meta{
	position:absolute;
	bottom:2rem;
	left:2rem;
	font-size:1.4rem;
}
section.artikel-übersicht > ul li p.meta a{
	font-weight:400;
	color:var(--blau-hell-2);
	padding:0;
	border-bottom:2px solid transparent;
	transition:border 0.3s ease-in-out;
}
section.artikel-übersicht > ul li.forum{
	padding:2rem;
}
section.artikel-übersicht > ul li.forum > a{
	padding:0.5rem 1.5rem 0.5rem 0.5rem;
	border-bottom:1px solid var(--weiss);
	font-size:1.5rem;
	font-weight:500;
	color:var(--blau-hell-2);
	display:block;
	height:auto;
	position:relative;
	/* 2021-07-05: Update nach überlangem String */
	word-break: break-word;
}
section.artikel-übersicht > ul li.forum > a:first-of-type{
	border-top:1px solid var(--weiss);
}
section.artikel-übersicht > ul li.forum > a::before{
	content:'';
	top:50%;
	right:0.5rem;
	position:absolute;
	width:0.6rem;
	height:0.6rem;
	border-top:1px solid var(--blau-hell-2);
	border-right:1px solid var(--blau-hell-2);
	transform:translateY(-50%) rotate(45deg);
	transition:var(--standard-transition);
}
section.artikel-übersicht > ul li.forum a span{
	color:var(--schwarz-70);
	display:block;
	font-size:1.2rem;
	font-weight:400;
}
section.artikel-übersicht > ul li.forum p.link{
	position:absolute;
	bottom:2rem;
	right:2rem;
	font-size:1.4rem;
}
section.artikel-übersicht > ul li.forum p.link a{
	color:var(--blau-hell-2);
	position:relative;
	padding-right:1rem;
	border-bottom:2px solid transparent;
	transition:border 0.3s ease-in-out;
}
section.artikel-übersicht > ul li.forum p.link a::after{
	content:'';
	top:55%;
	right:0;
	position:absolute;
	width:0.6rem;
	height:0.6rem;
	border-top:1px solid var(--blau-hell-2);
	border-right:1px solid var(--blau-hell-2);
	transform:translateY(-50%) rotate(45deg);
}
section.artikel-übersicht > ul li.themen{
	grid-column:1 / span 3;
}
section.artikel-übersicht > ul li.themen ul{
	display:grid;
	grid-template-columns:repeat(5,1fr);
	grid-gap:2px;
	background-color:var(--weiss);
}
section.artikel-übersicht > ul li.themen ul li{
	display:flex;
	justify-content:center;
}
section.artikel-übersicht > ul li.themen ul li h4{
	display:block;
	padding:0.5rem;
	font-size:1.6rem;
	font-weight:700;
	color:var(--blau-hell-4);
	text-align:center;
}
section.artikel-übersicht > ul li.themen ul li a{
	display:flex;
	align-items:center;
	justify-content:center;
	padding:0.5rem;
	background-color:var(--grau-hell);
	text-align:Center;
	flex:0 0 100%;
	color:var(--blau-hell-2);
	font-size:1.6rem;
	transition:all 0.3s ease-in-out;
}
section.artikel-übersicht > ul li.themen ul li a::before{
	content:'';
	display:inline-block;
	width:1.6rem;
	height:1.6rem;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center center;
	margin-right:0.7rem;
	filter:brightness(1);
	transition:filter 0.3s ease-in-out;
}

section.artikel-übersicht > ul li.themen ul li.teams a::before{
	background-image:url('images/themen/microsoft-office-teams.svg');
}
section.artikel-übersicht > ul li.themen ul li.xbox a{
	color:#107C10;
}
section.artikel-übersicht > ul li.themen ul li.xbox a::before{
	background-image:url('images/themen/xbox.svg');
}
section.artikel-übersicht > ul li.themen ul li.windows-10 a::before{
	background-image:url('images/themen/windows-10.svg');
}
section.artikel-übersicht > ul li.themen ul li.windows-10 a{
	color:#0078D6;
}
section.artikel-übersicht > ul li.themen ul li.reviews a::before{
	background-image:url('images/themen/reviews.svg');
}
section.artikel-übersicht > ul.filter{
	display:flex;
	flex-wrap:wrap;
	margin-bottom:4rem;
	justify-content:center;
	gap:0.4rem;
}
section.artikel-übersicht > ul.filter li{
	margin:0;
}
section.artikel-übersicht > ul.filter li a{
	padding:0.5rem 3rem 0.5rem 1.5rem;
	margin:0;
	position:relative;
	color:var(--blau-hell-2);
}
section.artikel-übersicht > ul.filter li a::before{
	content:'';
	position:absolute;
	right:1.2rem;
	top:50%;
	width:1rem;
	height:1rem;
	border-top:2px solid var(--blau-hell-2);
	border-right:2px solid var(--blau-hell-2);
	transform:translateY(-50%) rotate(45deg);
}
section.artikel-übersicht.download > ul.filter li a::before{
	border-color:var(--gruen);
}
section.artikel-übersicht.anleitung > ul.filter li a::before{
	border-color:var(--rot);
}
section.artikel-übersicht > ul.filter li.aktiv a{
	font-weight:bold;
}
section.artikel-übersicht > ul li.werbung{
	padding:0;
	display:flex;
	justify-content:center;
	align-items:center;
}
section.artikel-übersicht > ul li.werbung > h3{
	position:absolute;
	background-color:var(--schwarz-30);
	color:var(--weiss);
	padding:0.5rem 1rem;
	font-size:1rem;
	font-weight:700;
	top:1rem;
	left:1rem;
	text-transform:uppercase;
}

/* Pager */
div.pager{
	margin-top:4rem;
	display:flex;
	justify-content:center;
	margin-bottom:5rem;
}
div.pager ul.page-numbers{
	display:flex;
}
div.pager ul.page-numbers li{
	margin:0 0.5rem;
}
div.pager ul.page-numbers li span,
div.pager ul.page-numbers li a{
	display:block;
	font-size:1.5rem;
	font-weight:700;
	line-height:1.4;
	padding:1rem;
	background-color:var(--grau-hell);
}
div.pager ul.page-numbers li a{
	color:var(--blau-hell-1);
}
div.pager ul.page-numbers li span.current{
	background-color:var(--blau-hell-6);
}

/* News-Ticker */
body.home section.news-ticker,
body.search section.news-ticker,
article section.news-ticker{
	background-color:var(--grau-hell);
	text-align:center;
	padding-top:8rem;
	padding-bottom:8rem;
}
body.home section.news-ticker a,
body.search section.news-ticker a,
article section.news-ticker a{
	background-color:var(--schwarz-10);
	width:30rem;
	padding:1rem 0;
	display:inline-block;
	color:var(--blau-hell-3);
	font-weight:700;
}


/*** Artikel */


main .post-pager{
	position:fixed;
	z-index:5;
	left:0;
	top:50%;
	width:4rem;
	height:8rem;
	background-color:var(--blau-hell-2);
	transform:translateY(-50%);
	display:none;
}
main .post-pager a{
	display:flex;
	position:relative;
	width:100%;
	height:100%;
}
main .post-pager::before{
	content:'';
	position:absolute;
	left:50%;
	top:50%;
	width:1.5rem;
	height:1.5rem;
	border-top:1px solid var(--weiss);
	border-left:1px solid var(--weiss);
	transform:translate(-45%,-50%) rotate(-45deg);
}
main .post-pager.weiter{
	right:0;
	left:auto;
	top:50%;
}
main .post-pager.weiter::before{
	transform:translate(-65%,-50%) rotate(-225deg);
}



/*** Seite Autor */

section.autor{
	display:grid;
	grid-template-columns:1fr 2fr;
	grid-gap:0 var(--grid-gap);
	padding-top:4rem;
	padding-bottom:4rem;
}
section.autor > figure > img{
	border-radius:50%;
	border:2rem solid var(--weiss);
}
section.autor div.content{
	display:flex;
	flex-direction:column;
	justify-content:center;
}
section.autor div.content h1{
	margin-bottom:2rem;
	font-size:4rem;
	color:Var(--blau-hell-2);
}
section.autor div.content h2{
	font-weight:700;
	font-size:1.8rem;
	color:Var(--blau-hell-3);
}
section.autor div.content p{
	margin-bottom:3rem;
}
section.autor div.content ul.links{
	display:flex;
	justify-content:flex-start;
}
section.autor div.content ul.links li{
	margin:0 2rem 0 0;
}
section.autor div.content ul.links li a{
	display:block;
	width:4rem;
	height:4rem;
	background-color:black;
	border-radius:50%;
	background-size:2rem;
	background-position:center center;
	background-repeat:no-repeat;
}
section.autor div.content ul.links li.facebook a{
	background-image:url('images/facebook.svg');
	background-color:var(--facebook);
}
section.autor div.content ul.links li.twitter a{
	background-image:url('images/twitter.svg');
	background-color:var(--twitter);
}
section.autor div.content ul.links li.email a{
	background-image:url('images/email.svg');
	background-color:var(--blau-hell-2);
}
section.autor div.content ul.links li.posts a{
	background-image:url('images/posts.svg');
	background-color:var(--blau-hell-2);
}



/*** Artikel */

section.artikel{
	padding-top:0;
	padding-bottom:0;
	margin-top:2rem;
}
section.artikel article{
	background-color:var(--weiss);
	padding:var(--article-padding-left);
	padding-top:var(--article-padding-top);
	padding-bottom:var(--article-padding-top);
}
section.artikel article b,
section.artikel article strong{
	font-weight:700;
}
section.artikel article h1{
	font-weight:700;
	font-size:3.5rem;
	margin-bottom:3rem;
	color:var(--blau-hell-3);
}
section.artikel.download article h1{
	color:var(--gruen);
}
section.artikel.anleitung article h1{
	color:var(--rot);
}
section.artikel article h1 span{
	font-weight:400;
	color:var(--blau-hell-3);
}
section.artikel article > div.zurück-js a{
	display:inline-block;
	color:var(--gruen);
	margin-bottom:2rem;
	position:relative;
	padding:0.5rem 1.5rem 0.5rem 3rem;
	background-color:var(--gruen-hell-5);
	transition:var(--standard-transition);
}
section.artikel article > div.zurück-js a::before{
	content:'';
	position:absolute;
	width:1rem;
	height:1rem;
	border-left:2px solid var(--gruen);
	border-top:2px solid var(--gruen);
	transform:translateY(-50%) rotate(-45deg);
	left:1rem;
	top:50%;
	transition:var(--standard-transition);
}


section.artikel article ul.meta{
	display:flex;
	align-items:center;
	margin-bottom:3rem;
	font-size:1.5rem;
}
section.artikel article ul.meta li.autor{
	display:flex;
	align-items:center;
	margin:0 1rem 0 0;
}
section.artikel article ul.meta li.autor img{
	width:4rem;
	border-radius:50%;
	border:0;
	margin:0 1rem 0 0;
}
section.artikel article ul.meta li.datum::before{
	content:'·';
	padding-right:1rem;
	font-weight:700;
}
section.artikel article ul.meta li.autor a{
	color:var(--blau-hell-2);
	font-weight:700;
	border-bottom: 2px solid transparent;
	transition: border 0.3s ease-in-out;
}
section.artikel article ul.meta li.teilen{
	margin-left:auto;
}
section.artikel article ul.meta li.teilen ul{
	display:flex;
}
section.artikel article ul.meta li.teilen ul li{
	margin-left:1rem;
}
section.artikel article ul.meta li.teilen ul li a{
	display:block;
	background-color:black;
	color:var(--weiss);
	padding:0.25rem 1rem 0.25rem 3rem;
	background-repeat:no-repeat;
	background-position:0.7rem center;
	background-size:1.5rem;
	font-size:1.4rem;
}
section.artikel article ul.meta li.teilen ul li.facebook a{
	background-image:url('images/facebook.svg');
	background-color:var(--facebook);
}
section.artikel article ul.meta li.teilen ul li.twitter a{
	background-image:url('images/twitter.svg');
	background-color:var(--twitter);
}
section.artikel article img{
	width:100%;
	height:auto;
	display:block;
	margin-bottom:3rem;
	border:1px solid var(--schwarz-10);
}
section.artikel article h2{
	font-weight:700;
	font-size:3rem;
	margin-bottom:2rem;
	margin-top:4rem;
	color:var(--blau-hell-2);
}
section.artikel article h3{
	font-weight:700;
	font-size:2.3rem;
	margin-bottom:2rem;
	color:var(--blau-hell-2);
}
section.artikel article p{
	margin-bottom:2rem;
}
section.artikel article p strong{
	font-weight:700;
	color:var(--blau-hell-2);
	font-size:2.2rem;
}
section.artikel article p em{
	font-style:italic;
	font-size:2.2rem;
	color:var(--blau-hell-3);
}
section.artikel article p a{
	border-bottom:2px solid var(--blau-hell-4);
	font-weight:400;
	color:var(--blau-hell-2);
}
section.artikel article p:first-of-type{
	font-size:2.5rem;
	margin-bottom:3rem;
}
/*
section.artikel article > *:last-of-type:is(p)::after{
	content:' ■';
	color:var(--blau-hell-6);
}
*/
section.artikel article > table{
	border-collapse:collapse;
	margin-bottom:2rem;
}
section.artikel article > table tr td{
	background-color:var(--grau-hell);
	padding:1rem;
	border-right:1px solid var(--weiss);
	border-bottom:1px solid var(--weiss);
}
section.artikel article > table tr:last-of-type td{
	border-bottom:0;
}
section.artikel article > ul:not(.meta){
	margin-bottom:2rem;
}
section.artikel article > ul:not(.meta) > li{
	margin-bottom:1rem;
	padding-left:2rem;
	position:relative;
}
section.artikel article > ul:not(.meta) > li::before{
	content:'';
	position:absolute;
	left:0;
	top:1.4rem;
	width:0.5rem;
	height:0.5rem;
	background-color:var(--blau-hell-3);
	border-radius:50%;
}
section.artikel article > ul:not(.meta) > li a{
	border-bottom:2px solid var(--blau-hell-4);
	font-weight:400;
	color:var(--blau-hell-2);
}

section.artikel article div.gallery{
	background-color:var(--grau-hell);
	padding:2rem;
	display:grid;
	grid-template-columns:repeat(3,1fr);
	grid-gap:0.5rem;
	margin-bottom:3rem !important;
}
section.artikel article div.gallery dl.gallery-item{
	background-color:var(--weiss);
	padding:1rem;
	display:grid;
	float:none !important;
	width:auto !important;
	margin:0 !important;
}
section.artikel article div.gallery br{
	display:none !important;
}
section.artikel article div.gallery img{
	border:0 !important;
	margin:0 !Important;
}
section.artikel article div.gallery dd.gallery-caption{
	font-size:1.5rem;
	padding-top:1rem;
}

section.artikel article iframe[src*="youtube.com"]{
	width:100%;
	height:calc((var(--content-width) - (2 * var(--article-padding-left))) * 0.57);
}



/* Artikel-Kommentare */
section.artikel article div.kommentare{
	padding:2rem;
	background-color:var(--grau-hell);
	text-align:center;
	margin-top:5rem;
}
section.artikel article div.kommentare a{
	display:inline-block;
	background-color:var(--blau-hell-2);
	color:var(--weiss);
	padding:0.5rem 5rem 0.5rem 1.25rem;
	border:0;
	background-image:url('images/kommentare.svg');
	background-repeat:no-repeat;
	background-size:1.8rem;
	background-position:center right 2rem;
	transition:var(--link-transition);
}
section.artikel article div.kommentare + ul.quelle{
	margin-top:var(--grid-gap);
}

/* Artikel-Quelle */
section.artikel article ul.quelle{
	padding:2rem;
	background-color:var(--blau-hell-6);
	text-align:center;
}
section.artikel article ul.quelle li{
	padding:0;
	display:inline-block;
	margin:0;
}
section.artikel article ul.quelle li::before{
	content:none;
}
section.artikel article ul.quelle li a{
	display:inline-block;
	background-color:var(--blau-hell-4);
	color:var(--weiss);
	padding:0.5rem 4.5rem 0.5rem 1.25rem;
	border:0;
	background-image:url('images/externer-link.svg');
	background-repeat:no-repeat;
	background-size:1.8rem;
	background-position:center right 1.8rem;
	transition:var(--link-transition);
}


/* Artikel-Autor */
section.artikel div.autor{
	background-color:var(--grau-hell);
	border-top:4px solid var(--blau-hell-2);
	padding:4rem;
	margin:0 25%;
	text-align:center;
}
section.artikel div.autor h3{
	text-align:center;
}
section.artikel div.autor h4{
	font-size:2.7rem;
	margin-bottom:1rem;
	color:var(--blau-hell-3);
}
section.artikel div.autor p{
	font-size:1.5rem;
}
section.artikel div.autor figure{
	border-radius:50%;
	margin:0 auto 2rem auto;
	width:15rem;
	height:15rem;
	background-color:var(--weiss);
}
section.artikel div.autor figure img{
	border-radius:50%;
	border:0;
	width:100%;
	height:100%;
	object-fit:cover;
	margin:0;
}
section.artikel div.autor ul.links{
	display:flex;
	margin-bottom:2rem;
	justify-content:center;
}
section.artikel div.autor ul.links li{
	margin:0 1rem;
}
section.artikel div.autor ul.links li a{
	display:block;
	width:3rem;
	height:3rem;
	background-color:black;
	border-radius:50%;
	background-size:1.5rem;
	background-position:center center;
	background-repeat:no-repeat;
	transition:var(--link-transition);
}
section.artikel div.autor ul.links li.facebook a{
	background-image:url('images/facebook.svg');
	background-color:var(--facebook);
}
section.artikel div.autor ul.links li.twitter a{
	background-image:url('images/twitter.svg');
	background-color:var(--twitter);
}
section.artikel div.autor ul.links li.email a{
	background-image:url('images/email.svg');
	background-color:var(--blau-hell-2);
}
section.artikel div.autor ul.links li.posts a{
	background-image:url('images/posts.svg');
	background-color:var(--blau-hell-2);
}

/* Artikel-Themen */
section.artikel article ul.themen{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	margin-bottom:5rem;
	margin-top:5rem;
}
section.artikel article ul.themen li{
	margin:0 1rem 1rem 0;
	padding:0;
}
section.artikel article ul.themen li::before{
	content:none;
}
section.artikel article ul.themen li a{
	padding:0.5rem 1.5rem;
	background-color:var(--grau-hell);
	color:var(--blau-hell-2);
	border:0;
	transition:var(--link-transition);
}



/* Artikel-Download-Infos */
section.artikel.download article div.info{
	padding:4rem 2rem;
	background-color:var(--gruen-hell-5);
	text-align:center;
	margin-top:4rem;
	border-top:5px solid var(--gruen);
}
section.artikel.download article div.info span{
	font-weight:400;
	display:block;
}
section.artikel.download article div.info ul{
	display:grid;
	grid-template-columns:1fr 1fr;
	grid-gap:0.2rem;
}
section.artikel.download article div.info ul li{
	background-color:var(--weiss);
	padding:1rem;
	font-weight:700;
	color:Var(--schwarz-60);
	font-size:1.8rem;
}
section.artikel.download article div.info ul li span{
	font-weight:400;
	display:inline;
}
section.artikel.download article div.info div.download-link{
	padding-top:4rem;
}
section.artikel.download article div.info div.download-link a{
	background-color:var(--gruen);
	padding:1rem 5rem 1rem 2rem;
	color:var(--weiss);
	background-image:url('images/download.svg');
	background-repeat:no-repeat;
	background-position:center right 1.5rem;
	background-size:2rem;
	transition:var(--link-transition);
}
section.artikel.download article div.link-defekt{
	text-align:center;
}
section.artikel.download article div.link-defekt a{
	text-align:center;
	display:inline-block;
	font-size:1.5rem;
	color:var(--rot);
}




/*** Appbox */
section.artikel article div.wpappbox{
	display:grid !important;
	grid-template-columns:15rem auto 15rem;
	grid-gap:0 1px;
	padding:3rem;
	background-color:var(--grau-hell);
	border-radius:0;
	box-shadow:none;
	border:0;
	height:auto;
}
section.artikel article div.wpappbox div.appicon{
	order:1;
	display:flex;
	align-items:center;
	justify-content:center;
	position:static;
	height:auto;
	width:auto;
	float:none;
	padding:2rem;
	border-right:none;
	border-top-left-radius:0;
	border-bottom-left-radius:0;
}
section.artikel article .wpappbox div.appicon a{
	display:block;
}
section.artikel article .wpappbox div.appicon a img{
	height:auto;
	max-height:none !important;
	width:100% !important;
	max-width:none !important;
	border-radius:0;
	display:block;
}
section.artikel article .wpappbox div.applinks{
	order:3;
	height:auto !important;
	width:100% !important;
	display:flex !important;
	justify-content:center;
	align-items:flex-end;
	float:none !important;
	position:static !important;
	border:0 !important;
	filter:none !important;
	background-position:center top 2rem !important;
	border-radius:0 !important;
	padding:1rem !important;
}
section.artikel article div.wpappbox div.appbuttons{
	position:static;
	bottom:auto;
	width:auto;
}
section.artikel article div.wpappbox div.appbuttons a,
section.artikel article div.wpappbox div.appbuttons span,
section.artikel article div.wpappbox.error div.buttons a{
	font-size:1.2rem;
	box-shadow:none;
	background-color:var(--grau-hell);
	color:var(--blau-hell-1);
	padding:0.5rem 1rem;
	margin:0.5rem 0 0 0;
	border-radius:0;
	cursor:pointer;
}
section.artikel article div.wpappbox div.appdetails{
	padding:2rem;
	display:flex;
	flex-direction:column;
	justify-content:center;
	order:2;
	background-color:var(--weiss);
	overflow:hidden;
}
section.artikel article div.wpappbox div.appdetails > div{
	padding:0;
}
section.artikel article div.wpappbox div.appdetails > div.apptitle a{
	margin-bottom:0.5rem;
	color:Var(--blau-hell-1);
	display:block;
	text-overflow:ellipsis;
	white-space:nowrap;
	overflow:hidden;
	
}


/*** News-Ticker */
section.news-ticker h1{
	font-size:3rem;
	margin-bottom:3rem;
	color:var(--blau-hell-3);
	font-weight:700;
	text-align:center;
}
section.news-ticker ul{
}
section.news-ticker > ul > li{
	margin-bottom:1rem;
}
section.news-ticker ul li h2{
	background-color:var(--weiss);
	
	padding:1rem;
	text-align:center;
	font-weight:700;
	color:var(blau-hell-3);
}

section.news-ticker ul li ul li{
	background-color:var(--weiss);
	display:flex;
	align-items:center;
	border-top:1px solid var(--schwarz-10);
}
section.news-ticker ul li ul li h3{
	flex:0 0 20rem;
	padding:1rem;
	text-align:right;
	color:Var(--schwarz-70);
}
section.news-ticker ul li ul li a{
	display:inline;
	padding:1rem;
	color:var(--blau-hell-3);
	font-weight:400;
}
section.news-ticker ul li ul li a span{
	font-weight:400;
}

/*** Seiten */

section.seite article{
	background-color:var(--weiss);
	padding:6rem 10rem;
}
section.seite article h1{
	font-size:3rem;
	margin-bottom:3rem;
	color:var(--blau-hell-3);
	font-weight:700;
}
section.seite article h2{
	font-size:2.5rem;
	margin-bottom:2.5rem;
	color:var(--blau-hell-3);
	font-weight:700;
}
section.seite article h3{
	font-size:2rem;
	margin-bottom:1rem;
	color:var(--blau-hell-3);
	font-weight:700;
}
section.seite article p{
	margin-bottom:3rem;
}
section.seite article form p{
	background-color:var(--grau-hell);
	margin-bottom:1px;
	padding:2rem;
}
section.seite article form p label{
	color:var(--blau-hell-2);
}
section.seite article form p span{
	display:flex;
}
section.seite article form p span input,
section.seite article form p span textarea{
	border:0;
	padding:1rem;
	border-radius:0;
	flex:1;
	font-size:2rem;
	color:var(--schwarz-70);
	font-family:'Segoe UI',sans-serif;
}
section.seite article form p input[type=submit]{
	background-color:var(--blau-hell-2);
	color:var(--weiss);
	padding:1rem 3rem;
	border:0;
	font-family:'Segoe UI',sans-serif;
	border-radius:0;
	font-size:2rem;
}


/*** Footer */

footer{
	background-color:var(--blau);
}

footer section.community{
	color:var(--weiss);
	background-color:var(--blau-hell-1);
	text-align:center;
	padding-bottom:5rem;
	padding-top:5rem;
}
footer section.community div.grid div{
	padding:2rem;
	border:1px solid var(--blau-hell-2);
	display:flex;
	flex-direction:column;
	justify-content:center;
}
footer section.community figure{
	width:30rem;
	margin:0 auto 2rem auto;
}
footer section.community h4{
	margin-bottom:2rem;
	font-size:2.5rem;
	color:var(--blau-hell-4);
}
footer section.community > p{
	margin-bottom:2rem;
	padding:0 20%;
}
footer section.community div.grid{
	grid-gap:1rem;
}
footer section.community div.grid div{
	padding-top:5rem;
	padding-bottom:5rem;
}
footer section.community div.grid div p{
	margin-bottom:0;
}
footer section.community p a{
	color:var(--weiss);
	border-bottom:2px solid var(--blau-hell-4);
}
footer section.community ul{
	margin-bottom:3rem;
	display:inline-block;
}
footer section.community ul li{
	padding:0 0 0 5rem;
	position:relative;
	text-align:left;
	margin-bottom:0.5rem;
	display:flex;
	align-items:center;
}
footer section.community ul li::before{
	content:'';
	position:absolute;
	left:1.7rem;
	top:50%;
	width:0.9rem;
	height:1.7rem;
	border-bottom:3px solid var(--blau-hell-3);
	border-right:3px solid var(--blau-hell-3);
	transform:translateY(-55%) rotate(35deg);
}
footer section.community p.login a,
footer section.community p.registrieren a{
	display:inline-block;
	padding:1rem 6rem 1.3rem 2.5rem;
	background-color:var(--blau);
	border:0;
	background-repeat:no-repeat;
	background-position:right 1.5rem center;
	background-size:2.5rem;
	background-image:url('images/login.svg');
	border-radius:500px;
	transition:all 0.3s ease-in-out;
}
footer section.community p.login a span,
footer section.community p.registrieren a span{
	border-bottom:2px solid var(--gelb);
}
footer section.community p.registrieren{
	margin-bottom:4rem;
}
footer section.community p.registrieren a{
	background-size:2.2rem;
	background-position:right 2rem center;
	background-image:url('images/register.svg');
}

footer section.themen{
	padding-top:8rem;
	padding-bottom:8rem;
}
footer section.themen a{
	color:var(--weiss);
	font-size:1.5rem;
	display:block;
	border-top:1px solid var(--blau-hell-1);
	padding:1rem 1rem 1rem 3rem;
	position:relative;
}
footer section.themen a::before{
	content:'';
	position:absolute;
	left:0;
	top:50%;
	width:0.8rem;
	height:0.8rem;
	border-bottom:1px solid var(--blau-hell-3);
	border-right:1px solid var(--blau-hell-3);
	transform:translateY(-50%) rotate(-45deg);
}
footer section.themen h3{
	font-size:2.4rem;
	margin-bottom:2rem;
	color:var(--blau-hell-3);
	font-weight:700;
	text-align:center;
}
footer section.themen ul{
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
	grid-gap:0 var(--grid-gap);
}

footer section.rechtliches{
	border-top:2px solid var(--blau-hell-1);
}
footer section.rechtliches ul{
	display:flex;
	justify-content:Center;
}
footer section.rechtliches ul li{
	margin:0 0.5rem;
}
footer section.rechtliches ul li a{
	color:var(--blau-hell-4);
	font-size:1.5rem;
}

footer section.copyright{
	background-color:var(--blau-hell-1);
	text-align:center;
	color:var(--weiss);
	font-size:1.5rem;
}

/* Darkmode-Update */
footer section.kf{
	background-color:var(--blau);
	text-align:center;
	color:var(--blau-hell-4);
	font-size:1.5rem;
	padding-top:5rem;
	padding-bottom:5rem;
	text-align:center;
}
footer section.kf figure{
	margin-bottom:2rem;
}
footer section.kf figure a{
	display:inline-block;
}
footer section.kf img{
	display:inline-block;
	width:4rem;
	height:auto;
}
footer section.kf p a{
	color:var(--blau-hell-4);
	text-decoration:underline;
	text-decoration-color:var(--cyan);
	text-decoration-thickness:1px;
	text-underline-offset:3px;
}



/*** Mobile Menu */

#mobile-menu{
	position:absolute;
	right:var(--content-padding);
	top:50%;
	transition:all 0.4s ease-in;
	transform:translateY(-50%);
	z-index:1000;
}
#mobile-menu a{
	display:block;
	width:var(--mobile-menu-width);
	height:var(--mobile-menu-width);
	position:relative;
	border:0;
}
#mobile-menu a span{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	transform-origin:0 0;
	background-color:var(--weiss);
	width:calc(var(--mobile-menu-width) * 0.8);
	height:calc(var(--mobile-menu-width) * 0.06);
	height:0;
	border-bottom:2px solid var(--weiss);
	transition:all 0.5s ease-in-out;
}
#mobile-menu a span:nth-of-type(1){
	top:25%;
}
#mobile-menu a span:nth-of-type(2){
	top:50%;
}
#mobile-menu a span:nth-of-type(3){
	top:75%;
}
#mobile-menu.open a span:nth-of-type(1){
	top:50%;
	transform:rotate(45deg) translate(-50%,-50%);
	border-color:var(--blau-hell-1);
}
#mobile-menu.open a span:nth-of-type(2){
	opacity:0;
	transition:all 0.1s ease-in-out;
}
#mobile-menu.open a span:nth-of-type(3){
	top:50%;
	transform:rotate(-45deg) translate(-50%,-50%);
	border-color:var(--blau-hell-1);
}
#mobile-menu-content{
	width:100%;
	height:100vh;
	height:100%;
	background-color:var(--grau-hell);
	position:fixed;
	top:0;
	left:-100%;
	z-index:80;
	display:flex;
	align-items:flex-start;
	transition:left 0.7s ease-in-out;
	padding-top:var(--header-height);
}
#mobile-menu-content.open{
	left:0;
}
#mobile-menu-content > div{
	width:100%;
	height:calc(100vh - var(--header-height));
	height:100%;
	display:flex;
	flex:wrap;
	align-items:flex-start;
	overflow:auto;
}
#mobile-menu-content > div > ul{
	width:100%;
	display:block;
	margin:0;
}
#mobile-menu-content > div > ul > li{
	transition:all 0.5s ease-in-out;
	border-bottom:1px solid var(--weiss);
}
#mobile-menu-content > div > ul > li > a{
	display:block;
	padding:0;
	font-size:2.7rem;
	padding:2rem 0;
	color:var(--blau);
	position:relative;
	text-align:center;
}
#mobile-menu-content > div > ul > li > a > span{
	border-bottom:2px solid var(--cyan);
}
#mobile-menu-content > div > ul > li:nth-of-type(2) > a span{
	border-bottom:2px solid var(--gelb);
}
#mobile-menu-content > div > ul > li:nth-of-type(3) > a span{
	border-bottom:2px solid var(--gruen);
}
#mobile-menu-content > div > ul > li:nth-of-type(4) > a span{
	border-bottom:2px solid var(--rot);
}
#mobile-menu-content > div > ul > li.artikel-suche{
	padding:3rem var(--content-padding);
	border-bottom:1px solid var(--weiss);
}
#mobile-menu-content > div > ul > li.artikel-suche form{
	display:flex;
	justify-content:center;
}
#mobile-menu-content > div > ul > li.artikel-suche div{
	display:flex;
	flex:1;
}
#mobile-menu-content > div > ul > li.artikel-suche div.submit{
	display:flex;
	flex:0 0 6rem;
}

#mobile-menu-content > div > ul > li.artikel-suche input{
	border:0;
	padding:2rem;
	text-align:left;
	color:var(--blau);
	font-family:'Segoe UI', sans-serif;
	font-size:2rem;
	flex:1;
}
#mobile-menu-content > div > ul > li.artikel-suche button{
	background-color:var(--blau-hell-5);
	padding:2rem 4rem;
	border:0;
	background-image:url('images/suche.svg');
	background-repeat:no-repeat;
	background-size:2rem;
	background-position:center center;
	border-radius:0;
	flex:0;
}

#mobile-menu-content > div > ul > li.social-media ul{
	display:flex;
	justify-content:center;
	padding:3rem var(--content-padding);
}
#mobile-menu-content > div > ul > li.social-media ul li{
	margin:0 1rem;
}
#mobile-menu-content > div > ul > li.social-media ul li a{
	background:var(--blau-hell-2);
	display:block;
	width:5rem;
	height:5rem;
	border-radius:50%;
	background-repeat:no-repeat;
	background-size:2rem;
	background-position:center center;
}
#mobile-menu-content > div > ul > li.social-media ul li a span{
	display:none;
}
#mobile-menu-content > div > ul > li.social-media ul li.facebook a{
	background-image:url('images/facebook.svg');
}
#mobile-menu-content > div > ul > li.social-media ul li.twitter a{
	background-image:url('images/twitter.svg');
}
#mobile-menu-content > div > ul > li.social-media ul li.youtube a{
	background-image:url('images/youtube.svg');
}
#mobile-menu-content > div > ul > li.social-media ul li.telegram a{
	background-image:url('images/telegram.svg');
}
#mobile-menu-content > div > ul > li.social-media ul li.mastodon a{
	background-image:url('images/mastodon.svg');
}
#mobile-menu-content > div > ul > li.social-media ul li.rss-feed a{
	background-image:url('images/rss.svg');
	background-size:1.5rem;
}
#mobile-menu-content > div > ul > li.darkmode{
	display:flex;
	justify-content:center;
	padding:3rem var(--content-padding);
}


/*** Darkmode-Update */

:root body.darkmode{
	--weiss:hsl(219,15%,12%);
	--grau-hell:hsl(219,15%,25%);
	
	--schwarz:#fff;
	--schwarz-10:hsl(219,15%,15%);
	--schwarz-20:hsl(219,15%,20%);
	--schwarz-25:hsl(219,15%,23%);
	--schwarz-30:hsl(219,15%,30%);
	--schwarz-40:hsl(219,15%,40%);
	--schwarz-50:hsl(219,15%,50%);
	--schwarz-60:hsl(219,15%,60%);
	--schwarz-70:hsl(219,15%,70%);
	--schwarz-80:hsl(219,15%,80%);
	--schwarz-85:hsl(219,15%,85%);
	--schwarz-87:hsl(219,15%,87%);
	--schwarz-90:hsl(219,15%,90%);
	
	--debug:hsl(219,15%,50%);
}
body.darkmode::-webkit-scrollbar{
	width:2rem;
}
body.darkmode::-webkit-scrollbar-track{
	background:var(--schwarz-20);
	border:1px solid var(--schwarz-10);
}
body.darkmode::-webkit-scrollbar-thumb{
	background-color:var(--schwarz-30);
}
body.darkmode::selection{
	color:var(--schwarz);
}
body.darkmode::-moz-selection{
	color:var(--schwarz);
}


/*
body.darkmode section.marke h3::before{
	content:'Darkmode beta';
	position:absolute;
	background:var(--rot);
	font-size:1.3rem;
	padding:0.5rem 2.5rem;
	left:4rem;
	top:2.5rem;
	transform:translateX(-50%) rotate(-45deg);
}
*/
body.darkmode header section.navigation form input{
	color: var(--schwarz);
}

body.darkmode section.artikel article,
body.darkmode section.artikel-übersicht > ul li,
body.darkmode section.artikel-übersicht > ul > li > a,
body.darkmode section.artikel-übersicht > ul li.themen ul li a,
body.darkmode div.pager ul.page-numbers li a,
body.darkmode div.pager ul.page-numbers li span,
body.darkmode #mobile-menu-content{
	background-color:var(--schwarz-20);
}

body.darkmode section.artikel-übersicht ul li img,
body.darkmode section.artikel article img {
	opacity:0.9;
}
body.darkmode section.artikel-übersicht > ul > li > a {
	color: var(--schwarz-80);
}
body.darkmode section.artikel article p a {
	color: var(--blau-hell-4);
}

body.darkmode header section.navigation nav#main ul li a,
body.darkmode section.artikel article ul.meta li.teilen ul li a,
body.darkmode section.artikel-übersicht > ul > li > a > h3,
body.darkmode section.artikel article div.kommentare a,
body.darkmode footer section.community,
body.darkmode footer section.community p a,
body.darkmode footer section.themen a,
body.darkmode footer section.copyright{
	color: var(--schwarz);
}



body.darkmode section.artikel-übersicht > ul li p.meta a,
body.darkmode section.artikel-übersicht > ul li.forum > a,
body.darkmode section.artikel-übersicht > ul li.forum p.link a,
body.darkmode div.pager ul.page-numbers li a,
body.darkmode section.artikel article h3,
body.darkmode section.artikel article p strong,
body.darkmode section.artikel article ul.meta li.autor a,
body.darkmode section.artikel article div.wpappbox div.appdetails > div.apptitle a,
body.darkmode section.artikel article div.wpappbox div.appbuttons a,
body.darkmode section.artikel article div.wpappbox div.appbuttons span,
body.darkmode section.artikel article div.wpappbox.error div.buttons a,
body.darkmode section.featured ul li h2{
	color: var(--blau-hell-3);
}
body.darkmode section.artikel article ul.themen li a{
	color: var(--blau-hell-4);
}

body.darkmode section.featured{
	background-color:var(--schwarz-20);
}
body.darkmode section.featured ul li{
	background-color:var(--schwarz-10);
}
body.darkmode section.featured ul li h2::before{
	border-color:var(--blau-hell-3);
}
body.darkmode section.featured ul li h3{
	color: var(--schwarz);
}

body.darkmode div.pager ul.page-numbers li span.current{
	background-color:var(--blau);
}

body.darkmode section.artikel-übersicht > ul li.werbung > h3{
	color:var(--schwarz-70);
}
body.home.darkmode section.news-ticker a,
body.search.darkmode section.news-ticker a,
body.darkmode article section.news-ticker a{
	background-color:var(--schwarz-20);
}
body.darkmode section.artikel article ul.themen li a{
	background-color: var(--schwarz-10);
}

body.darkmode section.autor:not(.artikel-übersicht),
body.darkmode section.artikel div.autor,
body.darkmode section.artikel article ul.quelle{
	background-color:var(--schwarz-25);
}

body.darkmode section.artikel article div.wpappbox{
	background-color:var(--schwarz-10);
}
body.darkmode div.wpappbox div.appicon,
body.darkmode div.wpappbox div.applinks,
body.darkmode div.wpappbox.compact a.applinks,
body.darkmode section.artikel article div.wpappbox div.appdetails,
body.darkmode #mobile-menu-content > div > ul > li.artikel-suche input{
	background-color:var(--schwarz-20);
}
body.darkmode div.wpappbox,
body.darkmode div.wpappbox a:link,
body.darkmode div.wpappbox a:visited{
	color:var(--schwarz-80);
}
body.darkmode section.artikel article .wpappbox div.appicon a img{
	opacity:0.8;
}


body.darkmode #mobile-menu-content > div > ul > li > a {
	color: var(--blau-hell-4);
}
body.darkmode #mobile-menu a span{
	border-color: var(--schwarz);
}
body.darkmode #mobile-menu.open a span:nth-of-type(1),
body.darkmode #mobile-menu.open a span:nth-of-type(3){
	border-color:var(--blau-hell-4);
}
body.darkmode #mobile-menu-content > div > ul > li.artikel-suche input{
	color:var(--schwarz-80);
	background-color:var(--schwarz-10);
}
body.darkmode #mobile-menu-content > div > ul > li.artikel-suche button{
	background-color: var(--blau-hell-2);
}
body.darkmode #mobile-menu-content > div ul li.forum,
body.darkmode #mobile-menu-content > div ul li.forum ul {
	background-color: var(--schwarz-30);
}
body.darkmode #mobile-menu-content > div ul li.forum ul li a {
	border-top: 1px solid var(--schwarz-20);
	color:var(--blau-hell-5);
}
body.darkmode #mobile-menu-content > div ul li.forum ul li ul li a{
	background-color: var(--schwarz-20);
}
body.darkmode #mobile-menu-content > div ul li.forum ul li ul li a::before{
	border-top-color:var(--blau-hell-2);
	border-right-color:var(--blau-hell-2);
}

body.darkmode section.artikel article > div.zurück-js a{
	background-color: var(--schwarz-30);
}
body.darkmode section.artikel.download article div.info{
	background-color: var(--schwarz-25);
}
body.darkmode section.artikel-übersicht > ul li.themen ul li a {
	color:var(--blau-hell-3);
}

body.darkmode section.artikel article > ul:not(.meta) > li a{
	color:var(--blau-hell-4);
}

body.darkmode section.artikel article ul.quelle li a{
	background-color:var(--schwarz-20);
	background-image:url('images/externer-link-darkmode.svg');
}


/*** Media-Queries */

/** - hovers */
@media (hover:hover){
	
	header section.navigation nav#main ul li a:hover{
		background-color:var(--blau);
	}
	header section.marke nav#social-media ul li a:hover{
		box-shadow:0 0 0 0.2rem var(--blau-hell-3);
	}
	header section.navigation form input:hover{
		box-shadow: 0 0 0 0.2rem var(--blau-hell-3);
	}
	section.artikel-übersicht ul > li > a:hover{
		background-color:var(--blau-hell-6);
	}
	
	section.artikel-übersicht > ul li p.meta a:hover,
	section.artikel-übersicht > ul li p.link a:hover{
		border-color:var(--blau-hell-3);
	}
	section.artikel-übersicht > ul li.themen ul li a:hover{
		background-color:var(--blau-hell-6);
	}
	
	section.artikel-übersicht > ul li.forum > a:hover::before{
		right:0;
	}
	
	section.artikel article ul.meta li.autor a:hover{
		border-color:var(--blau-hell-3);
	}
	section.artikel article ul.meta li.teilen ul li.facebook a:hover,
	section.artikel article ul.meta li.teilen ul li.twitter a:hover{
		box-shadow: 0 0 0 0.2rem var(--blau-hell-4);
	}
	
	section.artikel article p a:hover {
		background-color:var(--blau-hell-6);
	}
	section.artikel article ul.themen li a:hover{
		background-color:var(--blau-hell-6);
	}
	section.artikel article ul.quelle li a:hover{
		background-color:var(--blau-hell-3);
	}
	section.artikel article div.kommentare a:hover{
		background-color:var(--blau-hell-1);
	}
	
	
	section.artikel div.autor ul.links li a:hover{
		background-color:var(--blau);
	}
	
	section.artikel article > a.zurück-js:hover{
		color:var(--weiss);
		background-color:var(--gruen);
	}
	section.artikel article > a.zurück-js:hover::before{
		border-color:var(--weiss);
	}
	section.artikel.download article div.info div.download-link a:hover{
		background-color:var(--gruen-dunkel-1);
	}
	
	
	section.featured ul li a:hover{
		box-shadow: 0 0 0 0.2rem var(--schwarz-20);
	}
	body.home section.news-ticker a:hover,
	body.search section.news-ticker a:hover,
	article section.news-ticker a:hover{
		box-shadow: 0 0 0 0.2rem var(--schwarz-20);
	}
	
	
	footer section.community p.registrieren a:hover,
	footer section.community p.login a:hover{
		box-shadow: 0 0 0 0.2rem var(--blau-hell-3);
	}
	
	footer section.themen ul li a:hover{
		background-color:var(--blau-hell-1);
	}
	
	footer section.rechtliches ul li a:hover{
		border-bottom:1px solid var(--blau-hell-4);
	}
	
	
	/* Darkmode-Update */
	
	body.darkmode section.artikel-übersicht ul > li > a:hover,
	body.darkmode section.artikel-übersicht > ul li.themen ul li a:hover{
		background-color:var(--schwarz-10);
	}
	
	
}


/* Werbeanzeigen links und rechts auf 160px Breite verkleinern */
/** - Werbeanzeigen */
@media (max-width:1650px){
	div.anzeige{
		/*
		width:16rem;
		*/
	}
}


/* Werbeanzeigen links und rechts ausblenden */
@media (max-width:1300px){
	div.anzeige.rechts-der-seite{
		display:none;
	}
	div.anzeige.links-der-seite{
		display:none;
	}
}


/** - Desktop */

@media (max-width:1200px){
	:root{
		--content-width:98rem;
	}
}


@media (max-width:1024px){
	:root{
		--content-width:90rem;
	}
}




/** - Tablet */

/*@media (max-width:1023px){*/
@media (max-width:990px){
	:root{
		--content-width:100%;
		--grid-gap:1rem;
		--article-padding-top:4rem;
		--article-padding-left:8rem;
	}
	body{
		/*
		padding-top:var(--header-height);
		*/
	}
	section{
		padding:var(--content-padding);
	}
	header{
		height:var(--header-height);
	}
	/* Darkmode-Update */
	header section.navigation,
	header nav#social-media{
		display:none !important;
	}
	section.artikel-übersicht ul{
		grid-gap:1rem;
		grid-template-columns:1fr 1fr;
	}
	section.artikel-übersicht.startseite > ul > li:first-of-type{
		grid-column:1;
	}
	section.artikel-übersicht ul li.themen{
		grid-column:1 / span 2;
	}
	section.artikel article div.zurück-js{
		text-align:center;
	}
	section.artikel div.autor{
		margin:0 10%;
	}
	
	section.artikel article div.gallery {
		grid-template-columns: repeat(2,1fr);
	}
	
	section.artikel article iframe[src*="youtube.com"]{
		width:100%;
		height:calc((100vw - (2 * var(--content-padding)) - (2 * var(--article-padding-top))) * 0.57);
	}
	
	section.featured ul{
		grid-template-columns:1fr 1fr;
	}
	section.featured ul li h2{
		padding:1rem 3rem 1rem 3rem;
	}
	section.featured ul li h2::before{
		right:1.4rem;
	}
	section.featured ul li a{
		/* display: grid; */
		/* grid-template-columns: 1fr 1fr; */
		/* align-items:center; */
	}
	section.featured ul li figure{
		border-bottom:0;
		border-right: 3px solid var(--blau-hell-2);
	}
	
	section.artikel article div.wpappbox{
		grid-template-columns:10rem auto 10rem;
		padding:1rem;
	}
	/* QR-Code-Button ausblenden */
	article div.wpappbox div.applinks div.appbuttons span{
		display:none !important;
	}
	section.autor > figure > img{
		border-width:1.5rem;
	}
	footer section.rechtliches ul{
		display:block;
	}
	footer section.rechtliches ul li a{
		text-align:center;
		display:block;
		padding:1rem;
	}
}


@media (max-width:700px){
	:root{
		--article-padding-top:4rem;
		--article-padding-left:4rem;
	}
	header section.marke h4{
		display:none;
	}
	section.artikel article div.wpappbox{
		grid-template-columns:1fr;
		padding:1rem;
		grid-gap:1px 0;
	}
	article div.wpappbox div.appdetails .apptitle,
	article div.wpappbox div.appdetails .developer,
	article div.wpappbox div.appdetails .price{
		display:flex;
		justify-content:center;
	}
	article div.wpappbox div.appdetails .apptitle .label,
	article div.wpappbox div.appdetails .developer  .label,
	article div.wpappbox div.appdetails .price  .label{
		padding-right:1rem;
	}
	article div.wpappbox div.appdetails .apptitle .value,
	article div.wpappbox div.appdetails .developer  .value,
	article div.wpappbox div.appdetails .price  .value{
		display:flex;
		align-items:center;
	}
	section.artikel article .wpappbox div.appicon a{
		display:block;
		width:8rem;
	}
	article div.wpappbox div.applinks div.appbuttons{
		padding-top:6rem;
	}
	article div.wpappbox div.applinks div.appbuttons span{
		display:none !important;
	}
	
	section.artikel div.autor{
		margin:0;
	}
	section.autor > figure > img{
		border-width:1rem;
	}
}




/** - Smartphone */

@media (max-width:545px){
	:root{
		--content-padding:1rem;
		--header-height:9rem;
		--grid-gap:1rem;
		--article-padding-top:2.5rem;
		--article-padding-left:2.5rem;
	}
	body{
		font-size:1.8rem;
	}
	main .post-pager{
		position:absolute;
	}
	header section.marke h3{
		width:20rem;
		margin-left:0.5rem;
	}
	/* Darkmode-Update */
	body.darkmode section.marke h3::before {
		/*
		left: auto;
		right:var(--content-padding);
		transform: translateX(0);
		padding-top:0.2rem;
		padding-bottom:0.2rem;
		*/
	}
	
	section.artikel-übersicht ul{
		grid-template-columns:1fr;
	}
	section.artikel-übersicht.startseite.seite-1 ul li:first-of-type{
		grid-column:1;
	}
	section.artikel-übersicht ul li.themen{
		display:none;
	}
	section.artikel-übersicht ul li.forum p.link{
		position:static;
		text-align:center;
	}
	section.artikel-übersicht ul li.forum p.link a{
		padding:2rem 1rem;
		display:inline-block;
	}
	section.featured ul{
		display:grid;
		grid-template-columns:1fr;
	}
	section.featured ul li a{
		/* display:block; */
	}
	section.featured ul li figure{
		border-bottom:4px solid var(--blau-hell-2);
		border-right:0;
	}
	section.featured ul li h2 {
		padding: 1rem 3rem 1rem 1rem;
	}
	
	section.artikel{
		margin-top:var(--content-padding);
	}
	section.artikel article ul.meta{
		display:block;
	}
	section.artikel article ul.meta li.teilen{
		flex-wrap:wrap;
		margin:1rem 0 0 0 ;
		display:flex;
		justify-content:center;
		flex:1;
	}
	section.artikel article ul.meta li.autor{
		justify-content:center;
	}
	section.artikel article ul.meta li.datum{
		text-align:center;
		margin-bottom:2rem;
	}
	section.artikel article ul.meta li.datum::before{
		content:none;
	}
	section.artikel article h1{
		font-size:3rem;
		text-align:center;
	}
	section.artikel article p:first-of-type{
		font-size:2.2rem;
		margin-bottom:3rem;
	}
	section.artikel article p{
		hyphens:auto;
	}
	
	section.artikel article > table{
		width:100% !important;
	}
	section.artikel article > table tr td{
		width:auto !important;
	}
	
	section.artikel.download article div.info ul{
		grid-template-columns:1fr;
	}
	section.artikel div.autor{
		margin:0;
		padding:2rem;
	}
	section.artikel div.autor p{
		font-size:1.8rem !important;
	}
	
	section.artikel article div.gallery{
		grid-template-columns:1fr;
	}
	
	section.artikel article ul.themen{
		display:block;
	}
	section.artikel article ul.themen li,
	section.artikel article ul.themen li a{
		display: block;
		text-align:center;
		margin-right:0;
	}
	
	section.artikel article div.kommentare{
		padding:0;
	}
	section.artikel article div.kommentare a {
		display:block;
		background-position:top 1.5rem center;
		background-size:3rem;
		padding:5rem 1rem 1rem 1rem;
	}
	
	
	section.autor{
		grid-template-columns:1fr;
	}
	section.autor > figure{
		margin:0 10% 3rem 10%;
	}
	section.autor div.content p,
	section.autor div.content h2,
	section.autor div.content h1{
		text-align:center;
	}
	section.autor div.content p{
		font-size:1.8rem;
	}
	section.autor div.content ul.links{
		display:flex;
		margin-bottom:2rem;
		justify-content:center;
	}
	section.artikel-übersicht.autor > h2 span{
		display:block;
	}
	section.artikel-übersicht > ul.filter li a{
		font-size:1.5rem;
	}
	section.artikel-übersicht > ul.filter li a::before{
		right:1.2rem;
		width:0.7rem;
		height:0.7rem;
		border-width:1px;
	}
	main .post-pager{
		width:3rem;
		height:7rem;
	}
	section.artikel-übersicht div.pager ul.page-numbers{
		grid-gap:0.5rem;
	}
	div.pager ul.page-numbers li{
		margin:0;
	}
	section.news-ticker ul li ul li h3{
		flex:0 0 10rem;
	}
	
	footer section.community > p {
		padding:0;
	}
	footer .grid.grid-2{
		grid-template-columns:1fr;
	}
	footer section.themen ul{
		grid-template-columns:1fr;
	}
	footer section.themen ul li a{
		text-align:center;
		padding:1rem;
	}
	footer section.themen ul li a::before{
		left:auto;
		right:2rem;
	}
	#mobile-menu-content > div > ul > li.social-media ul li{
		margin:0 0.25rem;
	}
	
	#mobile-menu-content > div > ul > li.artikel-suche input{
		padding:1rem;
	}
	#mobile-menu-content > div > ul > li.artikel-suche button {
		padding: 2rem 2rem;
	}
	#mobile-menu-content > div > ul > li > a{
		font-size:2.4rem;
	}
}