/*:root { font-size: calc((1vw + 1vh + .5vmin)*.67);}*/ /*http://allthingssmitty.com/2016/12/05/flexible-type-using-root/*/
/*html, body {height: 100%;}*/
html {font-size:102%;background:#fff;/*scroll-behavior: smooth;*/	overflow-x: hidden;}
body{-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;}
h1,h2,h3,h4,a,.nbr,#eintragen, code{-webkit-hyphens:manual;-ms-hyphens:manual;hyphens:manual}
h1 {font-size: 2em;}
h2 {font-size: 1.5em;}
h3 {font-size: 1.4em;}
h4 {font-size: 1.2em;}
a:hover,a:focus,a:active{text-decoration:underline;color:#222;}
a{
	text-decoration-skip-ink: auto;
	text-underline-offset: 1px;
}
a:visited{text-decoration:none !important;}
em{font-weight:400!important;font-style:italic}
fieldset{padding:1em;}
/*label{font-size:.9em;}*/
li h4{padding-left:0}
.nojavascript{margin:0;color:red;font-weight:700;background-color:#eee}
.webdeveloper-replace-images-with-alt-attributes{border:1px solid green;color:green;font-weight:700}
.current{cursor:text}
.gotocontent,
.currentak{}
.warning{color:#e80000;background:#fff;border:1px solid #e80000;padding:5px 10px !important;margin-top:1em !important;display:block;}
.hyphenate{text-align:justify}
.artikel .exlist,.item_link{letter-spacing:0;line-height:1.7em!important;margin-bottom:3em!important}
.artikel .exlist img,.item_link img{float:left;margin:.4em 1em 0 .25em}

/*.hinweis a:link.ex, .hinweis a:focus.ex, .hinweis a:hover.ex, .hinweis a:visited.ex {background-position-y: 5px !important;}*/
:focus {outline:1px solid;}
h1:focus,h2:focus,h3:focus,h4:focus,h5:focus, 
.inhalt{outline:none !important;}
/*:focus{outline:none;}*/
::-moz-focus-inner{border:0;}

:focus:not(:focus-visible) { outline: none}

li.item_link{clear:left;overflow:hidden;} /*overflow streckt Höhe wenn hohe img drin */
.inhalt li li{margin:5px 0 0 1.5em !important}


.teasertitle{text-decoration:none;}
.it_date{margin:.3em 0;font-size:.9em;display:block;}
.toolthumb{float:left;margin:0 1em 1em 0;/*border:1px solid #555;*/max-width:90%;height:auto;}
.artikel li,.blog li{list-style-type:none}
.abstand{clear:left;display:block;visibility:hidden;margin:2em}
/*.breadcrumb{margin-top:.8em !important}*/

.licence {font-size:.8em;opacity:.8;}

.beispiel .breadcrumb {margin:1em 0 !important;font-size:.75rem;}

.breadcrumb img {margin-right:7px;}

/*#logo_index {width:134px;height:134px;}*/
#art_links {margin:1em 0;border: 0;border-left: 5px solid #ccc; /*background: none;*/padding: 2px 0 2px 10px;/*font-size: .9rem;*/}
#art_links .breadcrumb {text-indent: -30px;padding-left: 30px;}

.breadcrumb:first-of-type {display:none}
#art_links .breadcrumb, #searchterm.breadcrumb, .beispiel .breadcrumb {display: block;font-size:.9em;}


blockquote, p blockquote, blockquote p, blockquote pre, blockquote li {
	font-family:monospace;
	line-height:1.3rem;
	font-weight:400;
}
blockquote {
	font-size:.9em;
	color:#343;
	margin: 1rem 0;
}
blockquote > p {
/*	font-size:1em;*/
	margin: 0;
}

/* Safari 11+  https://stackoverflow.com/questions/16348489/is-there-a-css-hack-for-safari-only-not-chrome   */
/*@media not all and (min-resolution:.001dpcm) {
@supports (-webkit-appearance:none) and (stroke-color:transparent) {
	blockquote {font-size:1.05rem}
	blockquote > p {font-size:.853rem;}
}}
*/

sup {line-height:7px;}
blockquote pre {overflow-x:scroll;overflow-y:hidden;}
.rahmen .rahmen p{font-size:1em;margin:0}
.rahmen.artikel h3,.rahmen.artikel h4, .rahmen.blog h4{padding:0;margin:0;display:inline !important;}
.nobreak{white-space:nowrap}

code{font-family:Courier,serif;font-size:.9em;display:block;margin:1em 0;border:1px solid #ccc;border-left:5px solid #ccc;-moz-tab-size:3;tab-size:3;padding:6px 0 0 6px;line-height:24px;white-space:pre;overflow-x:scroll;background-position-y: 78px !important;}
code:focus {outline:none !important;}


code{background:linear-gradient(to bottom,
#fff,
#fff 50%,
#eee 50%,
#eee);background-size:100% 48px;}
code:focus, code:hover{background:linear-gradient(to bottom,
#fff,
#fff 50%,
#edd 50%,
#edd);background-size:100% 48px;overflow-x:scroll;}

.post .storycontent code br, #standard{display:none;}
.codebeispiel{margin:1em 0 1em 1em!important;padding:.5em;overflow:auto;font-family:serif;font-size:.9em;margin:1em 0;border:1px dashed}
.verzeichnis ul ul{margin:.3em 0 0 1em}
.intlist a:visited::after{content:""}
.verzeichnis a{text-decoration:none;border-bottom:0!important;font-weight:700;letter-spacing:0}
h2 a:link,h2 a:visited,h2 a:focus,h2 a:hover,h2 a:active{}

/* Klappen */
.klappname {display:inline-block;}
.kategorien {display:inline-block;margin:0;padding:0;}
.trenner {margin:0;}
.toklapp {display:none;clear:left;border:0 !important;margin:0 !important;}
[id^="klapp"] {text-decoration:none;min-width: 7em;display:inline-block;/*font-size:13px;*/} /*damits beim Hovern nicht flackert*/
[id^="klapp"] span:nth-of-type(2) {position: absolute ;clip: rect(1px, 1px, 1px, 1px);padding:1em 0;font-size:1rem;} /*beim Laden Klapphinweis verstecken*/
[id^="klapp"]:hover span:nth-of-type(2),[id^="klapp"]:focus span:nth-of-type(2) {position: static ;clip: unset;}



ul#faqlist {list-style-type: none;font-weight: 700;margin-top:3em;}
ul#faqlist ul, ul#faqlist ol, ul#faqlist p {font-weight:400;}
ul#faqlist li {margin: .7em 0;}
ul#faqlist li li {margin: .2em 1em;}


.nosee, .linkopener{display:none}

code::-webkit-scrollbar {
	-webkit-appearance: none;
	width: 6px;
	height:6px;
}
code::-webkit-scrollbar-thumb {
	border-radius: 4px;
	background-color: rgba(0, 0, 0, .3);
}

 .transparent_bg{
	 background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%);
	 background-size: 10px 10px;
	 background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
	 padding:10px;
	 border:0;
}


/* http://webaim.org/techniques/css/invisiblecontent/ weil sonst sticky kaputt ist */
.titel,dfn,.hide,.accesskey,.gotocontent,#search label,#search1 label,#access,.wei,label.dot,.partner .dot, .rss, #menu h2{
	border: 0; 
	clip: rect(0 0 0 0); 
	clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
	-webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
	height: 1px; 
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	white-space: nowrap;
} 
/* Definition Skiplink */
.skiplink,
.skiplink:hover,
.skiplink:visited {
	position: absolute;
	overflow: hidden;
	top: -1000px;
	left: -1000px;
	display:block;
	padding:5px;
	background:#fff;
}

.skiplink:focus,
.skiplink:active {
	position: absolute;
	top: 0;
	left: 0;
}
/* Ende Skiplink */
#Kommentar {margin-top:3em;position:relative;}
#tsCopy{text-align:right;margin:3em 5em 0 0;margin-bottom:1em;font-size:.6em;color:#aaa;border-bottom:none;text-decoration:none}
#ScriptInfo{font-weight:700;background:#fff;padding:.5em;color:#17a}
#ScriptInfo.ScriptError{color:red}
#auth0r{width:60%;display:block}
#subject{width:60%;display:block}
#text{width:90%;display:block}

#Steuercodes a:link,#Steuercodes a:visited{text-decoration:none!important;border-bottom:0!important;font-weight:700;font-size:1.5em}
#Steuercodes a:hover{cursor:help}
#Steuercodes span {visibility:hidden;position:absolute;left:-99em;margin-top:4em;width:34em;padding:.5em;text-align:left;text-decoration:none;font-size:.6em!important;background:transparent}
#Steuercodes a:hover span{font-size:.85em;visibility:visible;left:4em;font-weight:400}
#Steuercodes a:hover em,#Steuercodes a:hover strong{font-weight:700}
#Steuercodes a:hover em.link{font-weight:400;text-decoration:underline}
#Steuercodes em.buttonvalue{font-weight:400}
/*#Steuercodes a{background-image:url(/0.gif)!important}*/

#footer p {font-size:.9em;margin:2px 0 0 0;}
#styles a.noa:focus,#styles a.noa:hover,#styles a.noa:active{background:0;border:1px solid transparent}
#headimg a:hover,#headimg a:focus{border-bottom:0}
.noverweis.button{font-size:1.1em !important;background:#767676;border:0;border-radius:5px !important;line-height:1.4em;display:inline-block;font-weight:400!important;margin:.5em .5em 0 -.3em;padding:6px 15px; white-space:nowrap;font-size:1.4em;text-decoration:none!important}
a.noverweis{border-bottom:0 none!important;/*border-radius:.5em !important;*/}
.noverweis img{border:0!important}
a:hover.noverweis,a:focus.noverweis,a:active.noverweis{background:transparent !important;}
a.button:link,a.button:visited{color:#fff;outline:none;margin-left:0}
a.button:hover,a.button:focus,a.button:active{color:#000!important;background:#ddd!important;}
#output .verweis{background:none !important;padding-left:0}
#suchtipps em, .nohighlight em {color: #343;background-color: transparent;border: 0;}
.partner {margin-top:2em;}
a.tweetthis{background-image:url(/images/twitter-icon.png)!important;background-repeat:no-repeat!important;padding-left:20px}
.klein{font-size:.85em;letter-spacing:0}
#preview img,#editable img{float:left;margin:0 1em 1em 0;max-width:98%}
#preview ol,#preview ul,#preview h1,#preview h2,#preview h3,#preview h4,#editable ol,#editable ul,#editable h1,#editable h2,#editable h3,#editable h4{clear:left}
img#editimg{float:right;padding-right:.5em}
a.noverweis.button:hover .loading, a.noverweis.button:focus .loading{filter: invert(1);}
picture img,
.storycontent ol img,.storycontent p img{max-width:100%!important}
.storycontent p img.smilie{margin:0!important;float:none!important}
.int::before{background:transparent!important;box-shadow:0 0 0 transparent!important}
/*.beispiel img {margin: .5em 1em .5em 0;}*/
.beispiel ul {overflow: auto} /*Liste neben float einrücken*/
.beispiel p a {white-space:nowrap;}
#moblog::after,#wrap::after,.wrap::after,.beispiel::after,.storycontent::after,.rahmen::after{content:" ";display:block;height:0;clear:left;visibility:hidden}
#output li{margin:1em;clear:left}
#output li img{float:left;max-width:120px;margin:0 1em 1em 0}
.weiter,#searchfooter,#output h3{display:block;clear:left}
p.braille {font-family:'braille';font-size: 3em; margin: .5em .33em 0;line-height:1.1em;}
h2.bem{line-height:1em;font-size:.8em;padding:0}
dt img{max-width:100%!important; margin:0 !important;}
dt picture img {clip-path: inset(0 1px 0 0);}
.storycontent img {height:auto !important;}
.top-right,.top-left,.app-logo,.app-logo-background,.compass{display:none}
audio{margin:1em 0 0;/*min-width:20em;*/max-width:100%;border:3px solid transparent;outline:none;border-radius:4em;-webkit-logical-width: 380px;}
audio:focus, audio:hover, audio:focus-within{border:3px solid #aaa;background-color:#aaa;border-radius:4em;outline:none !important;}

@media screen and (-webkit-min-device-pixel-ratio:0) { /* nur Blink, also Chrome - und natürlich Opera */
	audio:hover, audio:focus, audio:focus-within{border:3px solid #aaa;border-radius:4em;}
}

_::-webkit-full-page-media, _:future, :root audio { /*Safari*/
	border-radius:10px !important;
}
@-moz-document url-prefix() { /*Firefox only*/
	#innerplayer {
		filter:invert(1);
	}
}


.playercontrols{background:none repeat scroll 0 0 #666;border:0 none;padding:.5em;text-align:center;width:17.5em;margin:0 1em}
.playercontrols button{width:10em;font-size:.75em}
.storycontent p img.printfriendly{margin:0 .5em 0 0!important}
/*.storycontent ul ol li{font-size:1.2em}*/
#socialshareprivacy{outline:none}
#socialshareprivacy a{border-bottom:none}
#socialshareprivacy .intlist,#socialshareprivacy .exlist{list-style-image:none!important}
#socialshareprivacy a:focus,#socialshareprivacy a:hover,#socialshareprivacy a:active{background-color:transparent!important;border-bottom:none!important}


#hamburger{display:none;}


.pagination{margin:1em 0 1em 0;font-size:.85em;}
.pagination svg {margin:0 0 3px 0;width:25px;fill:currentColor;}
.pagination a:focus svg,.pagination a:hover svg{transform:scale(1.2);fill:currentColor;}

dl.bildunterschrift {text-align:center;float:left;padding-left:18px;border:0; font-size:.6em;color:#555} /*float wg mögl. vor-zurück*/
dl.bildunterschrift dd {margin:0;}
dl.bildunterschrift img {float:none;}


dl.img_desc_240 dd::before,dl.img_desc_320 dd::before,dl.img_desc_360 dd::before,dl.img_desc_400 dd::before,dl.img_desc_480 dd::before,dl.img_desc_500 dd::before{content:"Bildbeschreibung: \A";white-space:pre;position:absolute;left:-1000px;top:auto;}
dl.img_desc_240 dd::after,dl.img_desc_320 dd::after,dl.img_desc_360 dd::after,dl.img_desc_400 dd::after,dl.img_desc_480 dd::after,dl.img_desc_500 dd::after{content:" Ende der Bildbeschreibung";position:absolute;left:-1000px;top:auto}

.img_desc_320 {float:left;}


dt video {border:1px solid #888;/*margin-bottom:-4px;*/max-width:99%;height:auto;}

video {transition: transform .7s ease;}
video:focus, video:hover{/*box-shadow:2px 2px 10px #000000;*/transform:scale(1.05);}

#searchterm {
	position: sticky;
	top: 10px;
	z-index:5;
/*	display: inline-block;*/
}

#searchterm a {
	color:#555;
	background: #ff6 !important;
	padding: 5px;
	border: 2px solid #888 !important;
	border-radius:5px;
	display:table;
}
input[type="search"] {
	-webkit-appearance: textfield;
}

.post .storycontent dt br{display:none}

code {
/*	-webkit-user-select: all;*/  /* Chrome 53+ https://www.chromestatus.com/feature/5062926088011776 */
/*	-moz-user-select: all;*/    /* Firefox 43+ √ */
/*	-ms-user-select: all;*/
/*	user-select: all;*/ /*  Canary 54 √ */
}
code:hover {cursor:text;}

input[type=checkbox]:focus {outline: 2px solid #3497ff !important;}
abbr, label abbr{cursor:help;border-bottom:2px dotted;padding-bottom:1px;text-decoration:none !important;}


.bt_icon {float:left;margin:0 1.5em 1em 0;}
.paypal input{padding:0;margin:1em 1.5em;}
.floated_list {overflow:auto;}

#show_all {
	font-size: .9em;
	position: -webkit-sticky;
    position: sticky;
    top: 1em;
    float: right;
	padding: 5px 10px;
	border: 1px solid #888;
	border-radius: 5px;
	background:#fff;
	z-index:5;
}
#show_all:focus, #show_all:hover {
/*	text-decoration:underline;*/
	cursor:pointer;
	background: #eee;
}
.show_all_hinweis {text-align:right;margin-top:3em; font-size:.7em;}



@media only screen and (min-device-width:768px) and (max-device-width:1024px){
a.gotocontent,a.accesskey,#access{display:none!important}
}
#scrollUp.int::before{display:none}
#comment_write{margin-top:4em}
#comment_head, #copy_hinweis{clear:left;}
/*video, #buttons{margin-left:1em}*/
.yt{left:1em;}
input,textarea{font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;font-size:1em;padding:.5em;margin:.2em 0}
textarea{max-width:90%; -ms-overflow-style: -ms-autohiding-scrollbar;}

input:hover::placeholder, input:focus::placeholder {opacity: .5;}
input:hover:-ms-input-placeholder, input:focus:-ms-input-placeholder {opacity:.5}
input:hover::-ms-input-placeholder, input:focus::-ms-input-placeholder {opacity:.5}

textarea:hover::placeholder, textarea:focus::placeholder {opacity: .5;}
textarea:hover:-ms-input-placeholder, textarea:focus:-ms-input-placeholder {opacity:.5}
textarea:hover::-ms-input-placeholder, textarea:focus::-ms-input-placeholder {opacity:.5}

#eu-cookie-irrsinn{background-color:#f1f1f1;opacity:.9;position:fixed;bottom:0;left:0;z-index:100;border-top:1px solid #aaa;}
/*#eu-cookie-irrsinn:focus-within {display:block !important;max-height:none !important;height:4em !important;}*/
#eu-cookie-irrsinn h2 {margin-top:-1.3em;}
#eu-cookie-irrsinn p{font-size:.75em;}
#eu-cookie-irrsinn span {margin:.7em;}
#eu-cookie-irrsinn button {padding:4px 7px;}
#eu-cookie-irrsinn button:focus {outline:2px auto !important;}
#ja, #nein{font-size:1em;margin:0;cursor:pointer}
/*.over{position:relative;display:inline-block;margin-bottom:-3px;}*/

#inhalt img {max-width:100%;height:auto;}
#inhalt .my-gallery a:hover img, #inhalt .my-gallery a:focus img {transform:scale(1.2)}
#inhalt a:hover img.after, #inhalt a:focus img.after {transform:none; }
a img {transition: all .7s ease}


a.demo {
	padding: 5px 10px;
	background: #4b744b;
	border:1px solid #4b744b;
	border-radius: 5px;
	margin-top: 5px;
	display: inline-block;
	color: #fff !important;
	border-bottom:0 none;
	text-decoration:none;
}
a.demo:visited {color:#fff !important;}
a.demo:hover, a.demo:focus {
	transform:scale(1.1);
	background: #b1bda1;
}

/*Videos im dl*/
video:focus, video:hover {transform: none;}
/*[class^="img_desc"] dt {overflow:unset !important;}*/


[id^="klapp"] span:nth-of-type(1) {font-size: 1rem;margin-left:5px;cursor:pointer;}
/*Klapptext verbergen bei dl*/
/*dl[class^="img_desc"] [id^="klapp"] span:nth-of-type(1) {font-size:1rem;line-height:1.3rem;}*/
/*dl[class^="img_desc"] [id^="klapp"] span:nth-of-type(2) {visibility: hidden;}*/

button.snippet {
	background:#eee;
	font-size: inherit;
	border: 1px solid #888;
	border-radius: 1em;
	padding: 3px 10px;
	margin-top:.5em;
	margin-bottom:1em;
	cursor:pointer;
	display:none;  /* nur mit JavaScript zeigen */
}
button.snippet:hover, button.snippet:focus {
	color:#fff;background: #888;
}

figure {
	margin: 0;
	border: 1px solid #888;
}

figure img {
	display: block;
}

figcaption {
	padding: .7em;
	background: #eee;
	font-size:.8em;
	border-top: 1px solid #888;
}


@media screen and (min-width:0\0) and (min-resolution:+72dpi){ /* IE >= 9 http://stackoverflow.com/questions/20541306/how-to-write-a-css-hack-for-ie-11 */
	.storycontent .over img.after{right:18px;}
	blockquote, p blockquote, blockquote p, blockquote pre, blockquote li {font-size:1rem !important;}
}

.my-gallery img {cursor: zoom-in;}


/*http://maddesigns.de/responsive-iframes-2417.html*/
/*in ferner Zukunft: aspect-ratio: 16 / 9; https://css-tricks.com/newsletter/233-css-as-a-content-api-no-but-also-sort-of-yes/*/

.embed-container {
  position: relative; 
  padding-bottom: 56.25%; /* ratio 16x9 */
  height: 0; 
  overflow: hidden; 
  width: 100%;
  height: auto;
  margin:1em 0;
}
.embed-container iframe {
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
}
/* ratio 4x3 */
.embed-container.ratio4x3 {
  padding-bottom: 75%;
}

.it_date span {
/*	animation: blink 2.5s infinite;*/
	background:#fff;
}
/*@keyframes blink {
	0%   {color: #e80000;}
	70%  {color: #e80000;}
	100% {color: #454;}
}
*/
@keyframes blink {
	0%   {opacity: 1;}
	50%  {opacity: .3;}
	100% {opacity: 1;}
}

.pfeil li a span {
	display: none;
}

/* Darstellung 1280px und zoom >= 300% linearisiert */
@media only screen and (max-width:480px){
	#inhalt {margin:0 !important;padding:0 !important;}
	#menuwrapper {position:static !important;float:none !important;margin-top:0 !important;}
	#scrollUp {display:none !important;}
}

/*für leichte Sprache*/
.ls {border:0 !important;float:right;margin:-70px -8px 0 0;background:unset;cursor:pointer;outline:none !important;}
.ls img {height:12vw !important;max-height:70px;transition: all .7s ease;}	
.ls img:hover, .ls:focus img {transform:scale(1.1);}
.l_sprache :is(h1, h2, h3, h4) {font-variant:unset;font-weight:bold !important;}
.l_sprache p, l_sprache ul, l_sprache ol {font-size:1.2em;}
.l_sprache .bubble {font-size:1.2em !important;line-height: 1.4em;}
.l_sprache blockquote {font-size:1em;line-height:1.5em;}
.l_sprache::before {
	content: "Dieser Text ist in Leichter Sprache. \A Er hilft Menschen. \A Die Menschen wollen Informationen besser verstehen. \A Diesen Text hat ein Computer-Programm in Leichte Sprache übersetzt. \A Das Programm heißt ChatGPT.";
	display: inline-block;
	white-space: pre-line; /* oder "pre" */
	background: #f9ffef;
	padding: 1em;
	border: 1px solid ;
	margin: 1em 0;
	font-weight: bold;
	line-height:1.6em;
}


@media only screen and (max-width:1024px){
	.inhalt h1 {max-width: 80%;}	
}