@charset "UTF-8";
/* paulstyle.css */

/* --------------------------------------------------
        Basic Setting          
        CSS-Eigenschaften für  mobile Geräte (kleiner als 640 px)            
       + Alles in einer Spalte untereinander anordnen                          
 ----------------------------------------------------*/

html {
	box-sizing: border-box;
}

*, *::before, *::after {
	box-sizing: inherit;
}

body {
	background-color: #f8f8ff;
	color: rgba(0, 0, 0, 0.7);
	font-family: 'Playfair Display', serif;
}
.grid {
	display: grid;
	grid-template-rows: auto;
	grid-template-columns: 100%;
}
a {
	color: #455A64;
}
a:hover {
	color: #000000;
}

/* -------- COOKIES ----------- */

.cookieConsentContainer {

	z-index: 999;

	width: 350px;

	min-height: 20px;

	box-sizing: border-box;

	padding: 30px 30px 30px 30px;

	background: #232323;

	overflow: hidden;

	position: fixed;

    bottom: 30px;

	right: 30px;

	display: none;

}

.cookieConsentContainer .cookieTitle a {

	font-family: OpenSans, arial, "sans-serif";

	color: #FFFFFF;

	font-size: 22px;

	line-height: 20px;

	display: block;

}

.cookieConsentContainer .cookieDesc p {

	margin: 0;

	padding: 0;

	font-family: OpenSans, arial, "sans-serif";

	color: #FFFFFF;

	font-size: 13px;

	line-height: 20px;

	display: block;

	margin-top: 10px;

} .cookieConsentContainer .cookieDesc a {

	font-family: OpenSans, arial, "sans-serif";

	color: #FFFFFF;

	text-decoration: underline;

}

.cookieConsentContainer .cookieButton a {

	display: inline-block;

	font-family: OpenSans, arial, "sans-serif";

	color: #FFFFFF;

	font-size: 14px;

	font-weight: bold;

	margin-top: 14px;

	background: #000000;

	box-sizing: border-box; 

	padding: 15px 24px;

	text-align: center;

	transition: background 0.3s;

}

.cookieConsentContainer .cookieButton a:hover { 

	cursor: pointer;

	background: #3E9B67;

}

@media (max-width: 980px) {

	.cookieConsentContainer {

		bottom: 0px !important;

		left: 0px !important;

		width: 100%  !important;

	}

}
/* -------- Menu ----------- */
nav {
	padding: 0 0 1rem 1.5rem;
}
nav ul {
	/* display: none; */
	position: absolute;
	left: -100%;
	background: #CFD8DC;
	list-style: none;
	padding: 1rem 1rem 1rem 0.5rem;
	-webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all 0.6s ease;
}
nav ul li a {
	color: #455A64;
	text-decoration: none;
	
	line-height: 200%;
	font-family: 'Roboto', sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: bold;
}

nav a#nav-m img, nav a.close img {
	
    width: 40px;
    height: auto;
}
nav > .close, nav a#nav-m:target {
    display: none;
}
nav a:target ~ ul, nav a:target ~ .close {
    display: block;
  }
nav a:target ~ ul {
    left: 0;
  }
  
/* ------------------------- */

.banner {
	padding: 0 0 2rem 0;
}
.language {
	position: absolute;
    right: 1em;
    top: 1em;
	font-size: 0.9em;
	color: #455A64;
}
.language-white {
	position: absolute;
    right: 1em;
    top: 1em;
	font-size: 0.9em;
	color: #ffffff;
}
a:hover.language-white {
	color: #CFD8DC;
}
h1 {
	font-size: 2.5rem;
	color: #795548;
	text-align: left;
	line-height: 120%;
	margin: 0;
	padding: 1rem 1rem 1rem 1rem;
}
h2 {
    font-family: 'Roboto', sans-serif;
	font-size: 2.0225rem;
	color: rgba(0, 0, 0, 0.7);
	text-align: left;
	line-height: 120%;
	margin: 0;
	padding: 1rem 1rem 1rem 0;
}
h3 {
	font-size: 1.618rem;
	color: #795548;
	text-align: left;
	line-height: 120%;
	margin: 0;
	padding: 1rem 1rem 1rem 0;
}
h4 {
	font-size: 1.4rem;
	color: #795548;
	text-align: left;
	line-height: 120%;
	margin: 0;
	padding: 1rem 1rem 1rem 0;
}
p {
	font-family: 'Roboto', sans-serif;
	font-size: 1.25rem;
	line-height: 130%;
}

article {
	padding: 1rem 1rem 3rem 1rem;
}
.article-pic {
	max-width: 70vw;
	padding: 1rem 0 1rem 0;
}
.article-pic-small {
	max-width: 50vw;
	padding: 1rem 0 1rem 0;
}
.article-pic2 {
	max-width: 90vw;
	padding: 1rem 0 1rem 0;
}
img.musical-notation {
	padding: 1rem 0 4rem 0;
}
.vita a {
	color: #BDBDBD;
}
.unorderedlist {
	margin: 0;
	padding: 0 0 3rem 1rem;
}
.unorderedlist li {
	font-family: 'Roboto', sans-serif;
	font-size: 1.25rem;
	line-height: 120%;
	list-style-type: disc;
}
li {
	padding: 0.5rem 0 0.5rem 0;
}
.orderedlist {
	margin: 0;
	padding: 0 0 3rem 1rem;
}
.orderedlist li {
	font-family: 'Roboto', sans-serif;
	font-size: 1.25rem;
	color: #795548;
	text-align: justify;
	line-height: 120%;
	list-style-type: lower-latin;
}
.free-trial {
	font-size: 1.5rem;
}
.paragraph {
	padding: 2rem 0 2rem 0;
}
.paragraph i {
	font-size: 3rem;
}
.specialist {
	padding: 0 0 3rem 0;
}
.price-table {
	padding: 0 0 6rem 0;
}
table {
	font-size: 0.9rem;
	width: 100%;
	border-collapse: collapse;
}
th {
	padding: 1.5rem;
	font-family: 'Playfair Display', sans-serif;	
	font-weight: bold;
	font-size: 1.2rem;
	letter-spacing: 0.05em;
	text-align: left;
	background: #f8f8ff;
}
tr:nth-child(odd) {
	background: #CFD8DC;
}
td {
	padding: 0.5rem 0.5rem 0.5rem 1.5rem;
	border-top: 0;
	border-right: 1px solid #BDBDBD;
	border-bottom: 0;
	border-left: 0;
}
td:nth-child(even) {
	border: 0;
}
tr.paypal-table {
	background: #f8f8ff;
}
.cards {
	padding: 2rem 0 0 0;
}

/* -------- Trial Lesson Formular ----------- */

form {
	font-family: 'Roboto', sans-serif;
	padding: 3rem 0 0 0;
}
/* Beschriftung über Eingabefelder */
/* label { display: block; } */
/* Bechriftung neben Eingabefelder */
label {
	max-width: 8em;
	display: block;
	text-align: left;
}
input { width: 20em; }
textarea { 
   width: 22em;
   font-family: Georgia, Verdana, sans-serif;
   font-size: 0.9em;
}
form div { padding: 0.2em; }

label:first-child {
	  vertical-align: top;
}
input[type="submit"] {
	margin-left: 0;
}
input[type="submit"], input[type="reset"] {
	width: 8em;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	background: #BDBDBD;
	border: 2px solid #6c6c6c; 
}

/* Stylen */
fieldset {
	max-width: 66.66%;
	padding-top: 2em;
	padding-left: 1em;
	background: #CFD8DC;
	border: 1px solid #000330;
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
legend {
	color: #795548;
	font-family: 'Playfair Display', sans-serif;
	font-size: 1.25rem;
	line-height: 130%;
	background: #f8f8ff;
	padding: 1em;
	border: 1px solid #000330;
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

 input:hover, textarea:hover {
  background: #fffff0;
  border: 2px solid #efe816; 
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
input[type="submit"]:hover, input[type="reset"]:hover {
  background:#c9c9c9;
  border: 2px solid #6c6c6c; 
}
input[type="submit"]:active, input[type="reset"]:active {
  background:#8f8f8f;
}
input[type='email']:required + label::after{ color: red; content: " ⨉"; }
input[type='email']:valid + label::after{
  color: green;
  content: " ✓"; 
 }

/* ------------------------- */

.paypal-button {
	width: 9rem;
	padding: 0 0 0 1.5rem;
}
.buy {
	padding: 1rem 0 0 0;
}
video {
	max-width: 80vw;
	padding: 1rem 0 1rem 0;
}
.video {
	width: 380px;
	height: 249px;
}
aside {
    background-color: #212121;
    color: rgba(248, 248, 255, 0.9);
	padding: 1rem 1rem 3rem 1rem;
}
.footer {
	padding: 2rem 0 1rem 0;
    background-color: #CFD8DC;
}
.socialmedia {
	font-size: 2rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;	
	padding: 0 0 1.5rem 0;
}
.baseline {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	padding: 1rem 0 0 0;
	border-top: 0.1em solid #BDBDBD;
	line-height: 170%;
	padding: 1rem 0.5rem 0 0.5rem;
}
.copyright {
	font-size: 0.85rem;
	padding: 1rem 0.5rem 0 0.5rem;
}

/*-----------------------------------------------------   
     Tabletversion ab 640 Pixel                          
       640px / 16px/em = 40em  
------------------------------------------------------*/
@media screen and (min-width: 40em) {
	
	html::before {
 		 content: ' ';
 		 background-size: 0%;
	}
	.grid {
		display: grid;
		grid-template-rows: auto auto auto auto auto;
		grid-template-columns: 10% 40% 40% 10%;
	}
	
	nav {
		grid-column-start: 1;
		grid-column-end: 5;
		grid-row-start: 1;
		grid-row-end: 2;
	}
	header {
		grid-column-start: 1;
		grid-column-end: 5;
		grid-row-start: 2;
		grid-row-end: 3;
	}
	.banner {
		width: 100vw;
	}
	h1 {	
		text-align: center;
	}
	article {
		grid-column-start: 2;
		grid-column-end: 4;
		grid-row-start: 3;
		grid-row-end: 4;
	}
	.article-pic {
		max-width: 75%;
	}
	.article-pic-small {
		max-width: 50%;
	}
	.article-pic2 {
		max-width:90%;
	}
	fieldset {
		max-width: 50%;
	}
	.webvideo {
		width: 80%;
	}
	aside {
		grid-column-start: 2;
		grid-column-end: 4;
		grid-row-start: 4;
		grid-row-end: 5;
	}
	footer {
		grid-column-start: 1;
		grid-column-end: 5;
		grid-row-start: 5;
		grid-row-end: 6;
	}
	
}

/*------------------------------------------------------------------
    Bildschirme ab 1024 Pixel                         
      1024px / 16px/em = 64em	
 ------------------------------------------------------------------- */
 @media screen and (min-width: 64em) {
 	.grid {
		display: grid;
		grid-template-rows: auto auto auto auto auto;
		grid-template-columns: 16.66% 16.66% 16.66% 16.66% 16.66% 16.66%;
	}
	nav {
		grid-column-start: 2;
		grid-column-end: 6;
		grid-row-start: 1;
		grid-row-end: 2;
	}
	header {
		grid-column-start: 2;
		grid-column-end: 6;
		grid-row-start: 2;
		grid-row-end: 3;
	}
	.banner {
		width: 66.66vw;
	}
	h1 {	
		text-align: left;
	}
	article {
		grid-column-start: 2;
		grid-column-end: 6;
		grid-row-start: 3;
		grid-row-end: 4;
	}
	.article-pic {
		max-width: 45vw;
	}
	fieldset {
		max-width: 16.66%;
	}
	.video {
		width: 560px;
		height: 315px;
	}
	.webvideo {
		width: 75%;
	}
	aside {
		grid-column-start: 2;
		grid-column-end: 6;
		grid-row-start: 4;
		grid-row-end: 5;
	}
	footer {
		grid-column-start: 2;
		grid-column-end: 6;
		grid-row-start: 5;
		grid-row-end: 6;
	}
}