:root {
    --col-gray: gray;
    --col-gray-b: #b0b0b0;
    --col-gray-d: #d0d0d0;
    --col-pink-1: #4c1699;
    --col-card-hover: #e9ecef;
    --col-box-nav-active: blueviolet;
    --col-lila: #f84fed;

    --col-bg-body: #ffffff;
    --col-bg-maincontent: #f0f0f0;
    --col-tx-maincontent: #000000;

    --col-bg-card: #f0f0f0;
    --col-bg-card-hover: #e9ecef;

    --col-bg-page-link: #f0f0f0;
    --col-bc-page-link: #dee2e6;
    --col-tx-page-link: #007bff;
    --col-bg-page-link-hover: #e9ecef;
    --col-bc-page-link-hover: #e9ecef;
    --col-tx-page-link-hover: #0056b3;
}

.darkmode {
    --col-gray: gray;
    --col-gray-b: #b0b0b0;
    --col-gray-d: #d0d0d0;
    --col-pink-1: #4c1699;
    --col-card-hover: #e9ecef;
    --col-box-nav-active: blueviolet;
    --col-lila: ##333333cc;

    --col-bg-body: #101010;
    --col-bg-maincontent: #606060;
    --col-tx-maincontent: #000000;

    --col-bg-card: #a3a3a3;
    --col-bg-card-hover: #cccccc;

    --col-bg-page-link: #404040;
    --col-bc-page-link: #404040;
    --col-tx-page-link: #202020;
    --col-bg-page-link-hover: #40404088;
    --col-bc-page-link-hover: #40404088;
    --col-tx-page-link-hover: #20202088;
}

body {
    background-color: var(--col-bg-body);
}

/* ### HEADER ### */

/* LOGO */

.logo {
    margin: auto;
    padding: 0.25em;
    --col-logo: var(--col-pink-1);
}
.logo a:hover {
    text-decoration: none;
    --col-logo: var(--col-lila);
}
.logo a #lp1 {
    background-color: var(--col-logo); 
    border: 1px solid var(--col-logo);
    color:white;
/*    padding-left: .25em ;*/
    padding-left: .18em ;
}
/*.logo a */ #lp1 img {
    height: 1.2em;
    vertical-align: bottom;
}
.logo a #lp2 {
    border: 1px solid var(--col-logo);
    color: var(--col-logo);
    padding-right: .25em ;
}

/* MAIN */

#maincontent {
    padding: 10px;
    /* margin: 10px; */
    background-color: var(--col-bg-maincontent);
    color: var(--col-tx-maincontent);
}


.page-link: {
    background-color: var(--col-bg-page-link);
    border-color: var(--col-bc-page-link);
    color: var(--col-tx-page-link);
}
.page-link:hover {
    background-color: var(--col-bg-page-link-hover);
    border-color: var(--col-bc-page-link-hover);
    color: var(--col-tx-page-link-hover);
}


/**
    Seite: public_setlist
 **/
.card {
    background-color: var(--col-bg-card);
}
.card:hover {
    background-color: var(--col-bg-card-hover);
}

/*.public_sets*/ .card-header,
/*.public_sets*/ .card-footer {
    padding: 0.75rem 0.25rem;
} 

/*.public_sets */ .card-body {
    padding: 0.50rem;
}

/*.public_sets*/ .card-body.square {
  width: 100%;
}

/*.public_sets*/ .card-body.square:after {
  content: "";
  display: block;
  padding-bottom: 0;
}

/**
    Seite: public_setinfo
 **/

.public_setinfo {}

.public_setinfo .set-title {

}

.public_setinfo .set-details {
    background-color: var(--col-gray);
    color: white;
}

.public_setinfo .set-details h4 {
    /*background-color: #4c1699;*/
    background-color: var(--col-pink-1);
}
.public_setinfo .details-label {
    font-weight: bold;

}.public_setinfo .details-value {
    
}

}.public_setinfo:in(.details-label,.details-value) {
    padding: 0;
}


/**
  Utils / Helper / design / ...
**/

/* https://spin.atomicobject.com/2015/07/14/css-responsive-square/ */
.square {
  width: 50%;
}

.square:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}











/* ########################################################## */
/* HIER MASSIV AUFRÄUMEN */
/* ########################################################## */


.img-fluid {
    width: 100%;
    height: auto;
}
/*.img-square {
    width: 35vh;
    height: 35vh;
    object-fit: cover;
}*/

.box-nav.active {
    background-color: blueviolet;
    background-color: var(--col-box-nav-active);
}
div#language_selector {
    margin: auto;
}

.img-square {
    width: 25vw;
    height: 17vw;
    object-fit: cover;
}

.img-square:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.row {
	margin-right: 0; 
    margin-left: 0;
}

.table-hover tbody tr:hover td.col1 {
    border-left: 1px solid var(--col-pink-1);
}

header {
	background-color: var(--col-gray-b);
}
.tc-white {
    color: white;
}
.bg-gray {
	background-color: var(--col-gray-b);
}
.bg-gray-b {
    background-color: var(--col-gray-b);
}

.bg-gray-d {
    background-color: var(--col-gray-d);
}

.bg-pink {
    background-color: var(--col-lila);
}
.tc-pink {
    color: var(--col-lila);
}
.bg-lila {
	background-color: var(--col-pink-1);
}
.tc-lila {
	color: var(--col-pink-1);
}
.th-lila {
    background-color: var(--col-pink-1);
    color: #ffffff;
}
/*th.th-lila {
    background-color: rebeccapurple;
    color: white;
}*/
.center, .align-center, .tac {
	text-align: center;
}
.align-right, .tar {
    text-align: right;
}

.margin-auto, .ma {
    margin: auto;
}

.fsk16 figure img {
  -webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
  filter: blur(5px);
}

#aside_l {

}

.box-searchresult {
    margin: 1em 0;
    padding: 1em 0;
}

div#searchbox {
    /* align-items: baseline; 
    /* vertical-align: middle; */
    text-align: right;
    margin: auto;
}

.btn-search:hover {
    color: #fff;
    background-color:  var(--col-lila);
    border-color:  var(--col-lila);
}
.btn-search {
    color: #fff;
    background-color: var(--col-pink-1);
    border-color: var(--col-pink-1);
}


.btn-group.btn-group-gender a {
    padding: 10px;
}

 /*###*/

.box-nav {
	background-color: var(--col-pink-1);
	text-align: center;
	padding: 5px 0;
	color: white;
	font-size: 1.3em;
	font-weight:bold;
}
.box-nav:hover {
	background-color: #f84fed;
}
.box-nav a {
    color: white;
    font-size: 1.3em font-weight:bold;
    width: 100%;
    display: inline-block;
    height: 1.6em;
    margin: 0;
}


 /*###*/

.public.has-fixed-header #row-main {
    background-color: #f0f0f0;
    margin-top: 8.5em;
}

/* ASIDES */

.aside_lists {
    border-radius: .2em;
    /*background-color: var(--col-gray-b);*/
    background-color: var(--col-pink-1);
    margin: 10px 0 0 10px;
}

.aside_lists dt {
    background-color: var(--col-pink-1);
    color: white;
    padding: 0 0.3em;
    border-radius: 0.3em 0.3em 0 0;
}

.aside_lists dd {
    background-color: var(--col-gray-b);
    margin-bottom: 0;/*.5rem;*/
    margin-left: 0;
    /*padding: 2px;*/
    border: var(--col-pink-1) 3px solid;
    border-radius: 0 0 .3em .3em;
}

.aside_lists dd .tag-big {
    color: black;
    font-weight: bold;
    /*display: inline-block;*/
    display: block;
    padding: 0 0 0 .2em;
}
a.tag-big:hover {
    background-color: #f84fed;
    color: white;
    text-decoration: none;
}

.tag-all {
	color: #f84fed;
    font-weight: bold;
    display: inline-block;
    padding: 0 0 0 .2em;
    text-align: center;
}




.figure {
    display: inline-block;
    background-color: var(--col-pink-1);
    /*padding: 3px;*/
    /*border-radius: .5em*/
    border: var(--col-pink-1) 3px solid;
    width: 100%
}
.figure:hover {
    background-color: #f84fed;
}
.wrapper-4-figure-image {
	width: 100%;
	text-align: center;
}

figcaption a, figcaption {
    color: white;
}

.box-imgs-categories figcaption a {
    color: white;
    font-size: 1.2em;
}
.box-imgs-items figcaption {
    color: white;

}

.box-imgs-items p {
    margin-top: 0;
    margin-bottom: 0.1rem;
}

.item-title {
	color: white;
    max-height: 85px;
    overflow-wrap: break-word;
    overflow: hidden;
}

.item-tags {
    height: 52px;
    overflow: hidden;
}
/*p.item-tags:hover {
    height: initial;
}*/

.item-tags kbd {
	    line-height: 1.7rem;
}

footer {
	background-color: var(--col-gray-b);
}

footer li {
    list-style: none;
}

footer li a {
    color: white;
    text-decoration: none;
}
footer li a:hover {
    color: white;
    text-decoration: underline;
}

.social_icons {
	text-align: center;
	margin: auto ;
}
.social_icon {
    padding: 5px;
    display: inline-block;
    font-size: 3em;
    color: white;
}
.social_icon:hover {
    color: #f84fed;
}

.error404 {
    height: 90vh;
    /* background-color: gainsboro; */
    text-align: center;
}
.error404 h1 {
    padding-top: 30vh;
}

.badge-45deg {
    position: absolute;
    transform: rotate(-45deg);
    left: 1.5em;
    top: 2.5em;
    overflow: hidden;
}