/* styles Mobile bis 781px
=========================== */
html,
body {
width:100%;
min-height:100%;
background-color:#a8b8c8;
background:url('/images/background_hd.jpg') left top no-repeat;
background-size:cover;
background-attachment: fixed;
}

* {
  font-family: 'Open Sans', sans-serif;
  hyphens:auto;
}
b, strong {
    font-weight: 600;
}

/* Kopfzeile mit Menü
=====================*/
#kopfzeile {
  display:block;
  position:relative;
  top:0;
  left:0;
  padding:2%;
  width:96%;
  z-index:10;
  overflow:visible;
}

#logo_top {
  position:absolute;
  left:2vw;
  top:2vw;
}
#logo_top img {
  width:50vw;
  height:auto;
}

#topbox {
  position:absolute;
  top:4vw;
  right:14vw;
  width:8vw;
  height:9vw;
  line-height:8vw;
  font-size:3vw;
  padding:0;
  overflow:hidden;
  text-align:right;
}
#topbox a {
  display:inline-block;
  color:#fff;
  text-decoration:none;
  padding-left:8.5vw;
  line-height:8vw;
  font-size:0;
  background:url('/images/warenkorb.png') left top no-repeat;
  background-size:8vw 8vw;
}

/* Menü
=======*/
#showmenu {
  position:absolute;
  display:block;
  top:4vw;
  right:2vw;
  text-align:right;
  line-height:10vw;
  font-size:10vw;
}
#showmenu a {
  color:#fff;
}
nav {
  display:none;
  position:absolute;
  width:30vw;
  right:5vw;
  top:13vw;
  z-index:10;
  padding:0;
  height:3vw;
  overflow:visible;
}

/*Ebene 1 Hauptmenü*/
nav ul {
  display:block;
  margin:0;
  float:right;
  box-shadow: 4px 4px 4px 4px rgba(0,0,0,0.2);
  line-height:0;
  padding:0;
}

nav li {
  display:block;
  position:relative;
  background-color:#fff;
  padding:8px 4px 8px 12px;
  height:auto;
  line-height:110%;
  border-bottom:2px solid #2b6e88;
}

nav li:last-child {
  border-bottom:0;
}

nav a {
  text-decoration: none;
  display:block;
  min-width:60vw;
  font-size:16px;
  color:#0f4b7a;
  -webkit-transition: color .1s ease-in;
  transition: color .1s ease-in;
  font-size:4vw;
  line-height:125%;
}

nav a:focus,
nav a:hover,
nav a:active {
  color:#fff;
  -webkit-transition: color 0.01s;
  transition: color 0.01s;
}
nav ul li:hover {
  background-color:#0f4b7a;
}
nav ul li:hover a {
color:#fff;
}

nav span {
  visibility:hidden;
  -webkit-transition: all 0.2s 0.2s;
  transition: all 0.2s 0.2s;
}
nav ul ul li:hover span {
  visibility:visible;
}
nav ul ul ul li:hover span {
  visibility:visible;
}
  
/*Ebene 2 Untermenü */
nav ul ul {
  visibility:hidden;
  display:block;
  position:absolute;
  top:2vw;
  left:10vw;
  width:50vw;
  opacity:0;
  background-color:#fff;
  -webkit-transition: all 0.2s 0.2s;
  transition: all 0.2s 0.2s;
  box-shadow: 4px 4px 4px 4px rgba(0,0,0,0.2);
  line-height:0;
  padding:0;
}
nav ul li:hover ul {
  visibility:visible;
  opacity:1;
  z-index:1001;
  -webkit-transition: all 0.2s 0.1s;
  transition: all 0.2s 0.1s;
}
nav ul ul li {
  display:block; 
  padding:8px 4px 8px 12px;
  height:auto;
  line-height:110%;
  border-bottom:2px solid #2b6e88;
}

nav ul ul li:last-child {
  border-bottom:0;
}
nav ul li:hover ul li a {
  color:#0f4b7a;
}
nav ul li:hover ul li:hover a {
  color:#fff;
}

/* Ebenen 3ff */
nav ul ul ul {
  visibility:hidden;
  display:block;
  top:70%;
  left:40%;
  border-top:0;
  background-color:#fef7eb;
}

nav ul ul ul ul {
  visibility:hidden;
  display:block;
  background-color:#b0becc;
}

nav ul li:hover ul ul,
nav ul li:hover ul ul ul {
  visibility:hidden;
  opacity:0;
  -webkit-transition: all 0.2s 0.2s;
  transition: all 0.2s 0.2s;
}
nav ul ul li:hover ul,
nav ul ul ul li:hover ul {
  visibility:visible;
  z-index:1002;
  opacity:1;
  -webkit-transition: all 0.2s 0.1s;
  transition: all 0.2s 0.1s;
}

nav ul ul ul li { 
  line-height:120%;
}

nav ul ul ul a {
  font-size:14px;
}

#media_player {
  display:none;
}

/* Header-Bild
==============*/
#top_gitterback {
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  background:url('/images/gitterback.png') 50% 0 no-repeat;
  overflow:hidden;
}

#top_stripe {
  display:block;
  z-index:3;
  margin-top:14vw;
  background-color:rgba(255,255,255,0.53);
  padding:2%;
  width:96%;
  font-size:4vw;
}
#top_stripe br:last-child {
  display:none;
}
  
#top_stripe div {
  display:none;
}
#top_stripe div:first-child {
  display:block;
  margin:0;
  padding:0;
}

#pfad {
  display:none;
}

/* Content-Boxen
================*/
#content {
  display:block;
  position:relative;
  left:0;
  top:4vw;
  min-height:calc(100% - 4vw);
  width:96%;
  padding:2vw 2% 10vw 2%;
  background-color:transparent;
}

#content article {
  position:relative;
  width:96%;
  padding:2%;
  font-size:4vw;
  font-weight:300;
  line-height:150%;
  color:#000;
  margin-bottom:2vw;
  box-shadow: 5px 4px 5px #ccc;
  border:1px solid #ddd;
  border-radius:8px;
  background-color:#fff;
}
#content article.active {
  border:1px solid #FF5E28;
}

div.vollspalte,
div.hauptspalte,
div.nebenspalte
 {
  width:100%;
  padding:0 0 3vw 0;
  display:block;
  vertical-align:top;
  border-bottom:0px solid #ddd;
}

div.hauptspalte {
  width:100%;
}
div.nebenspalte {
  width:100%;
  font-style:italic;
}

h1 {
  font-family: 'Quicksand', sans-serif;
  font-size:5vw;
  font-weight:bold;
  color:#0f4b7a;
  line-height:150%;
  margin:0 0 1vw 0;
}

h2 {
  font-family: 'Quicksand', sans-serif;
  font-size:5vw;
  font-weight:bold;
  color:#0f4b7a;
  line-height:150%;
  margin:0 0 1vw 0;
  padding-bottom:0;
}

h3 {
  font-family: 'Quicksand', sans-serif;
  font-size:4vw;
  font-weight:normal;
  color:#0f4b7a;
  line-height:150%;
  margin:0 0 1vw 0;
  padding-bottom:0;
}

p {
  margin:0 0 1vw 0;
}

p.small {
  font-size:1vw;
}
  
*.hilite,
a {
  color:#0f4b7a;
  font-weight:300;
  text-decoration:none;
  white-space: wrap;
}

a:hover {
  color:#3e3e3e;
}
#content a::before {
  content: '► ';
}


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

ul {
  list-style: circle outside none;
  padding:0 0 0 2vw;
  margin:0;
}  

* a.pdf {
  display:inline-block;
  padding:4px 0px 0px 52px;
  background:url("/images/icons/pdf.png") left center no-repeat;
}

* a.video {
  display:inline-block;
  height:30px;
  padding:4px 0px 0px 52px;
  background:url("/images/icons/video.png") left 2px no-repeat;
}

#content #angebote {
display:block;
padding:0;
margin:0 0 0 0;
width:100%;
background:none;
box-shadow:none;
border:0;
}

#angebote a::before {
  content: '';
}

#angebote ul {
  padding:0;
  margin:0;
  display:block;
  list-style:none;
}

#angebote ul li {
  width:100%;
  display:inline-block;
  position:relative;
}

#angebote ul li a {
  position:absolute;
  text-decoration:none;
  color:#000;
  display:block;
  width:100%;
  overflow:hidden;
  white-space:normal;
  position:relative;
  padding:47vw 0 14vw 0;
  background-position:left top;
  background-size:100%;
  background-repeat:no-repeat;
}

#angebote ul li a:hover span.button {
    background-image:url('/images/button_on_hover.png');
}
#angebote ul li a.ansagen-shop {
  background-image:url('/images/button_ansagen-shop.jpg');
}
#angebote ul li a.gemafrei-shop {
  background-image:url('/images/button_gemafrei-shop.jpg');
}
#angebote ul li a.demos {
  background-image:url('/images/button_demos.jpg');
}
#angebote ul li a.ansagen-ratgeber {
  background-image:url('/images/button_tipps.jpg');
}
#angebote ul li a.preise {
  background-image:url('/images/button_preise.jpg');
}
#angebote ul li a.kundenstimmen {
  background-image:url('/images/button_kundenstimmen.jpg');
}
#angebote ul li a.filmproduktion {
  background-image:url('/images/button_filmproduktion.jpg');
}
#angebote ul li a.filmvertonung {
  background-image:url('/images/button_filmvertonung.jpg');
}
#angebote ul li a.radiowerbung {
  background-image:url('/images/button_radiowerbung.jpg');
}
#angebote ul li a.audioproduktion {
  background-image:url('/images/button_audioproduktion.jpg');
}
#angebote ul li a.blog {
  background-image:url('/images/button_blog.jpg');
}

a.shop_button {
  display:inline-block;
  margin:12px 0;
  padding:1vw 2vw 1vw 2vw;
  background-color:#FF5E28;
  border-radius:5px;
  color:#fff;
  text-align:center;
  -webkit-transition: all 0.5s 0s;
  transition: all 0.5s 0s;
  white-space:nowrap;
}

#angebote ul li a span.shop_button {
  display:block;
  position:absolute;
  bottom:5vw;
  padding:1vw 2vw 1vw 2vw;
  background-color:#FF5E28;
  border-radius:5px;
  color:#fff;
  text-align:center;
  -webkit-transition: all 0.5s 0s;
  transition: all 0.5s 0s;
  white-space:nowrap;
}
#angebote ul li a span.shop_button:hover,
a.shop_button:hover  {
  background-color:#ffd350;
  -webkit-transition: all 0.2s 0s;
  transition: all 0.2s 0s;
}
#angebote ul li a span.on_button {
  position:absolute;
  top:0vw;
  left:0vw;
  width:16vw;
  height:16vw;
  background:url('/images/button_on.png') top left no-repeat;
  background-size:cover;
  opacity:0.4;
  -webkit-transition: all 0.8s 0s;
  transition: all 0.8s 0s;
}
#angebote ul li a:hover span.on_button {
    background-image:url('/images/button_on_hover.png');
    opacity:0.8;
  -webkit-transition: all 0.2s 0s;
  transition: all 0.2s 0s;
}
.sprecherauswahl-grid {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 1rem;
}

.sprecher {
	padding: 0.5rem;
	background: #f9f9f9;
	border-radius: 6px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.sprecher:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.sprecher.weiblich { background-color: #ffe6f0; }
.sprecher.maennlich { background-color: #e6f0ff; }
.sprecher.sonstige { background-color: #e6ffe6; }

.sprecher input {
	margin-right: 0.5rem;
}

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

table.sprecherauswahl th {
  text-align:left;
  padding:1%;
  text-align:center;
}
table.sprecherauswahl td {
  text-align:left;
  padding:1%;
  font-size:3.5vw;
  text-align:center;
  vertical-align:top;
}

* div.demo {
  float:left;
  position:relative;
  width:100%;
}
* div.demo.medium {
  width:100%;
}
* div.demo.big {
  width:100%;
  padding:0 0 2vw 0;
}

* div.demo input[type=radio] {
  margin-top:0.2vw;
}
* span.play {
  position:relative;
  display:block;
  margin:0;
  padding-left:4.5vw;
  background:url('/images/icon_play.png') left 1vw no-repeat;
  background-size:4vw 4vw;
  cursor:pointer;
}
* div.demo.big span.play {
  display:inline-block;
  margin-left:2vw;
}
* span.play:hover {
  background:url('/images/icon_play_hover.png?v=1') left 4px no-repeat;
  color:#0f4b7a;
}
* span.play.active, span.play.active:hover {
  background:url('/images/icon_play_active.png?v=1') left 4px no-repeat;
  color:#a50021;
}
* span.noplay,* span.noplay:hover {
  color:#000;
  background:none;
  padding:0;
  cursor:auto;
}

* span.play.inactive {
  background:none;
  text-decoration:none;
  border:1px solid transparent;
  color:#3e3e3e;
  cursor:auto;
}

#texteingabe {
  width:100%;
  min-height:2.4vw;
  padding:0.5vw;
  margin-bottom:1vw;
  background-color:#fff;
  border:1px solid #e3e3e3;
}

#texteingabe_area {
  width:100%;
  height:7.2vw;
  padding:0.5vw;
  margin-bottom:1vw;
  border:1px solid #e3e3e3;
  resize:none;
}

input.texteingabe,
input.musikauswahl,
#spezialformat,
input.maximalsize {
  width:96%;
  margin-bottom:1vw;
}
input[type=range] {
	display:block;
	width:100%;
}

#musikauswahl {
  border:1px solid transparent;
  background-color:transparent;
}

#formatauswahl {
  width:100%;
  margin-bottom:1vw;
}

#hinweis_ansage {
  font-size:3vw;
  font-style:italic;
  margin-bottom:1.5vw;
}

#ansagenpreis {
  margin-bottom:1.5vw;
}

#musikliste,
#spezialformat,
#mailbox-daten,
article.option {
  display:none;
}

input[type=submit].submit {
  width:100%;
  margin:0 0 1vw 0;
  text-align:center;
  font-size:3.5vw;
  margin-bottom:2vw;
}

article.preise div.nebenspalte h3 {
  display:none;
}
table.preise {
  table-layout:fixed;
  width:100%;
}
table.preise td {
  vertical-align:top;
}

table.preise td.preis {
  width:50%;
  text-align:right;
}

table.warenkorb {
  table-layout:fixed;
  width:100%;
  margin-top:1.5vw;
}
table.warenkorb td {
  padding:1vw 0 1vw 0;
  vertical-align:top;
}
table.warenkorb td.liste{
  border-top:1px dotted #ccc;
}
table.warenkorb td.head,
table.warenkorb td.summe {
  font-weight:bold;
}
table.warenkorb td.lfdnr {
  width:6%;
}
table.warenkorb td.preis {
  width:20%;
  padding-left:2%;
  text-align:right;
  position:relative;
}

table.warenkorb td.preis div {
  position:absolute;
  bottom:2.5vw;
  right:0;
}
table.warenkorb td.preis div form {
  display:inline-block;
  margin-left:0.5vw;
}

table.warenkorb td.preis div form input[type=image] {
  cursor:pointer;
}

table.warenkorb h3 {
  font-weight:normal;
  margin:0;
  padding:0;
  
}
ul.zahlungsart {
  list-style-type:none;
  padding:0;
}
ul.zahlungsart li {
  display:inline-block;
  line-height:26px;
  width:30%;
}
ul.zahlungsart li img {
  margin-bottom:-.8vw;
  width:70%;
}

div.warenkorb_input {
  margin-top:1.5vw;
  width:94%;
}
div.warenkorb_input input[type=text],
div.warenkorb_input input[type=email],
div.warenkorb_input select {
  width:100%;
  margin:1vw 0 .5vw 0;
}
div.warenkorb_input input[type=text].fehler,
div.warenkorb_input input[type=email].fehler {
  border-color:red;
}

div.textauswahl {
  display:block;
  border-bottom:1px solid #ddd;
  margin-bottom:1.5vw;
}

i.platzhalter {
  background-color:#ddd;
  padding:0 1vw 0 1vw;
  color:#ff0000;
}

#ansagetext {
  border:1px solid #bbb;
  margin:1vw 0 1vw 0;
  padding:0.2vw;
  display:block;
}

div.hauptspalte.gemafrei img {
  width:20vw;
  float:left;
  margin-left:-1.5vw;
}
div.hauptspalte.gemafrei p {
  display:block;
  width:40vw;
  padding-left:18vw;
}

div.nebenspalte div.titelliste {
  margin-top:2vw;
  max-width:100%;
}

span.length {
  display:inline-block;
  float:right;
  text-align:right;
}

.shopbutton {
  margin-top:1vw;
  cursor:pointer;
}

/* Allgemein
============*/
*.rechts {
  float:right;
  margin-left:10px;
}

*.links {
  float:left;
  margin-right:10px;
}

*.zentriert {
  display:block;
  width:100%;
  text-align:center;
}

*.small {
  font-size:80%;
}

.clearfix:after {
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0px;
}

p {
  -moz-hyphens: auto;
  -o-hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

a {
  -moz-hyphens: none;
  -o-hyphens: none;
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

*.fehler {
  color:#C20000;
}

/* Kontaktformular
==================*/
#kontaktformular input,
#kontaktformular textarea {
  width:90%;
  resize:none;
  display:block;
  padding:4px;
  border:1px solid #999;
  border-radius:4px;
  margin-bottom:2vw;
}
#kontaktformular textarea {
  height:40vw;
}
div.g-recaptcha {
  margin-bottom:6px;
}

iframe.google_maps {
  width:50%;
  height:400px;
}

/* Blog
=======*/
div.vollspalte.blog {
	width:100%;
	padding:0;
}
#content article div.vollspalte.blog img {
	border-radius:16px;
}

div.vollspalte.blog h2 span.datum {
	display:block;
	font-size:2.5vw;
	font-weight:normal;
	line-height:125%;
	color:#555;
	margin-bottom:12px;
}
div.vollspalte.blog img.thumb {
	float:left;
	margin: 0 16px 16px 0;
	cursor:pointer;
}

/* Sitebrowser
==============*/
ul.sitebrowser {
  line-height:150%;
}

/* Footer
=========*/
#content footer {
  display:inline-block;
  position:absolute;
  bottom:0;
  width:96%;
  height:4vw;
  padding:2vw 2% 2vw 2%;
  background-color:#6D787C;
  left:0;
  font-size:1.5vw;
  color:#fff;
  text-align:right;
}

#content footer a {
  color:#fff;
  font-size:4vw;
  line-height:4vw;
  margin-left:2vw;
}
#content footer a:hover {
  text-decoration:underline;
}