:root {
  --primarycolor: #d8c1c5;
  --primarycolor-darker: #bf999f;
  
  --secondarycolor: #95c1bb;
  --secondarycolor-dark: #7fb3ab;
  --secondarycolor-darker: #6d9993;
  --secondarycolor-light: #abd9d2;
  
  --text-color: #777;
  --text-color2: #d0818f; /* #bb88c0 */
  --headline-color: #91a8c4;
  
  --input-submit: #d86a86;
  --textarea-background: #f9efef;
  --textarea-border: #dea4b3; /* #c68282 */
  
  --boxshadow: 1px 1px 4px 0 rgba(0,0,0,.1);
  --boxshadow-strong: 1px 2px 4px 0 rgba(0,0,0,.3);
  
  --font-KiteOne: 'Kite One', sans-serif;
  --font-Dancing: 'Dancing', cursive, sans-serif;
  --font-Caveat: 'Caveat', cursive, sans-serif;
}    /*F4EF86*/

@font-face {
    font-family: Century Gothic;
    font-display: swap;
    src: url('../static/fonts/CenturyGothic.ttf')
}

@font-face {
    font-family: Dancing;
    font-display: swap;
    src: url('../static/fonts/DancingScript-VariableFont_wght.ttf'),
    sans-serif;
}

@font-face {
    font-family: Caveat;
    font-display: swap;
    src: url('../static/fonts/Caveat-VariableFont_wght.ttf')
}

* {
  box-sizing: border-box;
  font-family: "Century Gothic","Apple Gothic",AppleGothic,"URW Gothic L","Avant Garde",Futura,sans-serif;
  outline: none;
}

body {
	background: linear-gradient(to bottom, #fff, var(--primarycolor-darker));
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
	/*color: #53536c;*/
	color: #777;
	font-size: 14px;
	text-align: center;
    box-sizing: border-box;
}
/*
  background: -webkit-linear-gradient(left, #25c481, #25b7c4);
  background: linear-gradient(to right, #25c481, #25b7c4);
*/

a:link, a:visited, a:active {
    color:  #ad9cb4;
    text-decoration: underline;
}

a:hover {
    color: #B2786B;
    text-decoration: underline;
}

/*---------- DESIGN ----------------*/

h1 {
	color: var(--headline-color);
	letter-spacing: 3px;
	margin: 0;
	padding: 0;
	/*font-family: 'Kite One';*/
	font-family: var(--font-Caveat);
	font-size: 30px;
	font-weight: lighter;
	font-variant: normal;
	line-height: 40px;
	text-align: left;
	margin-bottom: 12px;
	/*text-transform: lowercase;*/
}

h1 a:link, h1 a:visited, h1 a:active {
    color:  inherit;
    text-decoration: none;
}

h1 a:hover {
    color:  #ad9cb4;
    text-decoration: underline;
    cursor: crosshair;
}


h2 {
	color: var(--headline-color);
	letter-spacing: 1px;
	margin: 0;
	padding: 0;
	font-family: var(--font-Caveat);
	font-size: 18px;
	font-variant: normal;
	text-align: left;
	margin-bottom: 5px;
}

hr {
    border: 0;
    height: 2px;
    background: transparent;
    background-image: linear-gradient(to right, transparent, #ccc 10%, var(--headline-color), #ccc 90%, transparent);
    margin: 40px 0;
}

#content > img {
    max-width: 100%;
}

smallcaps {
    font-variant: small-caps;
}


#wrapper {
	background: #e7e7e7;
	margin: 80px auto 0 auto;
	text-align: left;
	max-width: 900px;
    width: 100%;
}

/* Header */
#header {
	margin: 0;
	padding: 0;
}

/* Content */
#content {
	min-height: 400px;
    margin: 0px;
	padding: 3%;
	max-width: 900px;
    width: 100%;
    text-align: justify;
    box-sizing: border-box;
    position: relative;
}


/*---------- Footer ----------------*/

#footer {
    font-size: 10px;
    clear: both;
	text-align: center;
	padding-bottom: 15px;
}


/*---------- Navigation ----------------*/
#navigation {
	max-width: 900px;
	height: 50px;
	line-height: 50px;
	margin: 0px;
	font-size: 7pt;
}

#navigation a, .navigation a, .navigation span {
	font-family: 'Open Sans', sans-serif;
	color: #afb7b7;
	padding: 0 20px;
	letter-spacing: 2px;
	float: left;
	text-transform: normal;
	line-height: 50px;
	border-right: 1px solid #f1f1f1;
	border-bottom: 0px;
	text-decoration: none;
}


#navigation a:hover, .navigation a:hover {
	max-width: 900px;
	background: #d0c5c8;
	color: #fff;
	border-bottom: 0px;
	text-transform: normal;
}

.navigation {
    /*position: absolute;*/
	width: 106%;
	/*height: 50px;
	line-height: 50px;*/
	margin: -3.4% -3% 10px -3%;
	font-size: 10pt;
	background: #dfdfdf;
    display: inline-block;
}
.navigation a, .navigation span {
	background: #dfdfdf;
}

.navigation-active, a.navigation-active {
	background: #e6d7db;
}
/*---------- Sonstiges ----------------*/

blockquote {
	color: #6f7692;
	padding: 5px 5px 5px 14px;
	border-left: 1px solid #c7dfd7;
	font-weight: 300;
}

textarea, input, select {
    color: #000000;
    border-color: #;
    background-color: #ffffff;
}

u {
    /*color: #869189;*/
    text-decoration-color: var(--primarycolor-darker);
    text-decoration-thickness: 2px;
}

i {
    /* color: #9fb8b8; */
    color: var(--primarycolor-darker);
}

b{
	color: #4a5d7f;
}

k {
    font-size: 10px;
    color: var(--text-color2);
}

td.min {
    width: 1%;
    white-space: nowrap;
}


html {
    scrollbar-width: thin;
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #fff; }
::-webkit-scrollbar-thumb { background: #cdcdcd; }
::-webkit-scrollbar-thumb:hover { background: #888; }
::-webkit-scrollbar-thumb:active { background: #666; }

/* ---------- TOOLTIP ---------- */

.csstooltip, .csstooltip-shoutbox {
  position: relative;
  display: inline-block;
  border-bottom: none;
}
.csstooltip span {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -60px;
  font-variant: none;
  font-size: 10px;
  pointer-events: none;
}
.csstooltip span::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
  pointer-events: none;
}
.csstooltip:hover span, .csstooltip-shoutbox:hover span {
  visibility: visible;
  pointer-events: none;
}


.csstooltip-shoutbox span {
  visibility: hidden;
  background-color: #f7f0f0;
  color: #555;
  text-align: left;
  border-radius: 1.125rem 1.125rem 1.125rem 0;
  padding: 5px 15px;
  position: absolute;
  z-index: 99;
  bottom: 124%;
  left: 0;
  margin-left: 0;
  font-variant: none;
  font-size: 10px;
  
-webkit-box-shadow: 0px 10px 24px -9px rgba(0,0,0,0.7);
-moz-box-shadow: 0px 10px 24px -9px rgba(0,0,0,0.7);
box-shadow: 0px 10px 24px -9px rgba(0,0,0,0.7);
  pointer-events: none;
}

/* ---------- ---------- CSS for Mobile Devices ---------- ---------- */

@media screen and (max-width: 40em){
#wrapper {
	margin-top: 0px;
}
} /* << DONT DELETE THIS #f59542 */



/* ---------- ---------- TABELLEN ---------- ---------- */
/* https://codepen.io/nikhil8krishnan/pen/WvYPvv */

table {
    text-align: left;
}

table.table2 {
  width:100%;
  table-layout: fixed;
}

.table2-header{
  /* background: linear-gradient(to bottom, #fff, #bf999f); */
  background-color: rgba(255,255,255,0.3);
 }
.table2-content{
  height:300px;
  overflow-x:auto;
  margin-top: 0px;
  border: 1px solid rgba(255,255,255,0.3);
}
table.table2 th{
  padding: 20px 15px;
  text-align: left;
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
}
table.table2 td{
  padding: 15px;
  text-align: left;
  vertical-align:middle;
  font-weight: 300;
  font-size: 12px;
  border-bottom: solid 1px rgba(255,255,255,0.1);
}



table.table3 {
  width: 100%;
  font-family: Verdana;
  font-size: 14px;
  border-collapse: collapse;
  text-align: left;
  color: #d1d1d1;
}
table.table3 td {
  padding: 2px;
  box-sizing: border-box;
  border: 0px solid;
  
}
table.table3 tr:nth-child(even) { background: #636363; }
table.table3 tr:nth-child(odd) { background: #3d3d3d;  }



table.table4 {
	margin:2px;
	padding:0px;
	border-top:1px solid #ffffff;
	border-left:1px solid #ffffff;
	outline: 1px solid var(--primarycolor);
	background:#fff;
	min-width:60%;
}
 
table.table4 td{
	padding:3px;
	border-right:1px solid #ffffff;
	border-bottom:1px solid #ffffff;
	background:#f4f4f4;
}
 
table.table4 th{
	padding:3px;
	color:#fff;
	border-bottom:1px solid #ffffff;
	border-right:1px solid #ffffff;
	background: var(--primarycolor);
}
 

table.table5 {
        margin-top:10px;
        color: var(--text-color);
        border-width: 1px;
        border-color: #3A3A3A;
        border-collapse: collapse;
		width:100%;
    }
 
table.table5 th {
        color: #ffffff;
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: var(--primarycolor);
        background-color: var(--primarycolor);
    }
 
table.table5 tr:hover td {
        background-color: var(--textarea-background);
		/* background-color:#dcbbbb; */
    }
 
table.table5 td {
		border-width: 1px 0px 1px 0px;
        padding: 8px;
        border-style: solid;
        border-color: var(--primarycolor);
		background-color: transparent;
    }
    
    


.charakterbild {
    border: 4px solid white;
    filter: drop-shadow(0px 1px 2px grey);
}
.polaroid {
    background: white;
    border: 4px solid white;
    filter: drop-shadow(0px 1px 2px grey);
    display: inline-block;
    text-align: center;
    margin: 0 5px;
    cursor: crosshair;
    margin-bottom: 10px;
    position: relative;
    min-width: 150px;
}

/* .colorline:after {content: ''; */
/* border-bottom: 3px solid #4fc0d2; */
/* width: 100%; */
/* position: absolute; */
/* bottom: -5px; */
/* left: -4px; */
/* padding: 4px; */
/* } */
.colorline {
border-bottom: 3px solid #4fc0d2;
position: absolute;
bottom: -5px;
left: -4px;
right: -4px;
}

.wackeln {
  transition: all 0.1s ease;
}
.wackeln:hover {
   transform: rotate(-2deg);
  -webkit-transform: rotate(-2deg);
  -moz-transform: scale(1.05);
  -o-transform: rotate(-2deg);
  -ms-transform: rotate(-2deg);
  transition: all 0.2s ease;
  
}

.briefmarke {
	width: 280px;
	height: 180px;
	display: inline-block;
	padding: 10px;
	background: white;
	position: relative;
	-webkit-filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.5));
	/*The stamp cutout will be created using crisp radial gradients*/
	background: radial-gradient(
		transparent 0px, 
		transparent 4px, 
		white 4px,
		white
	);
  
	/*reducing the gradient size*/
	background-size: 20px 20px;
	/*Offset to move the holes to the edge*/
	background-position: -10px -10px;
}
.briefmarke:after {
	content: '';
	position: absolute;
	/*We can shrink the pseudo element here to hide the shadow edges*/
	left: 5px; top: 5px; right: 5px; bottom: 5px;
	/*Shadow - doesn't look good because of the stamp cutout. We can still move this into another pseudo element behind the .stamp main element*/
	
  /*box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.5);*/
	/*pushing it back*/
	z-index: -1;
}



/* ---------- ALERT ---------- */

 /* The alert message box */
.alert, .alert2, .alert3 {
    padding: 20px;
    background-color: var(--textarea-border); /* #f44336; Red */
    color: #fff;
    margin-bottom: 15px;
}

/* The close button */
.closebtn, .closebtn2, .closebtn3  {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}

.alert2 { background-color: #95c991; }
.alert3 { background-color: #cf3a3a; }

/* The close button */
.closebtn:hover { color: black; } 
.closebtn3 { color: black; }
.closebtn3:hover { color: grey; } 

.alert i, .alert2 i, .alert3 i {
	color: var(--secondarycolor);
}
.alert b, .alert2 b, .alert3 b {
    color: var(--secondarycolor);
}
.alert u, .alert2 u, .alert3 u {
    color: #fff;
    border-color: var(--secondarycolor);
}

.alert a:link, .alert2 a:link, .alert3 a:link, .darkbox a:link, .darkbox > a:link,
.alert a:visited, .alert2 a:visited, .alert3 a:visited, .darkbox a:visited, .darkbox > a:visited
{
    color: #fff;
}


/* ----------------------------- */
.figurenavatar {
    width: 50px; /* width of container */
    height: 50px; /* height of container */
    object-fit: cover; /* oder contain */
    object-position: 50% 0px;
}

.figurenavatar-uebersicht {
    width: 150px; /* width of container */
    height: 200px; /* height of container */
    object-fit: cover; /* oder contain */
    object-position: 50% 0px;
}


/* ICONS */
/* https://codepen.io/sosuke/pen/Pjoqqp */
.icon--red { filter: invert(17%) sepia(80%) saturate(5506%) hue-rotate(355deg) brightness(101%) contrast(79%);  /* #e52d27 */ }
.icon--green { filter: invert(79%) sepia(18%) saturate(5397%) hue-rotate(45deg) brightness(84%) contrast(76%);  /* #60b023 */ }
.icon--blue { filter: invert(53%) sepia(15%) saturate(2071%) hue-rotate(189deg) brightness(90%) contrast(92%);  /* #5d7cde */ }
.icon--yellow { filter: invert(93%) sepia(19%) saturate(2522%) hue-rotate(354deg) brightness(90%) contrast(93%);  /* #dec60d */ }
.icon--white { filter: invert(100%) sepia(1%) saturate(7340%) hue-rotate(260deg) brightness(121%) contrast(101%);  /* #fff */ }
.icon--hellgrau { filter: invert(92%) sepia(0%) saturate(226%) hue-rotate(137deg) brightness(92%) contrast(88%);  /* #ccc */ }



/* Shoutbox */

table.shoutbox {
  width: 100%;
  /* font-family: verdana; */
  font-size: 11px;
  border-collapse: collapse;
  text-align: left;
  color: #d1d1d1;
  font-family: verdana;
}
table.shoutbox td {
  padding: 2px;
  box-sizing: border-box;
  border: 0px solid;
  
}
table.shoutbox tr:nth-child(even) { background: #636363; }
table.shoutbox tr:nth-child(odd) { background: #3d3d3d;  }
 
.shoutbox-content {
    overflow-y: scroll;
    height: 300px;
    scrollTop:50px;
    /*scrollbar-color: #636363 #3d3d3d;*/
    scrollbar-width: thin;
    scroll-margin-bottom: 0px;
    
  display: flex;
  flex-direction: column-reverse;
}

#shoutbox-content::-webkit-scrollbar { width: 10px; }
#shoutbox-content::-webkit-scrollbar-track { background: #fff; }
#shoutbox-content::-webkit-scrollbar-thumb { background: #888; }
#shoutbox-content::-webkit-scrollbar-thumb:hover { background: #555; }

#shoutbox a.shoutboxuser, .shoutbox a {
  display: inline-block;
  color: var(--secondarycolor);
  text-decoration: none;
  position: relative;
  border-bottom: none;
  font-variant: none;
}
#shoutbox a.shoutboxuser:hover, .shoutbox a:hover {
	color: var(--secondarycolor-darker);
}

#shoutbox a.shoutboxuser:hover:before {
	content: none;
}

#shoutbox .shoutbox-navi, #shoutbox .shoutbox-navi a {
    color: #fff;
}


.scrolling {
    overflow-y: auto;
    max-height: 200px;
    /*scrollbar-color: #636363 #3d3d3d;*/
    scrollbar-width: thin;
}

.scrolling::-webkit-scrollbar { width: 10px; }
.scrolling::-webkit-scrollbar-track { background: #fff; }
.scrolling::-webkit-scrollbar-thumb { background: #888; }
.scrolling::-webkit-scrollbar-thumb:hover { background: #555; }


.chattitle {
    font-family: Caveat;
    font-size: 40px;
    margin-top: -70px;
    float: left;
}

#shoutbox {
    position: relative;
}
.shoutbox-content {
    height: 500px;
    max-height: 350px;
}

/* --- layout.php --- */
.chattoggle {
    position: fixed;
    padding: 20px;
    border-radius: 50% 0 0 50%;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 16px 0 0 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.chattoggle-closed {
    right: 0;
    top: 50vh;
}

.chattoggle-open {
    top: 0;
    right: 0;
    margin-top: -70px;
}

@media only screen and (max-width: 1030px) {
    .chattoggle {
        padding: 20px 10px;
    }
    .chattoggle-closed {
        top: 10vh;
    }

}

#shoutbox-wrapper {
    position: fixed;
    right: 0;
    margin: 0 auto;
    padding: 20px;
    height: 100vh;
    max-height: 500px;
    min-height: 200px;
    width: 350px;
top: 50%;
transform: translate(0, -50%);
max-width: 100%;
/* From https://css.glass */
background: rgba(255, 255, 255, 0.4);
border-radius: 16px 0 0 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(16.4px);
-webkit-backdrop-filter: blur(16.4px);
}
#closeshoutbox {
    display: none;
    text-align: right;
}

@media only screen and (max-width: 500px) {
    #shoutbox-wrapper {
        max-height: unset;
        width: 100%;
        padding-top: 70px;
    }
    #closeshoutbox {
        display: block;
    }
    #shoutbox-content {
        max-height: 70vh;
        height: 100%;
    }
}

/* --- shoutbox-show.php --- */

.shoutboxbubble {
  box-sizing: border-box;
  padding: 0.5rem 1rem;
  margin: 0.5rem 0.2rem 0.5rem 0.5rem;
  background: #FFF;
  border-radius: 1.125rem 1.125rem 1.125rem 0;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 66%;
  box-shadow: 0 0 2rem rgba(0, 0, 0, 0.075), 0rem 1rem 1rem -1rem rgba(0, 0, 0, 0.1);
  text-align: left;
}
.shoutboxbubble-right {
    /*margin: 0.5rem 1rem 0.5rem auto;*/
    margin: 0.5rem 1rem 0.5rem 0.2rem;
    border-radius: 1.125rem 1.125rem 0 1.125rem;
    background: #f7f0f0;
}

.shoutbox-avatar {
  height: 35px;
  width: 35px;
  overflow: hidden;
  border-radius: 50%;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  ms-user-select: none;
  position: relative;
  /*display: inline-block;*/
  align-self: flex-end;
  margin: 0rem 0rem 0.3rem 0rem;
}
.shoutbox-username {
  position: relative;
}
.shoutbox-sameuser {
    margin-top: 0;
}
.shoutbox-time {
  align-self: flex-end;
  margin-bottom: 0.4rem;
  font-size: 8px;
  display: inline-block;
  color: #b3b3b3;
}

.shoutbox-time-right {
  margin-left: auto;
}

.shoutbox-avatar-wrapper {
    display: flex;
    flex-direction: column;
    width: 35px;
    align-self: flex-end;
}

.bubble-wrapper {
    display: flex;
    /*position: relative;*/
}
.shoutbox-liste {
    display: flex;
    flex-direction: column;
}

.pointer {
    cursor: pointer;
}

button.shoutbox-liste-button {
    color: var(--text-color);
    /* background: rgba(255,255,255,0.8); */
    padding: 20px 0;
    background: rgba(255, 255, 255, 0.6);
    /* border-radius: 16px; */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    margin: 0;
    margin-top: 5px;
}
button.shoutbox-liste-button:hover {
    background: rgba(255, 255, 255, 0.8);
}
button.shoutbox-liste-button:active {
    background: rgba(255, 255, 255, 0.3);
}

.readmessages {
    background: var(--secondarycolor);
    color: #fff;
    border-radius: 50%;
    height: 20px;
    width: 20px;
    position: absolute;
    font-size: 12px;
    font-weight: 400;
    line-height:18px;
    text-align: center;
    display: inline;
    opacity: 0;
    top: 2px;
}



.sidescroll {
    overflow-x: auto;
    scrollbar-color: #636363 #3d3d3d;
    scrollbar-width: thin;
}


/* ---------- ACCORDION ---------- */

 /* Style the buttons that are used to open and close the accordion panel */
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: 1px solid #fff;
  outline: none;
  transition: 0.4s;
  margin: 0px;
  font-family: 'Raleway', sans-serif;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
  background-color: #ccc;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 0 10px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.accordion:after {
  content: '\025BE'; /* 25BC Unicode Dreieck nach unten */
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}

.accordionactive:after {
  content: "\25B5"; /* 25B4, 25B2 Unicode Dreieck nach oben */
}


.panel p{
  padding: 15px 0px;
}

.panel-inner {
    padding: 10px 0;    
}

@media only screen and (max-width: 800px) {
.fullwidth {
    margin-left: -14px;
    margin-right: -14px
}
}

/* CHARAKTER EDIT */
/* //https://ishadeed.com/article/flexbox-separator/ */
.hidemovebutton.hidden, .hidedeletebutton.hidden {
            display: none;
        }
        
        .section {
            display: flex;
            align-content: center;
            flex-direction: column;
            align-content: flex-start;
        }
            .section:before {
                content: '';
                border: 1px solid #d3d3d3;
            align-self: stretch;
            margin: 15px;
                    }
        .section_item-start {
            order: -1;
            margin: 0 auto;
        }
        
        @media (min-width: 900px) {
        .section {
            align-items: center;
            flex-direction: row;
            margin-left:auto;margin-right:auto;
            }
        }
        
        
.divtable {
    display: grid;
    grid-template-columns: max-content auto; 
    max-width: 100%;
    gap: 10px 30px;
}

/* POSTS LINKSTYLING */


a.postlinkstyle:link, a.postlinkstyle:visited, a.postlinkstyle:active {
    color:  var(--text-color);
    text-decoration: none;
}

a.postlinkstyle:hover {
    color: #B2786B;
    text-decoration: underline;
    cursor: crosshair;
}

article:hover .editbutton, article:hover .showonhover { opacity: 1; }

article .editbutton {
    padding: 5px; vertical-align: bottom; position: absolute; right: 5px; top: 0;
    opacity: 0;
}
article .showonhover {
    opacity: 0;
}

/* DIVs als Checkbox oder Radio Button */ 
.alternativcheck {
    display: block;
    float: left;
    text-align: center;
}
.alternativcheck > input{ /* HIDE RADIO */
    visibility: hidden; /* Makes input not-clickable */
    position: absolute; /* Remove input from document flow */
}
.alternativcheck > input + span, .alternativcheck > input + div{ /* DIV STYLES */
    cursor: pointer;
    border: 1px solid transparent;
    min-width: 85px;
    min-height: 85px;
    background: #fff;
    border-radius: 10px;
    padding: 3px;
    display: block;
    hyphens: auto;
    /* display:flex;justify-content:center;align-items:center; */
}
.alternativcheck > input:checked + span, .alternativcheck > input:checked + div{ /* (RADIO CHECKED) DIV STYLES */
    background-color: var(--secondarycolor);
    border: 1px solid var(--secondarycolor);
    color: #fff;
}

.alternativcheck > input + span:hover, .alternativcheck > input + div:hover {
    background-color: #88a39f;
}

.alternativcheck > input:disabled + span, .alternativcheck > input:disabled + div{ /* (RADIO CHECKED) DIV STYLES */
    border: 1px solid #ddd;
    background: #ddd;
    cursor: not-allowed;
}

.alternativcheck-row {
    display: flex;  flex-wrap: wrap; gap: 5px;
}


/* Spoiler */
.spoiler {
    background-color: #ccc;
    color: #ccc;
    padding: 3px 5px;
    border: 1px solid #aaa;
    /* display: inline-block; */
    position: relative;
}
.spoiler::before {
    content: 'Spoiler';
    color: #aaa;
    width: auto;
    position: absolute;
}
.spoiler:hover::before {
    display: none;
}
.spoiler:hover {
  color: var(--text-color);
}


.sceditor-button-anfuehrungszeichenunten div, .sceditor-button-anfuehrungszeichen div { background: url('../images/icons/iconmonstr/quote-right.svg') !important; }
.sceditor-button-anfuehrungszeichen-single div { background: url('../images/icons/iconmonstr/quote-single-right.svg') !important; }
.sceditor-button-anfuehrungszeichenoben div { background: url('../images/icons/iconmonstr/quote-left.svg') !important; }
.sceditor-button-chevronanfang div, .sceditor-button-chevron div  { background: url('../images/icons/iconmonstr/chevron.svg') !important; background-size: cover !important; }
.sceditor-button-chevron-single div  { background: url('../images/icons/iconmonstr/chevron-single.svg') !important; background-size: cover !important; }
.sceditor-button-chevronende div { background: url('../images/icons/iconmonstr/chevron.svg') !important; transform: scaleX(-1); background-size: cover !important; }

/* Cropped Avatar */
.cropped {
    width: 70px; /* width of container */
    height: 70px; /* height of container */
    object-fit: cover; /* oder contain */
    object-position: 50% 0px;
}



/*---------- Tabellen/Klassen/Formulare ----------*/

/* VARIANTE 1 */

table.zeilen {
        margin-top:10px;
        font-size: 11px;
        color: var(--textcolor);
        border-width: 1px;
        border-color: #3A3A3A;
        border-collapse: collapse;
		width:100%;
    }
 
table.zeilen th {
        color: #ffffff;
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: var(--primarycolor);
        background-color: var(--primarycolor);
    }
 
table.zeilen tr:hover td {
        background-color: var(--primarycolor);
		/* background-color:#dcbbbb; */
    }
 
table.zeilen td {
		border-width: 1px 0px 1px 0px;
        padding: 8px;
        border-style: solid;
        border-color: var(--primarycolor);
		background-color: transparent;
    }
	
/* VARIANTE 2 */
 
table.table {
	margin: 5px 0px;
	padding:0px;
    /*
	border-top:1px solid #ffffff;
	border-left:1px solid #ffffff;
	outline: 1px solid var(--primarycolor-darker);
    */
	background:#fff;
	min-width:60%;
    width: 100%;
    border: 1px solid var(--primarycolor-darker);
}
 
table.table td{
	padding:3px;
	border-right:1px solid #ffffff;
	border-bottom:1px solid #ffffff;
	background:#f4f4f4;
}
 
table.table th{
	padding:3px;
	color:#fff;
	border-bottom:1px solid #ffffff;
	border-right:1px solid #ffffff;
	background: var(--primarycolor-darker);
}

/* LISTEN */
#content ul {
    margin-top: 0px;
}
 
#content ol li {
    padding-top: 0px;
    margin-left: 20px;
}

#content ul li{
   list-style: none;
   margin-bottom: 5px;
   margin-top: 5px;
}

#content ul li::before {
    /* content: '»'; */
    content: "⌘";
    color: var(--primarycolor);
    display: inline-block;
    height: 12px;
    width: 12px;
    /* background-image: url('../images/sonstiges/ul-li.svg');
    background-size: contain;
    background-repeat: no-repeat; */
    margin-left: -22px;
    margin-right: 10px;
}



/* SPRECHBLASE */

.sprechblase, .sprechblase-links {
    position: relative;
    background: #fff;
    width: 100%;
    min-height: 100px;
    border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
    padding: 15px;
	max-width: 800px;
    vertical-align: middle;
    display: table-cell;
}
.sprechblase:after {
    content: '';
    position: absolute;
    display: block;
    width: 0;
    border-style: solid;
    border-width: 30px 30px 0 0;
    border-color: #fff transparent transparent transparent;
    top: 50%;
    right: -30px;
    margin-top: -15px;
}

.sprechblase-links:before {
    content: '';
    position: absolute;
    display: block;
    width: 0;
    border-style: solid;
    border-width: 30px 30px 0 0;
    border-color: transparent #fff transparent transparent;
    top: 50%;
    left: -30px;
    margin-top: -15px;
}


.clearfix:after {
  content:"";
  display:block;
  clear:both;
 }
 
.emoji {
    width: 100%;
    min-width: 100px;
    max-width: 250px !important;
    pointer-events: none;
}
.horizontal-spiegeln {
    transform: scaleX(-1);
}

.personspeaking {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.sprechblase-links { margin-left: 10px; }
.sprechblase { margin-right: 10px; }


@media screen and (max-width: 40em){
.personspeaking {
    flex-wrap: wrap;
    justify-content: center;
    /* justify-content: flex-end; */
    margin-bottom: 5px;
}
.emoji {
    max-width: 200px;
}
.emoji-hide {
    display: none;
}
.sprechblase-links::before, .sprechblase::after {
    border-color: transparent;
}
.sprechblase-links { margin-left: 0px; }
.sprechblase { margin-right: 0px; }
}


.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

.clearrow::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
}

@media only screen and (max-width: 800px) {
    [class*="col-"] {
        width: 100%;
      }   
}