/**
 * @title BIBI
 * @description alle Styles für BIBI
 * @copyright Copyright (c) 2023 Christian Weiss
 * @link http://das.verstehst.net
 */



:root {
	--farbe1: #00c8a0; /* türkis */
	--farbe2: #00c8a090;
	--farbe3: #8241e690;
	--farbe4: #8241e6; /* lila */
	--hoverfarbe: #00c8a030;
	--grau: #646464;
	--hellgrau: #b4b4b4;
	--fastweiss: #efefef;
	--weiss: #f9f9f9;
}



@font-face {
	font-family: Frutiger;
	src:url(/lib/fonts/FrutigerNextLT-Regular.woff2) format("woff2"), url(/lib/fonts/FrutigerNextLT-Regular.woff) format("woff");
	font-display:fallback;
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family:Frutiger;
	src:url(/lib/fonts/FrutigerNextLT-Bold.woff2) format("woff2"),url(/lib/fonts/FrutigerNextLT-Bold.woff) format("woff");
	font-display:fallback;
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family:Frutiger;
	src:url(/lib/fonts/FrutigerNextLT-RegularItalic.woff2) format("woff2"),url(/lib/fonts/FrutigerNextLT-RegularItalic.woff) format("woff");
	font-display:fallback;
	font-weight: normal;
	font-style: italic;
}
@font-face {
	font-family:Frutiger;
	src:url(/lib/fonts/FrutigerNextLT-BoldItalic.woff2) format("woff2"),url(/lib/fonts/FrutigerNextLT-BoldItalic.woff) format("woff");
	font-display:fallback;
	font-weight: bold;
	font-style: italic;
}
@font-face {
	font-family:Henriette;
	src:url(/lib/fonts/HenrietteCondensed-Bold.woff2) format("woff2"),url(/lib/fonts/HenrietteCondensed-Bold.woff) format("woff");
	font-display:fallback;
	font-weight: bold;
	font-style: normal;
}


html{
	text-rendering:optimizeLegibility;
	line-height:1.3;
	font-size: 13pt;
	font-family:Frutiger, -apple-system, "Segoe UI", "LTFrutiger Next Regular", "san francisco", "DejaVu Sans", Avenir, "Open sans", Roboto, arial, sans-serif;
}

html *{
	box-sizing:border-box;
}

*::selection, .hinterlegt, mark {
	background-color: var(--hoverfarbe);
}



body{
	background-color:var(--fastweiss);
	color:var(--farbe4);
	box-sizing: border-box; 
	max-width: 23cm;
	margin:0px auto;
	margin-top:0px;
	padding:0 0.5rem;
}


body#detailbild {
	background-color:#0f0f0f;
	color:#f0f0f0;
	padding:0;
	max-width:inherit;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center; /* Horizontal zentrieren */
	align-items: center; /* Vertikal zentrieren */
	height: calc(97dvh - 4em); /* Füllt die gesamte Bildschirmhöhe aus */
}

#detailbild img {
	width: 100%;
	height: auto;
	max-width:100%;
	max-height:90dvh;
	object-fit: contain;
	display:block;
}

#detailbild .titel {
	font-size:1.2rem;
	text-align:center;
	font-weight:bold
}

#detailbild .beschreibung {
	font-size:1rem;
	text-align:center
}

#detailbild .closer {
	position:absolute;
	left:1em;
	top:1em;
	cursor:pointer;
	text-shadow: 2px 2px 4px black;
}


.toplevel {
	z-index:500 ;
}


.container, .containerfix {
	display: flex;
	justify-content: space-between;
}


.container .textfeld, .containerfix .textfeld {
	width: 100%;
}


#footnotes li {
	font-size: 0.9rem;
	color: var(--grau);
}

.b_100 {
	width: calc(100% - 0.0ex);
}

.b_75 {
	width: calc(75% - 0.2ex);
}

.b_50 {
	width: calc(50% - 0.4ex);
}

.b_25 {
	width: calc(25% - 0.6ex);
}




h1{
	font-size:1.5rem;
	background-color:var(--farbe4);
	opacity: 0.95;
	color:#ffffff;
	margin:5px 0;
	margin-top: 0px;
	position: sticky;
	top: 0;
	padding:5px 10px 2px;
	no_border:1px solid rgb(200, 200, 200);
	box-shadow:2px 2px 4px rgba(100, 100, 100, 0.2);
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
}

h1.toplevel {
	background-color: var(--farbe1);
}


h2{
	font-size:1.1rem;
	background-color:var(--farbe4);
	padding:5px 10px 2px;
	margin:15px 0 5px;
	no_border:1px solid rgb(200, 200, 200);
	color:#ffffff;
	box-shadow:2px 2px 4px rgba(100, 100, 100, 0.2);
	border-radius:5px /*4*/;
}


h3, #wikipedia h2, #beschreibung h2, #wikipedia_titel{
	font-size:1rem;
	padding:5px 10px 2px;
	margin:15px 0 5px;
	color:#ffffff;
	border-radius:5px /*4*/;
	no_border:1px solid rgb(200, 200, 200);
	box-shadow:2px 2px 4px rgba(100, 100, 100, 0.2);
	background-color:var(--farbe4);
}

h4, #wikipedia h3, #beschreibung h3{
	font-size:1rem;
	padding:5px 10px 2px;
	margin:15px 0 5px;
	color:var(--farbe1);
	background: inherit;
	box-shadow: none;
	border-radius:5px /*4*/;
	border: 0;
	border-bottom:3px solid var(--farbe4);
	margin-inline-start: 0;
}

#wikipedia dd {
	no_margin-left: 0;
}

h1, h2, h3, h4 {
	font-weight: bold;
	font-family: Henriette;
	text-align:left;
	text-shadow: 1px 1px 3px rgba(100, 100, 100, 0.3);
	display: flow-root;
}


a[target="extern"]:after{
	font: normal normal normal 14px/1 FontAwesome;
	content: " \f08e";
	color: var(--hellgrau);
}

a:link{
	color:var(--farbe1) !important;
	text-decoration:none !important;
	font-size:inherit;
}

a:visited{
	color:var(--farbe2);
}

a:active{
	text-decoration:none;
}

a:hover{
	text-decoration:underline !important;
}

a .fa-duotone {
	color: var(--farbe4);
}

a[href*="http"]:after{
	font: var(--fa-font-solid);
	content: " \f35d";
	no_margin-left: 0.5ex;
	color: var(--hellgrau);
}

a[href*="https://www.openstreetmap.org/search"]:after{
	content: "";
}

#map a[href*="http"]:after{
	content: "";
}

.leaflet-popup-content {
	color: var(--farbe4);
}

.leaflet-container {
	font-family: inherit !important;

}

.leaflet-popup-content a {
	color: var(--farbe1) !important
}




/* a[target]::after{
	content:"↗";
	color:rgb(0, 0, 0);
	padding-left:0.2em;
	font-weight:normal;
	text-decoration:none;
}
 */

h1 a{
	color:white !important;
}

h2 a{
	color:var(--farbe2) !important;
	font-weight:normal;
	font-size:inherit;
}

/* //// Formate für Wikipedia-Artikel */


#wikipedia .infobox {
	display: none;
}

#wikipedia #Vorlage_Begriffsklärungshinweis {
	display: none;
}

#titel_wikipedia {
	margin-left: -10px;
	color:var(--farbe1);
	font-style: normal;
}

#box_wikipedia, #inhalt_wikipedia {
	transition:0.5s ease;
}

#inhalt_wikipedia {
	font-size: 90%;
	color: var(--grau) !important;
}

#inhalt_wikipedia table, .clip {
		display: block;
		max-width: 100%;
		overflow: auto;
	}


figure {
	background-color: var(--weiss);
	no_border: 1px solid var(--farbe3);
	box-shadow:2px 2px 4px rgba(100, 100, 100, 0.2);
	padding: 0px;
	text-align: center;
	width: fit-content;
	max-width: 50%;
	border-radius: 6px;
	margin: 0em 0 1em 1em;
	clear: right;
	float: right;
	position: relative;
}

figure img {
	border-radius: 3px;
	width: calc(100% - 10px);
	height: calc(100% - 10px);
	max-width: 100%;
	max-height: 100%;
	margin: 5px;
}

figcaption, .gallerytext {
	border-radius: 0 0 6px 6px;
	font-size: 0.8rem;
	color: #999999;
	no_max-width: 150px;
	max-width: 100%;
	padding: 5px;
	overflow: hidden;
	background-color:white;

}

.gallery {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.gallerybox {
	display: block;
	background-color: var(--weiss);
	border: 2px solid var(--farbe3);
	border-radius: 5px;
	box-shadow:2px 2px 4px rgba(100, 100, 100, 0.2);
	margin: 5px;
	margin-left: 0;
	text-align: center;
	vertical-align: middle;
	height: fit-content;
	width: fit-content;
	max-width: 300px;
	max-height: 400px;
	line-height: 1;
	overflow: hidden !important;
	transition:1s ease;
}

.gallerybox:hover {
	background-color: var(--hoverfarbe);
}

.no_gallerybox img {
	width: max-content;
	height: max-content;
	max-height: 120px;
}

li.gallerybox {
	padding: 0;
}

.anhangcopyright {
	position: absolute;
	top: 5px;
	right: 5px;
	background-color: #dfdfdfa0;
	color: #000000a0;
	font-size: 0.75rem;
	padding: 1px 5px;
	overflow: hidden;
	text-align: right;
	border-radius: 3px;
}


.thumbnail {
	width: 100%;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	display: block;
	margin: auto;
}

.thumb * {
	vertical-align: middle;
	display:inline-block;
}

.thumb::before {
	content: "";
	vertical-align: middle;
	display:inline-block;
	height: 100%;
}

.max_120 {
	max-width: 120px !important;
	max-height: 120px !important;
}

#umgebung {
	background-color: var(--farbe4);
	color: white;
	display: flow-root;
}

#umgebung a:link, #umgebung a:visited {
	no_color: white !important;
}


#map{
	height: 400px;
}

.leaflet-popup {
	opacity: 0.8 !important;
}

.divIcon {
	color: var(--farbe3);
	font-size: 30px;
	text-shadow: 2px 2px 3px rgba(100, 100, 100, 0.6);
	padding: 0;
	cursor: default;
	--fa-secondary-color:var(--farbe2);
	--fa-secondary-opacity:0.8;
	--fa-animation-duration:2s
}


.quelle {
	font-size: 90%;
}

#spinner {
	margin: 40px auto;
	text-align: center;
}

#spinner i {
	padding: 0.5ex;
	background: white;
	border-radius: 50%;
}


img.klickbar, .klickbar{
	cursor:pointer;
}

/* img:hover{
	background-color:transparent !important;
}
 */

div.editable, .medium, [contenteditable]{
	border:none;
}

div.editable:focus, .medium:focus, [contenteditable]:focus{
	no_border-bottom: 2px solid var(--farbe2);
	outline: -webkit-focus-ring-color auto 0px;
	background-color: white;
}


#kopf, #fuss {
	clear: both;
	background-color: var(--farbe1);
	position: sticky;
	bottom: 0;
	padding:5px 0;
	width: 100vw;
	margin-bottom: 0;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	font-family: Henriette;
}
#kopf > div, #fuss > div {
	max-width: 23cm;
	padding: 0 0.5rem;
	margin: 0 auto;
}

#fuss a {
	color: white !important;
}



p{
	margin:0;
	margin-bottom:3px;
	text-align:justify;
	hyphens: auto;
}

p[align="left"]{
	text-align:left;
}

p[align="center"]{
	text-align:center;
}

p[align="right"]{
	text-align:right;
}

ul, ol{
	margin:0 1ex;
	padding:0 1ex;
}

li::marker {
	color: var(--farbe2);
	font: normal normal normal 14px/1 FontAwesome;
	content: "\f04d";
	font-size: 80%;
}


li, p.liste{
	text-align:left;
	margin-top:2px;
	padding-left:1ex;
}


.inhalt .normal li{
	margin-left:5px;
}


blockquote{
	background-color:var(--farbe1);
	no_border:0px solid rgb(231, 228, 216);
	border-radius:5px /*4*/;
	padding:10px;
	margin:5px 0;
	margin-top: 10px;
	text-align: center;
	font-family: Henriette;
	no_font-size: 0.9rem;
	line-height: 1.2rem;
	no_text-shadow: 2px 2px 3px rgba(100, 100, 100, 0.4);
	box-shadow: inset 1px 1px 4px rgba(100, 100, 100, 0.5);
	color: #ffffff;
	display: flow-root;
}

blockquote::first-letter {
	font-size: 2rem;
	no_color: var(--farbe2);
}


/*
dt{
	font-weight: bold;
}


dd{
	color: var(--grau);
	margin-left: 1em;
}

dl {
	margin: 5px;

}
*/



ins{
	color:rgb(81, 162, 81);
}

del{
	color:rgb(171, 0, 32);
}

pre, .umbruch{
	font-family:inherit;
	overflow:visible;
	margin:0;
	white-space: pre-wrap;
	display: flow-root;
}

code{
	font-family:inherit;
}


strong, em, span{
	font-size:inherit;
}


/* Formular-elemente */

form{
	margin-bottom:15px;
}

fieldset {
	background-color:#f9f9f9 !important;
	overflow:hidden;
}

fieldset.box {
	border: 0;
}


input, select, textarea, button, div.textfeld{
	vertical-align:middle;
	font-size:1rem;
	font-family:inherit;
}

input::placeholder, textarea::placeholder{
	color: #aaaaaa;
	text-shadow: none !important;
}

label{
	color:#505050;
	display:inline;
	vertical-align:middle;
}

no_label:hover{
	text-decoration:underline;
}

select{
	padding:0px !important;
	margin:0;
	height:34px;
}


input{
	font-family: inherit;
}

input[type="checkbox"], input[type="radio"] {
	margin-left: 0;
}

input[type="submit"], button, input[type=file]::file-selector-button {
	padding:0 1em;
	background-color:white;
	border:2px solid var(--farbe2);
	font-family: inherit;
	line-height: 170%;
	margin-top: 1ex;
	width:fit-content;
	white-space:nowrap;
	overflow:hidden;
	border-radius:5px;
	box-shadow:2px 2px 4px rgba(100, 100, 100, 0.2);
}

input[type="submit"]:hover, button:hover, input[type=file]::file-selector-button:hover {
	background-color: var(--farbe3);
	color: #ffffff !important;
	transition: 0.5s;
}

input[type=file]::file-selector-button {
	display:none;
}


option{
	background-color:white;
	padding:0px 5px;
	margin-bottom:5px;
	border-radius:5px /*4*/;
	border:0 !important;
	margin:0 !important;
}

.rechts option{
	text-align:right;
}

.knopf{
	background-color:rgb(239, 237, 228);
	border-radius:5px /*4*/;
	box-shadow:1px 1px 3px rgba(100, 100, 100, 0.3);
}

.textfeld, [contenteditable] {
	border: 0;
	border-bottom: 2px solid var(--farbe3);
	background: inherit;
	color: #000000;
	border-radius: 5px;
	line-height: 150%;
	transition:background 0.5s ease;
}

.textfeld:hover, .textfeld:active, .textfeld:focus{
	background-color: #ffffff;
	box-shadow:2px 2px 4px rgba(100, 100, 100, 0.3);
}

.textfeld:focus-visible {outline: 0}


/* .textfeld, .textfeld.nurlesen:hover, .textfeld.nurlesen:focus{
	background-color:#fafafa;
	padding:0px 5px;
	margin-bottom:5px;
	border:1px solid rgb(231, 228, 216);
	box-shadow:1px 1px 3px rgba(100, 100, 100, 0.2);
	border-radius:5px;
}

.textfeld:hover{
	background-color:rgb(239, 237, 228);
}

.textfeld:focus, .voll{
	background-color:rgb(231, 228, 216) !important;
	color:#000000;
	border-color:var(--grau) !important;
} */




a.textfeld{
	padding:1px 5px;
	background-color:inherit;
}

textarea[title="Markdown" i]{
	border-left:solid 5px var(--farbe1) !important;
}

.nurlesen{
	background-color:#fafafa !important;
	cursor:default;
}

.keinfeld{
	border:none;
	min-height:0px;
	height:16pt !important;
	text-shadow:none !important;
	font-size:inherit !important;
}

.keinfeld2{
	border:none;
	min-height:0px;
	text-shadow:none !important;
	font-size:inherit !important;
}




.listeneintragung, pre{
	background-color:#fafafa;
	padding:0 5px;
	margin-bottom:5px;
	border:1px solid rgb(231, 228, 216);
	text-shadow:#666666 0px 0px 1px;
	box-shadow:1px 1px 3px rgba(100, 100, 100, 0.2);
	border-radius:5px /*4*/;
}


.einzug{margin-left:1.28571429em}
.einzug1{margin-left:0em;font-size:130%}
.einzug2{margin-left:1em;font-size:120%}
.einzug3{margin-left:2em;font-size:115%}
.einzug4{margin-left:3em;font-size:110%}
.einzug5{margin-left:4em;font-size:105%}
.einzug6{margin-left:5em;font-size:100%}



.marker {
	transition:0.5s ease;
}

.marker:hover {
	transform:scale(1.5);
}


.marker1{
	color:#ee304d;
	text-shadow:1px 1px 4px rgba(100, 100, 100, 0.4);
}

.marker2{
	color:#ff9800;
	text-shadow:1px 1px 4px rgba(100, 100, 100, 0.4);
}

.marker4{
	color:#ffe075;
	text-shadow:1px 1px 4px rgba(100, 100, 100, 0.4);
}

.marker8{
	color:#8bc34a;
	text-shadow:1px 1px 4px rgba(100, 100, 100, 0.4);
}

.marker16{
	color:#00bcd4;
	text-shadow:1px 1px 4px rgba(100, 100, 100, 0.4);
}

.marker32{
	color:#3073d4;
	text-shadow:1px 1px 4px rgba(100, 100, 100, 0.4);
}

.marker64{
	color:#8230b3;
	text-shadow:1px 1px 4px rgba(100, 100, 100, 0.4);
}

.marker128{
	color:#666666;
	text-shadow:1px 1px 4px rgba(100, 100, 100, 0.4);
}


.box, dl{
	background-color:rgb(255, 255, 255);
	padding:5px 10px;
	margin:5px 0;
	no_border:1px solid var(--farbe4);
	box-shadow:1px 1px 3px 1px rgba(100, 100, 100, 0.2);
	border-radius:5px /*4*/;
	display: flow-root;
}

.box .box{
	opacity:0.9;
}

dd {
	margin: 0;
}

.box>h3:first-of-type{
	border:0;
	border-bottom:1px solid rgb(200, 200, 200);
	border-bottom-left-radius:0;
	border-bottom-right-radius:0;
	background-color:var(--farbe4);
	margin:-5px -10px;
	margin-bottom:5px;
	box-shadow:none;
}

.box.keinkasten>h3{
	margin: 0px;
	margin-bottom: 5px;
}

.box.keinkasten>.box{
	margin: 5px 10px;
}

.box>h4:first-of-type{
	padding:5px 10px 2px;
	border:0;
	border-bottom:1px solid rgb(200, 200, 200);
	border-bottom-left-radius:0;
	border-bottom-right-radius:0;
	margin:-5px -10px;
	margin-bottom:5px;
	box-shadow:none;
}

.box h2{
	padding:5px 10px 2px;
	no_box-shadow: none;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border: 0;
	color:var(--farbe1) !important;
	margin:-5px -10px 10px;
	font-weight:bold;
}

.alt_box h2{
	border:0;
	box-shadow:none;
	background:none;
	color:black !important;
	padding:0;
	margin-top:7px;
	font-weight:bold;
}

.box h1{
	margin-top:7px;
	color:black;
}

.box p{
	margin-bottom:3px;
}

.box ul, .box ol{
	margin:0 15px !important;
}

.box hr{
	margin: 5px -10px 10px;
	border: 1px solid var(--farbe3);
}

gallerybox.box:empty{
	display:none;
}

.box.klappbar{
	no_padding:0 5px;
	padding-bottom: 0;
}

.box.klappbar:hover{
	border-color:var(--farbe2);
}

.box.klappbar h4:hover{
	background-color:rgb(231, 228, 216);
}

.box.klappbar h3, .box.klappbar h4{
	margin-bottom:0;
}

.box.aktuell{
	border:none;
	box-shadow:none;
	background-color:inherit;
	padding:0 0px;
}

.box.aktuell a{
	font-weight:bold;
}

.box.aktuell li{
	border:1px solid rgb(200, 200, 200) !important;
	box-shadow:2px 2px 4px rgba(100, 100, 100, 0.3);
	border-radius:5px /*4*/;
	margin-bottom:5px;
	padding:5px 0;
}



/* tabellen */

table{
	border-spacing:0;
	border-collapse:collapse;
	width:100%
}

tr, td{
	page-break-inside:avoid;
	vertical-align:top;
	padding:0;
}

.box td{
	padding:0 5px;
}

th{
	padding: 0 5px;
	text-align: left;
	background-color: var(--farbe3);
	color: var(--weiss);
}


table.tabelle td{
	vertical-align: middle;
}

table.tabelle tr{
	border-bottom: 2px solid var(--farbe2)00;
}




.navi{
	position:fixed;
	top:0px;
	right:0px;
	left:0px;
	padding:1px 3px;
	padding-left: calc((100% - 30cm)/2);
	padding-right: calc((100% - 30cm)/2);
	text-align:left;
	font-weight:normal;
	white-space:nowrap;
	box-shadow:-2px 1px 3px 1px rgba(0, 0, 0, 0.3);
	z-index:250;
	background-color:rgba(240, 240, 240, 1);
	opacity:0.95;
	height:27px;
	no_padding-right: calc((100% - 21cm));
	box-sizing:content-box;
}

.navi div{
	padding:0 5px;
	display:inline;
}

.navi a{
	font-size:16pt;
	vertical-align: middle;
}

.navi .fa{
	text-align:center;
	font-size:24px;
}

#warten{
	font-size:14px;
}

div.hover:hover, li.hover:hover, tr:hover{
	background-color:var(--hoverfarbe);
	no_border-bottom: 2px solid var(--farbe2);
	/* probeweise zu hintergrund geändert wegen Suchergebnis */
}

div.hover, li.hover, tr.hover{
	transition-property:background-color border-bottom;
	transition:0.5s ease;
}

i.hover {
	cursor: pointer ;
	no_color: black;
}

i.hover:hover {
	color: red;
}

div, i{
	transition-property:opacity, background-color;
	transition-delay:0.5s;
	transition-timing-function:ease;
}


.ampel_1 {
	color: #ee304d;
}

.ampel_2 {
	color: #ffc359;
}

.ampel_3 {
	color: #8bc34a;
}

.ampel_0 {
	color: var(--grau);
}


#hinweis, .hinweis, .warnung, .info, .wichtig, .normal{
	font-style:normal;
	font-weight:bold;
	padding:4px 5px;
	margin:3px 0;
	color:black;
	box-shadow:1px 1px 3px rgba(100, 100, 100, 0.2);
	border-radius:5px /*4*/;
	border: 1px solid;
}

.warnung {
	border-color: #ee304d30;
	background-color: #fde2e6;
}

.warnung::before {
	color: #ee304d;
	font: normal normal normal 1em FontAwesome;
	content: '\f071' " ";
}

.hinweis {
	border-color: #ffc35960;
	background-color: #fdf6e2;
}

.hinweis::before {
	color: #ffc359;
	font: normal normal normal 1em FontAwesome;
	content: '\f06a' " ";
}

.info {
	border-color: #8bc34a60;
	background-color: #f0f7e7;
}

.info::before {
	color: #8bc34a;
	font: normal normal normal 1em FontAwesome;
	content: '\f05a' " ";
}





.kategorie{
	padding:1px 4px;
	font-size:0.875rem !important;
	color:white !important;
	font-weight:normal;
	text-transform:uppercase;
	border-radius:5px /*4*/;
	box-shadow:1px 1px 3px 1px rgba(100, 100, 100, 0.3);
	float:right;
	margin-top:3px;
	margin-left:5px;
	margin-right:5px;
}

.hashtag, .hashtag_edit{
	padding:1px 4px 0px 4px;
	background-color:var(--farbe2);
	color:#ffffff !important;
	border-radius:4px /*4*/;
	margin-bottom: 5px;
	no_box-shadow:1px 1px 3px rgba(100, 100, 100, 0.3);
	border: 1px solid var(--farbe1);
	font-size:0.85rem !important;
	font-weight: normal;
	display: inline-block;
}

.hashtag:hover, .hashtag_edit:hover {
	background-color: var(--weiss);
	color: var(--farbe1) !important;
}

a.hashtag {
	color: #ffffff !important;
}


.hashtag_edit {
	margin-top: 4px;
	margin-right: 4px;
	cursor: pointer;
}


.hashtag_edit::after {
	color: var(--farbe3);
	font: normal normal normal 1em FontAwesome;
	content: '\f00d';
	margin-left: 5px;
}


#tagliste {
	flex-wrap: wrap;
}

#tagliste_felder {
	flex-grow: 1;
	width: auto;
	min-width: 8em;
}






.spaltelinks{
	float:left;
	width:48%;
	margin-right:10px;
}

.spalterechts{
	width:48%;
	float:right;
}

.spalterechts +*{
	clear:both;
}



.frei{
	clear:both;
}

.vb, .vollbreit{
	width:100%;
}

.hb, .halbbreit{
	width:50%;
}

.db{
	width:31%;
}

.sb{
	width:65%;
}

.schmal{
	width:4em;
}

.nowrap{
	white-space:nowrap;
}




/* text-formatierungen */

b, strong, .fett, .f {
	font-weight: bold;
}

.unfett{
	font-weight:normal;
}

.k, .kursiv{
	font-style:italic;
}

.gross{
	font-size:1.125rem;
	line-height:1.3;
}

small, .i, .klein, a.klein{
	font-size:0.875rem;
	line-height:1;
}

.sehrklein{
	font-size:0.75rem;
	line-height:1;
}

.b, .rot, .b a{
	color:rgb(226, 0, 42) !important;
}

.bunt {
	color: var(--farbe1);
}


.w{
	color:#ffffff !important; /*weiss*/
	font-size:inherit !important;
}

.durchgestrichen{
	text-decoration: line-through;
}



.inhalt_zentriert .fa{
	text-align:center;
	text-shadow:3px 3px 5px rgba(100, 100, 100, 0.3);
}

.fa:hover{
	text-decoration:none !important;
}


.fa-refresh:hover{
	animation:fa-spin 3s infinite linear !important;
}

 .fa-trash:hover{
	color:rgb(226, 0, 42);
}


.hervorgehoben{
	background-color:rgba(235, 200, 30, 0.3);
	border-radius:5px /*4*/;
	font-size:inherit;
}

.hervorgehoben_voll{
	background-color:rgba(235, 200, 30, 0.7);
	border-radius:5px /*4*/;
	font-size:inherit;
}

span.hervorgehoben_voll_bild, .hervorgehoben_voll_bild img, img.hervorgehoben_voll{
	border:4px solid rgba(235, 200, 30, 0.7);
	border-radius:4px;
}

span.hervorgehoben_bild, .hervorgehoben_bild img, img.hervorgehoben{
	border:4px solid rgba(235, 200, 30, 0.3);
	border-radius:4px;
}


.weiss {
	background-color:#fafafa !important
}

.inaktiv{
	background-color:rgb(239, 237, 228);
}

.grau, .grau a{
	color:var(--farbe2) !important;
}

.hellgrau{
	color:var(--farbe3);
}

.aktiv{
	background-color:#E0F4F3 !important;
}

.schwarz{
	color:rgb(0, 0, 0) !important;
}




.nobreak{
	white-space:nowrap;
}

.inline{
	display:inline !important;
}

.unsichtbar {
	display:none !important;
}


.person_unsichtbar, .punkt_unsichtbar {
	opacity: 0;
	transition: 1s;
	visibility: hidden;
}

.person_sichtbar, .punkt_sichtbar {
	opacity: 1;
	transition: 1s;
}

.durchsichtig{
	opacity: 0;
	transition: 0.5s;
}

.undurchsichtig{
	opacity: 1;
	transition: 0.5s;
}



.halbtransparent, .halbtransparent *{
	opacity: 0.75;
}

.relativ{
	position:relative;
}

.l, .links{
	text-align:left !important;
}

.r, .rechts{
	text-align:right !important;
}

.z, .zentriert{
	text-align:center;
}



.oben{
	vertical-align:baseline;
}

.mitte{
	vertical-align:middle;
}

.randlinks{
	padding-left:10px;
}

.randrechts{
	padding-right:10px;
}

.randoben{
	margin-top:10px;
}

.abstandoben{
	margin-top:0.8ex;
}

.abstandunten{
	margin-bottom:0.8ex;
}

.abstandlinks{
	margin-left:0.8ex;
}

.kasten{
	padding:5px;
}

.keinkasten{
	padding:0px;
}

.hoheZeile{
	line-height:2;
}




/* responsive styles */

@media print{
	body{
		padding:0 !important;
		margin:0 !important;
		background-image:none;
		background-color:white;
	}
	h2{
		opacity:1;
	}
	.inhalt{
		margin:0cm !important;
		padding:0cm !important;
	}
	.navi, .noprint, .hotnewsContainer, .menue{
		display:none;
	}

	h2#seitentitel, h2#seitentitel2{
		opacity:1;
		position:static;
	}
	.print{
		display:block !important;
	}
	form{
		page-break-inside:avoid;
	}
	.textfeld{
		border:0;
	}
	.box{
		background-color:white;
	}
}



@media only screen and (max-width:21cm){
	html{
		font-size:110%;
	}
	body{
		no_margin:0.5rem;
		margin-top:0;
	}
	h1{
		margin-top:0px;
		margin-right:0px !important;
	}
	.container, .container .b_25, .container .b_50, .container .b_75 {
		width: 100%;
		display: block;
	}

	figure {
		width: 100%;
		max-width: 100% !important;
	}

	.i, .klein, .hr, .hy, .hg, .normal.klein *{
		line-height:1.2;
	}
	img.bildlinks, img.bildrechts{
		max-width:100%;
		float:none;
		margin:0
	}
	div.spaltelinks, div.spalterechts{
		width:100%;
		margin:0
	}
	div.spalterechts{
		margin-top: 8px;
	}
	#datum{
		display:block
	}
	#interaktion .fa-stack{
		left:auto;
		right:15pt;
	}
}

@media only screen and (min-width:768px) and (max-width:900px){
	html{
		font-size:125%;
	}
	body{
		no_margin:0.5rem;
		margin-top:0;
	}
	.inhalt{
		max-width: 100%;
	}
	.navi{
		height: 22pt;
	}
	h1{
		margin-top:0;
		margin-right:0px !important;
	}
	h3{
		margin-right:0px !important;
	}
	.i, .klein, .hr, .hy, .hg, .normal.klein *{
		line-height:1.2;
	}
	img.bildlinks, img.bildrechts{
		max-width:100%;
		float:none;
		margin:0
	}
	div.spaltelinks, div.spalterechts{
		width:100%;
		margin:0
	}
	div.spalterechts{
		margin-top: 8px;
	}
	#datum{
		display:block
	}
	#interaktion .fa-stack{
		left:auto;
		right:15pt;
	}
}