@charset "utf-8";
@font-face {font-family:'Roboto'; src:url('../fonts/Roboto-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap;}
@font-face {font-family:'Roboto'; src:url('../fonts/Roboto-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap;}
@font-face {font-family:'Lobster'; src:url('../fonts/Lobster-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap;}

audio, canvas, video {display:block; *zoom:1;}
audio:not([controls]) {display:none}
[hidden]{display:none}

html {scroll-behavior:smooth;}
html, body {margin:0; padding:0; height:100vh; min-height:100%; font-size:100%; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; background:#fff;}
html, body, button, input, select, textarea, table {font-family:'Roboto', Arial, sans-serif; font-size:16px; line-height:24px; font-weight:400; color:#567;}
div, iframe, video, img, h1, h2, h3, h4, h5, h6, p, ul, ol, table {position:relative; display:block; box-sizing:border-box;}

*, *::before, *::after {box-sizing:border-box;outline:none;}
a {color:inherit; text-decoration:none;}
a:focus{outline:none;}
a:hover,a:active{outline:none;}

/* Firefox */
* {scrollbar-width:thin; scrollbar-color: #da2 #fff;}

/* Chrome, Edge, Safari */
*::-webkit-scrollbar {width:8px; height:8px;}
*::-webkit-scrollbar-track {width:8px; background:#fff; border-radius:8px;}
*::-webkit-scrollbar-thumb {background-color:#da2; border-radius:8px;}

p, ul, ol, table {margin-top:0; margin-bottom:24px;}
.topsprechzeiten table, .topsprechzeiten td {margin:0; padding:0; border-collapse:collapse;}
.sprechdis {display:block;}
.sprechnodis {display:none;}

table {position:relative; width:100%; padding:0; border:0 none; border-collapse:collapse; color:inherit;}
td {padding:0 20px 0 0; margin:0; vertical-align:top; text-align:left;}
td:last-child {padding:0;}
strong {font-weight:700;}

h1, h2, h3, h4, h5, h6 {font-weight:normal;}
h1, h2, h4 {font-family: 'Lobster', Arial, sans-serif; text-align:center;}
.footer h2 {text-align:left;}
h1 {font-size:48px; line-height:54px; padding:0; margin:0 0 24px;}
h2 {font-size:48px; line-height:54px; padding:0; margin:0 0 24px;}
h3 {font-size:30px; line-height:48px; padding:0; margin:0 0 24px;}
h4 {font-size:30px; line-height:42px; padding:0; margin:0 0 24px;}
h5 {font-size:24px; line-height:36px; padding:0; margin:24px 0 24px;}
h6 {font-size:20px; line-height:30px; padding:0; margin:24px 0 24px;}
strong {font-weight:700;}

.lobster {font-family: 'Lobster', Arial, sans-serif; font-size:150%;}
.logo {padding:0; margin:0; font-family: 'Lobster', Arial, sans-serif; font-size:36px; line-height:46px; float:left;}

.gold {color:#da2;}
.rosa {color:#f9c8c3;}
.blau {color:#b8deeb;}
.froh {background:#da2; color:#fff;}
.liebe {background:#f9c8c3; color:#946;}
.kreativ {background:#b8deeb;}
.dark {background:#000; color:#fff;}
.dark a, .froh a, .light, .light a {color:#fff;}

.header {margin:0; padding:20px 2% 0; height:auto; min-height:80px;}
.footer {background:#f0f2f4; color:#789}
.content {position:relative; width:92%; max-width:1000px; padding:0; margin:0 auto;}
.bigcontent {position:relative; width:92%; max-width:1400px; padding:0; margin:0 auto;}

.bigspace {padding:60px 0;}
.space {padding:20px 0;}
.halb {position:relative; width:48%; padding:0; margin:0 4% 0 0; float:left; display:inline-block;}
.drittel, .topsprechzeiten-drittel {position:relative; width:32%; padding:0; margin:0 2% 0 0; float:left; display:inline-block;}
.last {margin-right:0;}
.left {float:left;}
.right {float:right;}
.center {text-align:center;}
.clear {clear:both;}

.navi {float:right; padding:16px 0; margin:0;}
.navi li {position:relative; display:inline; list-style-type:none; padding:0; margin:0 10px;}
.navi li a {position:relative; display:inline-block; padding:0 4px; margin:0; font-weight:700; text-transform:uppercase; letter-spacing:0.1em;}

.danke {position:absolute; top:0; left:0; width:100%; height:auto; padding:40px 2% 10px; margin:0 auto;
background:rgba(221,170,34,0.9); color:#fff; font-size:36px; line-height:48px; text-align:center; z-index:1001; display:none;}

.cook {position:fixed; top:0; left:0; width:100%; height:auto; padding:30px 2% 20px; margin:0 auto;
background:rgba(0,0,0,0.9); font-size:20px; line-height:30px; color:#fff; text-align:center; z-index:1000; display:none;}

iframe {width:100%; height:590px; padding:0; margin:0; clear:both;}
video {width:100%; margin-bottom:24px;}
.videodiv {position:relative; width:100%; height:0; padding-bottom:56.25%;}
.videoframe {position:absolute; top:0; left:0; width:100%; height:100%;}

img {position:relative; padding:0; margin:0 auto; max-width:100%;}
.team {position:relative; top:0; left:0; width:auto; width:480px; height:400px; padding:0; margin:0;}
.musikkarten {text-align:center;}
.karte {position:relative; margin:10px 1%; padding:0; width:46%; display:inline-block; cursor:pointer;}
.kartennummer {position:absolute; top:0; left:0; width:100%; height:100%; padding-top:140px; margin:0; box-sizing:border-box; display:none; 
font-family: 'Lobster', Arial, sans-serif; font-size:48px; line-height:60px; text-align:center; background:rgba(221,170,34,0.9); color:#fff;}
.karte:hover .kartennummer {display:block;}

.fehlermeldung {position:absolute; top:160px; left:0px; width:100%; padding:30px; margin:0; background:rgba(0,168,254,0.9); color:#fff;}

.totop {position:fixed; bottom:10px; right:10px; width:8px; height:8px; padding:10px 20px 22px 12px; margin:0; 
text-align:center; border-radius:50%; border:8px solid #bde; background:rgba(255,255,255,0.6); z-index:100; opacity:0.8; 
 filter: alpha(opacity=80);}
.totop:hover {opacity:1;
 filter: alpha(opacity=100);}
.totop i:before, .totop i:after {content:""; position:absolute; background-color:#bde; width:8px; height:12px;}
.totop i:before {
 -ms-transform: translate(-2px, 0) rotate(45deg);
 -webkit-transform: translate(-2px, 0) rotate(45deg);
 transform: translate(-2px, 0) rotate(45deg);
}
.totop i:after {
 -ms-transform: translate(2px, 0) rotate(-45deg);
 -webkit-transform: translate(2px, 0) rotate(-45deg);
 transform: translate(2px, 0) rotate(-45deg);
}

form {margin:47px 0 0; padding:0;}
select {height:24px; border:0; padding:0 10px 2px; margin-bottom:12px;}
textarea, input.zeile {width:100%; padding:8px 15px; margin:0 auto 12px; color:#123; background:#fff; border:1px solid #ddd; border-radius:5px;
font-weight:400; font-size:14px; line-height:24px; display:inline-block; box-sizing:border-box;}
textarea {height:auto; min-height:120px; resize:vertical;}
input.zeile {height:45px;}
.zeile:focus::-webkit-input-placeholder {color:transparent;}
.zeile:focus::-moz-placeholder {color:transparent;}
.zeile:-moz-placeholder {color:transparent;}
textarea:focus::-webkit-input-placeholder {color:transparent;}
textarea:focus::-moz-placeholder {color:transparent;}
textarea:-moz-placeholder {color:transparent;}
input.honey {visibility:hidden; display:none;}

input.checky {display:none;}
input.checky + label span {position:relative; display:inline-block; margin:6px 10px 12px 0; vertical-align:middle; cursor:pointer;
width:25px; height:25px; background:#fff; border:1px solid #ddd; border-radius:5px;}
input.checky:checked + label {position:relative; cursor:pointer;}
input.checky:checked + label span {box-shadow:inset 0px 0px 0px 2px #fff; margin-bottom:12px;}
input.checky:checked + label span::after {position:absolute; left:1px; top:-1px; opacity:1; content:"✔"; color:#da2; font-size:24px; font-weight:700; text-align:center;}

fieldset {display:inline-block; width:max-content; border:0 none; vertical-align:top; margin-top:-5px;}
.container {position:relative; display:inline-block; padding:0 10px 0 30px; margin:0; cursor:pointer; vertical-align: baseline;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.container input {position:absolute; opacity:0; cursor:pointer;}
.checkmark {position:absolute; top:0; left:0; width:24px; height:24px; background-color:#eee; border-radius:50%;}
.container:hover input ~ .checkmark {background-color:#ccc;}
.container input:checked ~ .checkmark {background:#da2;}
.checkmark:after {content:""; position:absolute; display:none;}
.container input:checked ~ .checkmark:after {display:block;}
.container .checkmark:after {top:8px; left:8px; width:8px; height:8px;border-radius:50%; background:#fff;}

.button, .invertbutton {position:relative; height:auto; padding:10px 24px; margin:0 20px 24px 0; font-size:16px; line-height:24px; font-weight:700; display:inline-block;
text-decoration:none; text-align:center; border-radius:28px; cursor:pointer; width:intrinsic; width: -moz-max-content; width: -webkit-max-content;}
.button:hover, .invertbutton:hover {text-decoration:none;}

.button {color:#fff; background-color:#da2; border:0 none;}
.invertbutton {color:#123; background-color:none; border:1px solid #da2;}
.whitebutton {color:#fff; background-color:none; border:1px solid #fff;}


/*///////////// RESPONSIVE /////////////*/

@media screen and (max-width: 1400px) {
.kartennummer {padding-top:100px;}
}

@media screen and (max-width: 800px) {
h1, h2 {font-size:32px; line-height:40px;}
h3 {font-size:28px; line-height:32px;}
.danke, .cook {font-size:16px; line-height:24px;}
.halb, .drittel {width:100%; float:none; margin-left:auto;}
.navi li {margin:0 8px;}
.navi li a {font-size:14px; letter-spacing:0.05em;}
h1 br, h2 br, h3 br, h4 br, h5 br, h6 br {display:none;}
.karte {width:96%;}
.kartennummer {padding-top:140px;}
}

@media screen and (max-width: 540px) {
.logo, .navi {margin:0 auto; float:none; text-align:center;}
.logo {line-height:36px;}
.left, .right {float:none;}
.kartennummer {padding-top:100px;}
p {
-moz-hyphens: auto;
-o-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
-moz-hyphenate-limit-chars: auto 5;
-o-hyphenate-limit-chars: auto 5;
-webkit-hyphenate-limit-chars: auto 5;
-ms-hyphenate-limit-chars: auto 5;
hyphenate-limit-chars: auto 5;
-moz-hyphenate-limit-lines: 2;
-o-hyphenate-limit-lines: 2;
-webkit-hyphenate-limit-lines: 2;
-ms-hyphenate-limit-lines: 2;
hyphenate-limit-lines: 2;
}
.nohyp, a.button, .navi ul {
-moz-hyphens: none;
-o-hyphens: none;
-webkit-hyphens: none;
-ms-hyphens: none;
hyphens: none;}
}

@media screen and (max-width: 400px) {
.kartennummer {padding-top:50px;}
}