@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Medium.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

body{margin:0 auto;padding:0;font-family: 'Open Sans', sans-serif;
    font-weight: 400;background:#000 url(bg.gif) top center repeat-y;color:#222}

#wrap{background:#eceaea;color:#4f4e4e;margin:0 auto;width:980px}
#header{clear:both;margin:20px 0 0;padding:0;height:15px;background:#570303}
#header h1{width:550px;margin:0 0 10px;float:left}
#header p{width:500px;float:right;text-align:center;color:#a0a0a0;margin:0 0 10px;font-size:.8em;line-height:1.2em;background-color:inherit}
#frontphoto{margin:0 0 10px;border:0}
#avmenu{clear:left;float:left;width:200px;margin:0 0 10px;padding:0;font-size:.9em}
#avmenu ul{list-style:none;width:150px;margin:0 0 600px;padding:0;font-size:1.1em}
#avmenu li{margin-bottom:4px}
#avmenu li a{font-weight:700;height:20px;text-decoration:none;color:#fff;display:block;padding:6px 0 0 10px;background:#550101;border-left:4px solid #8e0101}
#avmenu li a:hover{background:#eaeaea;color:#286ea0;border-left:4px solid #286ea0}
.announce{margin:10px 0 100px;padding:10px;width:130px;color:#505050;background-color:#f4f4f4;line-height:1.3em}
#extras{float:right;width:180px;margin:15px 20px 10px 0;padding:0;font-size:.85em;line-height:1.5em}
#extras p{margin:0 0 1.5em}
#extras ul{list-style-image:url(li.gif);margin:0 0 10px -5px;padding:0}
#extras ul li{list-style-image:url(li.gif);border-bottom:1px solid #ccc;padding:.2em 0 1em .5em;font-weight:700;color:#ae0606}
#extras ul li:hover{cursor:pointer;list-style-image:url(li.gif);background-color:#fff;color:#000}
#extras a{color:#ae0606;text-decoration:none;}
#content{margin:15px 230px 20px 220px;border-right:1px solid #cbcacb;padding:0 20px 0 10px;font-size: 0.9375em;line-height:1.6em;text-align:left;color:#222;}
#content p {
margin-bottom: 0.6em;
}
#content em {
    font-family: 'Open Sans', sans-serif;
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0.02em;
}

.programm-link {
    display: block;
    color: #222;
    text-decoration: none;
}

.programm-link strong {display: block;
    color: #ae0606;
}

.programm-link span {
    display: block;
    color: #222;font-weight:600;hyphens:auto;
}

.programm-link:hover strong {
    color: #c94f4f;
}
#content h1{font-size:1.5em;line-height:1.7em;margin:0 0 40px 30px}
#content h2{font-size:1.4em;line-height:1.45em;margin:30px 0 1em;color:#ae0606}
#content h3{font-size:1.15em;margin:5px 0 1.5em;color:#333;font-family:}
#content h4{font-size:1em;line-height:1.45em;color:#6d6d6d}
#content hr{background-color:#cbcacb;border:none;height:1px}
.av{font-weight:700;color:#610000;}
.musiker{margin-top:-20px;font-weight:700;}
#content a.hp:link{text-decoration:none;font-weight:700}
.ausz{font-weight:700}
#content img{padding:1px;display:inline;color:#303030;border:0;´shadow:0 2px 6px -6px #888}
#content ul{list-style:block;margin:0 0 0 10px;padding:0}
#content li{margin-bottom:4px;line-height:1.6em}
h3{font-size:1.3em;margin:0 0 10px}
a{text-decoration:underline;color:#286ea0}
a:hover{text-decoration:underline;color:#286ea0}
a img{border:0}
blockquote{background:#fff;padding:0px 15px 10px 10px;border:2px solid #d8e0dd;margin: 1rem auto;}
.pre{font-size:1em;font-weight:700;line-height:2em;background:#9aa29a;padding:6px;color:#fff;}
.no{font-weight:400;color:#6d6d6d}
#footer{clear:both;margin:0 auto;padding:20px 0;border-top:1px solid #d7d5d5;border-bottom:10px solid #570303;text-align:center;color:gray;font-size:.8em}
#footer a{color:gray;text-decoration:none}
#footer a:hover{text-decoration:underline}
.left{margin:10px 10px 5px 0;float:left}
.right{margin:10px 0 5px 10px;float:right}
.textright{text-align:right}
.center{text-align:center}
.small{font-size:.8em}
.bold{font-weight:700}
.hide{display:none}
a.button{cursor:pointer;color:#fff;line-height:13px;font-size:12px;font-weight:700;margin:5px 0 0;background:#3F3F3F;border:1px solid #a4a5a7;-webkit-border-radius:4px;-moz-border-radius:4px;-khtml-border-radius:4px;border-radius:4px;display:inline-block;text-decoration:none;padding:3px;background:#9caa4c;box-shadow:0 3px 6px -2px rgba(104,123,144,0.71)}
a.button:hover{background:#666}
#neu{background:#fff;padding:12px 30px 20px 30px;box-shadow:0 4px 8px 1px rgba(104,123,144,0.71);border:2px solid rgba(174,6,6,0.6);margin:20px 20px 30px 0}
#neu1{background:#fff;padding:12px 20px 0 20px;box-shadow:0 4px 8px 1px rgba(104,123,144,0.71);border:2px solid rgba(148,147,148,0.6);margin:20px 0 60px 0}
#neu-bio{background:#fff;padding:12px 40px 0 40px;box-shadow:0 4px 8px 1px rgba(104,123,144,0.71);border:0px solid rgba(148,147,148,0.6);margin:0px 0 60px 0}
#neu-kon{background:#fff;padding:12px 40px 40px 40px;box-shadow:0 4px 8px 1px rgba(104,123,144,0.71);border:0px solid rgba(148,147,148,0.6);margin:0px 0 60px 0}
#neu-konz{background:#888;padding:12px 30px 0 30px;box-shadow:0 4px 8px 1px rgba(104,123,144,0.71);border:0px solid rgba(148,147,148,0.6);margin:0px 0 60px 0;color:#fff;}
#neu-konz hr{background-color:#fff;border:none;height:1px}


p{hyphens: auto;}
.box {float: left;width: 25%;padding: 0px;
     background: #eee;
     box-sizing: border-box;}
.kobox{border:1px solid #7a1817;padding:0px 10px 10px 10px;margin:30px 0 0 0; max-width:360px}

.textbox {
  border: 2px solid #ae0606;
  border-radius: 5px;
  padding: 0px 5px 10px 10px;
  box-shadow: 8px 10px 8px rgba(0, 0, 0, 0.08);
  background: #fff;max-width:360px
}

.btn {
    display: inline-block;text-decoration:none;padding: 6px 12px;
    margin: -20px 2px 12px 0;
    font-size: 14px;
    color: #fff;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: noneuser-select: none;
    background: #ae0606;
    border: 1px solid transparent;
    border-radius: 4px;
}
/* Weiterlesen – auf- und zuklappbarer Bereich */

details {
    margin: 1.5em 0;
}

/* "Weiterlesen" */
details summary {
    display: inline-block;
    cursor: pointer;
    color: #286ea0;
    font-weight: bold;
    list-style: none;
    padding: 0.15em 0;
    transition: color 0.2s ease;
}

/* Standard-Pfeil entfernen */
details summary::-webkit-details-marker {
    display: none;
}

/* Text von <summary> ausblenden */
details summary {
    font-size: 0;
}

/* Geschlossener Zustand */
details summary::before {
    content: "Weiterlesen";
    font-size: 1rem;
}

details summary::after {
    content: "  ›";
    font-size: 1.1rem;
}

/* Geöffneter Zustand */
details[open] summary::before {
    content: "Weniger anzeigen";
}

details[open] summary::after {
    content: "  ‹";
}

/* Hover */
details summary:hover {
    color: #d94f4f;
}

details summary:hover::after {
    margin-left: 0.2em;
}

/* Abstand zwischen "Weniger anzeigen" und Text */
details[open] summary {
    margin-bottom: 1em;
}

/* Text innerhalb des geöffneten Bereichs */
details .weiterlesen-text p {
    margin-bottom: 1.2em;
}
#cssmenu a.active {
   color: #eeeeee;
  background: #ae0606;
  background: -webkit-linear-gradient(#550303, #000000);
  background: -moz-linear-gradient(#550303, #000000);
  background: -o-linear-gradient(#550303, #000000);
  background: -ms-linear-gradient(#550303, #000000);
  background: linear-gradient(#550303, #000000);
}

/* =========================================================
   RESPONSIVE LAYOUT – neue-programme.html
   ========================================================= */
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
#wrap { width:100%; max-width:1400px; margin:0 auto; }
#content { min-width:0; max-width:100%; overflow-wrap:break-word; }
#content img { max-width:100%; height:auto; }
#content p, #content li, #content a, #content blockquote { overflow-wrap:break-word; word-wrap:break-word; }
@media screen and (min-width:1001px) {
 #wrap { display:grid; grid-template-columns:210px minmax(0,1fr) 220px; grid-template-areas:"header header header" "photo photo photo" "menu content extras" "footer footer footer"; column-gap:30px; }
 #header{grid-area:header} #frontphoto{grid-area:photo;width:100%;height:auto}
 #cssmenu{grid-area:menu;width:210px!important;max-width:210px;float:none!important}
 #content{grid-area:content;margin:15px 0 20px 0!important;padding:0 20px 0 10px;border-right:1px solid #cbcacb}
 #extras{grid-area:extras;width:220px!important;margin:15px 0 10px 0!important;float:none!important}
 #footer{grid-area:footer}
}
@media screen and (max-width:1000px) and (min-width:701px) {
 #wrap{width:calc(100% - 30px);display:grid;grid-template-columns:175px minmax(0,1fr);grid-template-areas:"header header" "photo photo" "menu content" "extras extras" "footer footer";column-gap:20px}
 #cssmenu{grid-area:menu;width:175px!important;max-width:175px;float:none!important}
 #content{grid-area:content;width:auto!important;margin:15px 0 20px 0!important;padding:0 10px}
 #extras{grid-area:extras;width:100%!important;margin:30px 0 20px 0!important;padding-top:20px;border-top:2px solid #ddd;float:none!important}
}
@media screen and (max-width:700px) {
 #wrap{width:calc(100% - 20px);display:grid;grid-template-columns:1fr;grid-template-areas:"header" "photo" "menu" "extras" "content" "footer"}
 #cssmenu{grid-area:menu;width:100%!important;max-width:320px;float:none!important;margin-bottom:25px}
 #content{grid-area:content;width:100%!important;max-width:100%;margin:15px 0 35px 0!important;padding:0;border-right:0}
 #extras{grid-area:extras;width:100%!important;max-width:100%;margin:0 0 30px 0!important;padding-top:20px;border-top:2px solid #ddd;float:none!important}
 #content img{max-width:100%;height:auto}
 #content img[style*="float:right"],#content img[style*="float:left"]{float:none!important;display:block;width:auto!important;max-width:100%;height:auto!important;margin:15px auto!important;padding:0!important}
 .responsive-video{width:100%;max-width:100%}.responsive-video iframe{width:100%!important;max-width:100%}
 #content h1{font-size:1.8em;line-height:1.2em} #content h2{font-size:1.45em;line-height:1.3em} #content h3{font-size:1.1em;line-height:1.3em} #content p{line-height:1.55em}
}
@media screen and (max-width:480px){#wrap{width:calc(100% - 16px)}#cssmenu{max-width:300px}#content{font-size:.95em}}