#deinestrophe * {
	box-sizing: border-box;
}

:root {
	--accent-color: rgb(255,192,0);
	--accent-color-half: rgb(255, 220, 112);
	--accent-color-bkg: rgb(255, 237, 180);
	--color-anthrazit: rgb(90,90,105);
	--color-grey: rgb(160,160,170);
}

section.deinestrophe {
	padding: 0 !important;
}
#head {
	background: var(--accent-color-bkg);
	padding: 2em;
	text-align: center;
}
#head > div {
	display: inline-block;
	max-width: 62rem;
	width: 100%;
}
#head #search {
	background: #fff;
	border: 0.15em solid var(--accent-color);
	border-radius: 4em;
	font-size: 1.4rem;
	margin-bottom: 1rem;
	overflow: hidden;
	position: relative;
}
#head #search .btn {
	background: url() center center/contain no-repeat var(--accent-color);
	color: #fff;
	display: inline-block;
	height: 100%;
	padding: 0.5em 0;
	text-decoration: none;
	width: 8em;
}
#head #search .btn:hover {
	background-color: var(--accent-color-half);
}
#head #search #btn_infos {
	background-image: url(ui_info.svg);
	background-position: 1em center;
	padding-left: 2em;
}
#head #search #btn_random {
	background-image: url(ui_random.svg);
	background-position: 5em center;
	padding-right: 2em;
}
#head #search input {
	border: none;
	color: var(--color-anthrazit);
	font-size: 1em;
	font-weight: bold;
	height: 100%;
	text-align: center;	
	width: calc(100% - 16em);
}
#head #search input::placeholder {
	color: var(--accent-color-half);
	font-style: italic;
}
#head .char {
	background: #fff;
	border: 1px solid var(--color-anthrazit);
	border-radius: 1em;
	color: var(--color-anthrazit);
	display: inline-block;
	font-size: 1.2rem;
	font-weight: bold;
	height: 2rem;
	line-height: 1.9rem;
	margin: 0.075em;
	overflow: hidden;
	text-decoration: none;
	width: 2rem;
}
#head .char:hover {
	border-color: var(--accent-color);
	color: var(--accent-color);
}

#namenstag {
	background: var(--accent-color-bkg);
	padding: 1em;
	text-align: center;
}
#namenstag > div {
	background: #fff;
	border: 0.15em solid var(--accent-color);
	border-radius: 4em;
	display: inline-block;
	font-size: 1rem;
	max-width: 62em;
	padding: 1em;
	text-align: center;
	width: 100%;
}
#namenstag h2 {
	font-size: 1.5em;
	margin: 0 0 0.5em 0;
	padding: 0;
}
#namenstag a:hover {
	color: var(--accent-color);
}


.DSBuchstabenrahmen {
	float: none;
	margin-bottom: 4em;
	margin-top: 2em;
	width: auto !important;
}
.DSBuchstabenrahmen::after {
	content: "";
	clear: both;
	display: table;
}

.DSBuchstabenrahmen .ersterbuchstabe {
	border-bottom: 2px solid var(--color-grey);
	display: block;
	height: 1.15rem;
	margin-bottom: 3rem;
	text-align: center;
}
.DSBuchstabenrahmen .ersterbuchstabe h2 {
	background: #fff;
	border: 1px solid var(--color-anthrazit);
	border-radius: 1em;
	color: var(--color-anthrazit);
	display: inline-block;
	font-size: 1.2rem;
	font-weight: bold;
	height: 2.3rem;
	line-height: 2.1rem;
	margin: 0;
	padding: 0;
	overflow: hidden;
	text-decoration: none;
	width: 2.3rem;
}
.DSBuchstabenrahmen .column {
	float: left;
	padding-right: 1em;
}
.DSBuchstabenrahmen .column.col1 { width: 100%; }
.DSBuchstabenrahmen .column.col2 { width: 50%; }
.DSBuchstabenrahmen .column.col3 { width: 33.33333333%; }
.DSBuchstabenrahmen .column.col4 { width: 25%; }
.DSBuchstabenrahmen .column.col5 { width: 20%; }
.DSEintrag {
	padding-left: 1.5em;
	text-indent: -1.5em;
}
.DSEintrag a {
	text-decoration: none;
}
.DSEintrag a:hover {
	color: var(--accent-color);
}
.DSEintrag.aktiv a {
	color: var(--accent-color);
}
.DSEintrag.new::before {
	content: "NEU";
	display: inline;
	height: 1.4em;
	background: #ff0000;
	border-radius: 1em;
	text-align: center;
	color: #fff;
	text-align: center;
	margin: 0 0.5em 0 0;
	font-size: 0.6em;
	padding: 0.2em 0.6em;
}
#deinestrophe .playertest {
	background: var(--accent-color-bkg);
	border-radius: 0.5em;
	break-inside: avoid;
	margin-left: -0.5em;
	overflow: hidden;
}
#deinestrophe .playertest h3 {
	background: var(--accent-color);
	color: #fff !important;
	margin: 0;
	padding: 10px 10px 5px 10px;
}

#deinestrophe .DSPlayer {
	background: var(--accent-color);
	padding: 5px;
}
#deinestrophe .DSPlayer .mejs-button,
#deinestrophe .DSPlayer .mejs-controls,
#deinestrophe .DSPlayer .mejs-time-rail,
#deinestrophe .DSPlayer .mejs-container {
	background: var(--accent-color) !important;
}
#deinestrophe .DSPlayer .mejs-container {
	width: 100% !important;
}
#deinestrophe .DSPlayer .mejs-controls {
	height: auto !important;
	top: 3px !important;
	width: 70% !important;
}
#deinestrophe .DSPlayer .mejs-time-rail {
	width: 100% !important;
}
#deinestrophe .DSPlayer .mejs-time-rail .mejs-time-total {
	border: 1px solid #fff;
	border-radius: 0.5em;
	height: 1em;
	overflow: hidden;
}
#deinestrophe .DSPlayer .mejs-time-rail .mejs-time-total * {
	border: none !important;
	border-radius: 0 !important;
	height: 100%;
}
#deinestrophe .DSPlayer .mejs-time-loaded {
	background: var(--accent-color-half) !important;
}
#deinestrophe .DSPlayer .mejs-button button {
	background-image: url(mejs-controls.png) !important;
	border-radius: 50%;
}
#deinestrophe .DSPlayer .mejs-playpause-button.mejs-play button {
	background-position: -61px -24px !important;
	border: 1px solid #fff !important;
}
#deinestrophe .DSPlayer .mejs-playpause-button.mejs-pause button {
	background-position: -11px -24px !important;
	border: 1px solid #fff !important;
}
#deinestrophe .DSPlayer .mejs-volume-button {
	float: none;
	left: auto !important;
	position: absolute;
	right: -80px !important;
}
#deinestrophe .DSPlayer .mejs-volume-button button {
	margin-top: 3px;
}
#deinestrophe .DSPlayer .mejs-volume-slider {
	background: var(--accent-color-half) !important;
	height: 54px !important;
	top: -54px !important;
}
#deinestrophe .DSPlayer .mejs-volume-current {
	height: 32px;
	top: 14px;
}
#deinestrophe .DSPlayer .mejs-volume-total {
	background: var(--accent-color-half) !important;
	height: 32px !important;
	top: 14px !important;
}

#deinestrophe .playertest .details {
	padding: 10px;
}
#deinestrophe .playertest .details .titel {
	display: none;
}
#deinestrophe .playertest .details p {
	margin: 0 0 0.25em 0;
}
#deinestrophe .playertest .details a {
	color: #565656 !important;
}
#deinestrophe a.download {
	font-size: 1rem;
	display: inline-block;
}
#deinestrophe a.download::before {
	background: url() center center/18px no-repeat var(--accent-color);
	border: 1px solid #fff;
	border-radius: 50%;
	content: "";
	display: inline-block;
	height: 1.7em;
	line-height: 1.7em;
	margin: 0 0.5em -0.5em 0;
	text-align: center;
	width: 1.7em;
}
#deinestrophe a.download.mp3::before {
	background-image: url(icon-download-file_white.png);
}
#deinestrophe a.download.m4r::before {
	background-image: url(icon-download-file_white.png);
}
#deinestrophe a.manual {
	font-size: 1rem;
}
#deinestrophe .share.fb {
	float: right;
}

@media (max-width: 770px){
	#search {
		font-size: 1.2rem !important;
	}
	#head .char {
		font-size: 1rem !important;
	}
	
}

@media (max-width: 600px){
	#search .btn {
		background-position: center center !important;
		text-indent: -1000em;
		width: 4em !important;
	}
	#search input {
		width: calc(100% - 8em) !important;
	}
	
}

@media (max-width: 400px){
	#search .btn {
		background-size: 1em;
		text-indent: -1000em;
		width: 2.6em !important;
	}
	#search input {
		width: calc(100% - 5.2em) !important;
	}
	
}