/* styles Tablet 781-1280px
=========================== */
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;
  font-size:1.2vw;
  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:20vw;
  height:auto;
}

#topbox {
  position:absolute;
  top:4vw;
  left:70vw;
  width:20vw;
  height:3vw;
  line-height:3vw;
  font-size:2vw;
  padding:0;
  overflow:hidden;
  text-align:right;
}
#topbox a {
  display:inline-block;
  color:#fff;
  text-decoration:none;
  padding-left:3vw;
  line-height:3vw;
  background:url('/images/warenkorb.png') left 0.4vw no-repeat;
  background-size:2vw 2vw;
}
#socialbuttons {
	width: auto;
	display:block;
    position:absolute;
    height:32px;
    left:calc(50% - 73px);
    top:4vw;
}
#socialbuttons a {
	float:right;
	width:32px;
	height:32px;
	filter:grayscale(1);
	margin-left:6px;
	transition: all 0.5s;
	opacity:0.3;
	border-radius:6px;
}
#socialbuttons a:hover {
	filter:grayscale(0);
	opacity:1;
}

#socialbuttons a.linkedin {
	background:url('/images/logo_linkedin.png') left top / cover no-repeat;
}
#socialbuttons a.facebook {
	background:url('/images/logo_facebook.png') left top / cover no-repeat;
}
#socialbuttons a.instagram {
	background:url('/images/logo_instagram.png') left top / cover no-repeat;
}
#socialbuttons a.youtube {
	background:url('/images/logo_youtube.png') left top / cover no-repeat;
}

/* Menü
=======*/
#showmenu {
  position:absolute;
  display:block;
  top:3vw;
  left:94vw;
  text-align:right;
  line-height:4vw;
  font-size:4vw;
}
#showmenu a span {
  color:#fff;
  font-size:24pt;
}
nav {
  display:none;
  position:absolute;
  width:30vw;
  right:5vw;
  top:7vw;
  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:400px;
  font-size:16px;
  color:#0f4b7a;
  -webkit-transition: color .1s ease-in;
  transition: color .1s ease-in;
  font-size:17px;
}

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:30px;
  left:80px;
  width:300px;
  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;
}

/* Link-Menü
============*/
#linkmenu {
display:block;
padding:0;
margin:0 0 0 0;
width:600px;
background:none;
box-shadow:none;
border:0;
font-size:14px;
}
#linkmenu a::before {
  content: '';
}
#linkmenu ul {
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns: auto auto auto;
  grid-column-gap:1vw;
  grid-row-gap:1vw;
  list-style:none;
}
#linkmenu ul li {
  width:13vw;
  display:inline-block;
  position:relative;
}
#linkmenu ul li a {
  position:absolute;
  text-decoration:none;
  color:#fff;
  display:block;
  width:12vw;
  height:3vw;
  overflow:hidden;
  white-space:normal;
  position:relative;
  padding:7vw 0.5vw 0 0.5vw;
  background-position:left top;
  background-size:13vw auto;
  background-repeat:no-repeat;
  background-color:#81A0BC;
  border-radius:6px;
  -webkit-transition: all 0.5s 0.1s;
  transition: all 0.5s 0.1s;
  font-size:1.3vw;
  line-height:100%;
}
#linkmenu ul li a:hover {
  background-color:#FF5E28;
  -webkit-transition: all 0.1s 0.0s;
  transition: all 0.1s 0.0s;
}

#linkmenu ul li a.startseite {
  background-image:url('/images/button_startseite_180px.jpg');
}
#linkmenu ul li a.ansagen-shop {
  background-image:url('/images/button_ansagen-shop_180px.jpg');
}
#linkmenu ul li a.gemafreie-musik {
  background-image:url('/images/button_gemafrei-shop_180px.jpg');
}
#linkmenu ul li a.demos {
  background-image:url('/images/button_demos_180px.jpg');
}
#linkmenu ul li a.ansagen-ratgeber {
  background-image:url('/images/button_tipps_180px.jpg');
}
#linkmenu ul li a.preise {
  background-image:url('/images/button_preise_180px.jpg');
}
#linkmenu ul li a.filmproduktion {
  background-image:url('/images/button_filmproduktion_180px.jpg');
}
#linkmenu ul li a.kundenstimmen {
  background-image:url('/images/button_kundenstimmen_180px.jpg');
}
#linkmenu ul li a.radiowerbung {
  background-image:url('/images/button_radiowerbung_180px.jpg');
}
#linkmenu ul li a.filmvertonung {
  background-image:url('/images/button_filmvertonung_180px.jpg');
}
#linkmenu ul li a.audioproduktion {
  background-image:url('/images/button_audioproduktion_180px.jpg');
}
#linkmenu ul li a.blog {
  background-image:url('/images/button_blog_180px.jpg');
}

/* 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 {
  position:relative;
  left:0;
  top:6vw;
  width:100%;
  padding:0;
  min-height:26vw;
  z-index:3;
  background-color:rgba(255,255,255,0.53);
  font-size:1.3vw;
}

#pfad {
  display:block;
  padding:2.5vw 0 2vw 0;
  color:#000;
  font-size:1vw;
  z-index:9;
}
#pfad a {
  color:#000;
}
#pfad a:hover {
  text-decoration:underline;
}
body.start #pfad {
  top:244px;
  color:#000;
}
body.start #pfad a {
  color:#000;
}

/* Content-Boxen
================*/
#top_stripe article {
  position:relative;
  width:100%;
}

#top_stripe article div {
  display:inline-block;
  width:25%;
  padding:2% 2% 0 2%;
  float:left;
}
#top_stripe article div.headerpic {
  width:42%;
  height:20vw;
  padding:0;
  margin-top:2vw;
}
#top_stripe article div.headerpic.start {
  width:69%;
  background:url('/images/startpic.jpg') left top no-repeat;
  background-size:100% 20vw;
  box-shadow: inset 0px 0px 5px 5px #D0D4DD;
}

#top_stripe article div.headernews {
  width:23%;
  height:20vw;
  min-height:20vw;
  margin:22px 0 16px 16px;
  padding:16px;
  background:#fff;
  border:1px solid #81A0BC;
  border-radius:16px;
  opacity:0.8;
  font-size:1.0vw;
  overflow:hidden;
}
#top_stripe article div.headernews.start {
  display:none;
  width:calc(100% - 68px);
  height:11vw;
  min-height:11vw;
  margin:8px 0 16px 16px;
}
#top_stripe article div.headernews h2 {
	margin-top:0;
}
#top_stripe article p {
	font-size:1.2vw;
}
#top_stripe article div.headernews p q {
  font-family:'Caveat';
  font-size:1.25vw;
  line-height:110%;
  margin-bottom:6px;
  display:block;
}

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

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

#content article {
  position:relative;
  width:96%;
  padding:2%;
  font-size:1.5vw;
  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:table-cell;
  vertical-align:top;
  border-bottom:0px solid #ddd;
}

div.hauptspalte {
  width:65%;
  padding-right:5%;
}
div.nebenspalte {
  width:30%;
  font-style:italic;
}
div.vollspalte {
  display:block;
  width:95%;
  padding-right:5%;
}

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

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

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


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

p {
  margin:0 0 1vw 0;
}

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

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

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:grid;
  grid-template-columns: auto auto auto;
  grid-column-gap:2vw;
  grid-row-gap:2vw;
  list-style:none;
}

#angebote ul li {
  width:28vw;
  display:inline-block;
  position:relative;
}

#angebote ul li a {
  position:absolute;
  text-decoration:none;
  color:#000;
  display:block;
  width:100%;
  height:calc(100% - 20vw);
  overflow:hidden;
  white-space:normal;
  position:relative;
  padding:15vw 1vw 5vw 1vw;
  background-position:left top;
  background-size:30vw;
  background-repeat:no-repeat;
  box-shadow: 5px 5px 10px #888;
}

#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_400px.jpg');
}
#angebote ul li a.gemafrei-shop {
  background-image:url('/images/button_gemafrei-shop_400px.jpg');
}
#angebote ul li a.demos {
  background-image:url('/images/button_demos_400px.jpg');
}
#angebote ul li a.ansagen-ratgeber {
  background-image:url('/images/button_tipps_400px.jpg');
}
#angebote ul li a.preise {
  background-image:url('/images/button_preise_400px.jpg');
}
#angebote ul li a.kundenstimmen {
  background-image:url('/images/button_kundenstimmen_400px.jpg');
}
#angebote ul li a.filmproduktion {
  background-image:url('/images/button_filmproduktion_400px.jpg');
}
#angebote ul li a.radiowerbung {
  background-image:url('/images/button_radiowerbung_400px.jpg');
}
#angebote ul li a.filmvertonung {
  background-image:url('/images/button_filmvertonung_400px.jpg');
}
#angebote ul li a.audioproduktion {
  background-image:url('/images/button_audioproduktion_400px.jpg');
}
#angebote ul li a.blog {
  background-image:url('/images/button_blog_400px.jpg');
}

a.shop_button {
  display:inline-block;
  margin:12px 0;
  padding:0.5vw 1vw 0.5vw 1vw;
  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;
}
a.shop_button:hover {
  background-color:#ffd350;
  -webkit-transition: all 0.2s 0s;
  transition: all 0.2s 0s;
}

#angebote ul li a span.shop_button {
  display:block;
  position:absolute;
  bottom:1vw;
  padding:0.5vw 1vw 0.5vw 1vw;
  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 {
  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:5.6vw;
  height:6vw;
  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(2, 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%;
}
table.sprecherauswahl td {
  text-align:left;
  padding:0;
  font-size:1.3vw;
  vertical-align:top;
}

* div.demo {
  float:left;
  position:relative;
  width:100%!important;
}
* div.demo.medium {
  width:100%;
}
* div.demo.big {
  width:100%;
}

* div.demo input[type=radio] {
  float:left;
  margin-top:0.2vw;
}
* span.play {
  position:relative;
  display:inline-block;
  top:-0.2vw;
  margin:0 4vw 0 0.8vw;
  padding:0 0 0 2.4vw;
  background:url('/images/icon_play.png') left 0.4vw no-repeat;
  background-size:1.5vw 1.5vw;
  cursor:pointer;
}
* 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:100%;
  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:1.5vw;
  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;
}
table.preise {
  table-layout:fixed;
  width:100%;
}

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

table.warenkorb {
  table-layout:fixed;
  width:100%;
  margin-top:1.5vw;
}
table.warenkorb td {
  padding:1vw 0 1vw;
  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:10%;
}
table.warenkorb td.preis {
  width:15%;
  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;
}

div.warenkorb_input {
  margin-top:1.5vw;
}
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:80%;
  resize:none;
  display:block;
  padding:4px;
  border:1px solid #999;
  border-radius:4px;
  margin-bottom:2vw;
}
#kontaktformular textarea {
  height:10vw;
}

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:inline-block;
	float:right;
	font-size:1vw;
	font-weight:normal;
	color:#555;
}
div.vollspalte.blog img.thumb {
	float:left;
	margin: 0 16px 0 0;
	cursor:pointer;
}

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

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

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