/* latin */
@font-face {
  font-family: 'Asap';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 75% 125%;
  src: url('../fonts/KFOmCniXp96ayz4u4mxK.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Asap';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 75% 125%;
  src: url('../fonts/KFOoCniXp96ayzse4A.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'claire_handregular';
    src: url('../fonts/clairehandregular-webfont.eot');
    src: url('../fonts/clairehandregular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/clairehandregular-webfont.woff2') format('woff2'), url('../fonts/clairehandregular-webfont.woff') format('woff'), url('../fonts/clairehandregular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


:root {
    --text-font-family: "Asap", Roboto, sans-serif;
    --bold-font-family: "Asap", Roboto, sans-serif;
    --h1-font-family: "claire_handregular", Roboto, sans-serif;
    --text-weight-normal: 400;
    --text-weight-medium: 550;
    --text-weight-bold: 620;

    --wdth-normal: 100;
    --wdth-narrow: 80;
    --wdth: var(--wdth-normal);
    --ital: 0;
}

* {
    font-variation-settings: "wdth" var(--wdth), "ital" var(--ital);
    font-optical-sizing: auto;
    font-kerning: normal;
    font-feature-settings:
        'hlig' on, 
        'salt' on,
        'swsh' off,
        'hist' off,
        'ss01' off,
        'ss02' off,
        'ss03' off,
        'ss04' off,
        'ss05' off,
        'ss06' off,
        'ss07' off,
        'ss08' off,
        'ss11' off,
        'onum' on, 
        'pnum' on, 
        'liga' on,
        'calt' on,
        'kern' on;
}


.row {
    max-width: 1280px;
}

.wide-wrapper .row {
    max-width: 1500px;
}

.contain-to-grid .top-bar {
    max-width: 1280px;
}


body * {
    font-family: var(--text-font-family);
}

p {
    margin-bottom: 1em;
}

a {
    --wdth: var(--wdth-narrow);
    font-family: var(--bold-font-family);
    font-weight: var(--text-weight-medium);
    color: #BA3894;
}

a.headlinelink:hover h1,
a.headlinelink:hover h2,
a.headlinelink:hover h3,
a.headlinelink:hover h4,
a.headlinelink:hover h5 {
    color: #BA3894;
}

a:hover {
    color: #73BF1C;
}

strong,
b {
    --wdth: var(--wdth-narrow);
    font-family: var(--bold-font-family);
    font-weight: var(--text-weight-medium);
}
i, em {
    --ital: 1;
}


.wide-wrapper {
    font-size: 26px;
}

.wide-wrapper .column,
.wide-wrapper .columns {
    padding-left: 15px;
    padding-right: 15px;
}

.button {
    --wdth: var(--wdth-narrow);
    font-family: var(--bold-font-family);
    font-weight: var(--text-weight-medium);
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.button.small {
    font-size: .9em;
}

.polster {
    /*margin: 2em 0;*/
    /*padding: 2em 0;*/
}

.spalte__grey,
.balken.grau,
.color.grey,
.panel.grey,
.button.grey,
.color.grau,
.panel.grau,
.button.grau {
    background-color: #ddd;
    color: #333;
}

.spalte__green,
.balken.green,
.wide-wrapper.green,
.color.green,
.panel.green,
.button.green {
    background-color: #73BF1C;
    color: #fff;
}

.spalte__orange,
.balken.orange,
.wide-wrapper.orange,
.color.orange,
.panel.orange,
.button.orange {
    background-color: #f47216;
    color: #fff!important;
}

.spalte__magenta,
.balken.magenta,
.wide-wrapper.magenta,
.color.magenta,
.panel.magenta,
.button.magenta {
    background-color: #BA3894;
    color: #fff;
}

.spalte__yellow,
.balken.yellow,
.wide-wrapper.yellow,
.color.yellow,
.panel.yellow,
.button.yellow {
    color: #333!important;
    background-color: #FFE835;
}

.color.green:hover,
.button.green:hover {
    background-color: #6DCC00;
    color: #fff;
}

.color.orange:hover,
.button.orange:hover {
    background-color: #FF790A;
}

.color.magenta:hover,
.button.magenta:hover {
    background-color: #BA0786;
}

.color.yellow:hover,
.button.yellow:hover {
    color: #333!important;
    background-color: #FFE300;
}

.panel.yellow p {
    color: #333;
}

.panel.magenta p,
.panel.orange p,
.panel.green p,
.panel.magenta h1,
.panel.orange h1,
.panel.green h1,
.panel.magenta h2,
.panel.orange h2,
.panel.green h2,
.panel.magenta h3,
.panel.orange h3,
.panel.green h3,
.panel.magenta h4,
.panel.orange h4,
.panel.green h4 {
    color: #fff;
}

.color.orange a,
.panel.orange a,
.button.orange a {
    color: #fff!important;
}

.color.grau > a,
.panel.grau > a,
.button.grau > a {
    color: #333!important;
}

.panel {
    border: none;
}

span.orange,
p.orange > strong {
    --wdth: var(--wdth-narrow);
    font-family: var(--bold-font-family);
    font-weight: var(--text-weight-medium);
    color: #f47216;
}

span.magenta,
p.magenta > strong {
    --wdth: var(--wdth-narrow);
    font-family: var(--bold-font-family);
    font-weight: var(--text-weight-medium);
    color: #BA3894;
}

span.green,
p.green > strong {
    --wdth: var(--wdth-narrow);
    font-family: var(--bold-font-family);
    font-weight: var(--text-weight-medium);
    color: #73BF1C;
}

.knopf {
    margin-bottom: 2em;
}

@keyframes slideIn {
    0% {
        transform: translate(5rem, 9rem) scale(.3) rotate(-8deg) ;
        opacity: 0
    }
    70% {
        transform: translate(6rem, 9rem) scale(0) rotate(-20deg);
        opacity: 0
    }
    100% {
        transform: translate(5rem, 9rem) scale(1.6) rotate(-8deg);
        opacity: 1;
    }
}

.stoerer-static {
    width: 100%;
    color: white!important;
    text-align: center;
    margin: auto;
    padding: 0em 0.5em;
    --wdth: var(--wdth-narrow);
    font-family: var(--bold-font-family);
    font-weight: var(--text-weight-medium);
    transform: rotate3d(0, 0, 1, -2deg) ;
    margin-top: 0.2em;
    margin-bottom: 0;
}

.stoerer-static p.stoererheadline {
    line-height: 2em;
    color: white;
    padding: 0em;
    margin: 0 0 0.4em 0;
    font-weight: var(--text-weight-bold);
    font-size: 1.5em;
}
.stoerer-static p.stoererheadline .highlight {
    font-size: 1.5em;
    background: #73BF1C;
    padding-top: 0.1em;
    padding-bottom: 0.1em;
}

.stoerer-static p.stoerertext {
    color: white;
}
.stoerer-static p.stoerertext .highlight{
    background: #BA3894;
    padding-top: 0.25em;
    padding-bottom: 0.25em;
}

.stoerer {
    animation: slideIn 1s 1 cubic-bezier(.68,1.92,.55,.7);
    position: absolute;
    top: 0%;
    left: 60%;
    font-size: 1em;
    overflow: visible;
    z-index: 1;
    max-width: 18em;
    transform: translate(5rem, 9rem) scale(1.6) rotate(-8deg) translate3d(0,0,0);
    transition: transform .75s cubic-bezier(.32,1.37,.68,1);
    text-align: center;
    -webkit-font-smoothing: subpixel-antialiased;
}
.scrolled .stoerer {
    transform: translate(-30rem, -1rem) scale(0) rotate(-300deg) translate3d( 0, 0, 0);
    opacity: 0;
    transition: transform .5s ease-in, opacity .5s ease-in;
}

.stoerer .highlight, .stoerer-static .highlight {
    display: inline;
    -webkit-box-decoration-break: clone;
    -ms-box-decoration-break: clone;
    -o-box-decoration-break: clone;
    box-decoration-break: clone;
    padding-right: 0.5em;
    padding-left: 0.5em;
    background: #73BF1C;
    padding-top: 0.1em;
    padding-bottom: 0.1em;
}

.stoerer p.stoererheadline {
    font-size: 1.4em;
    line-height: 0.5em;
    color: white;
    padding: 0em;
    margin: 0;
    line-height: 1.5em;
    font-weight: var(--text-weight-bold);
}

.stoerer p.stoererheadline .highlight {
    font-size: 1em;
    background: #73BF1C;
    padding-top: 0.1em;
    padding-bottom: 0.1em;
}

.stoerer p.stoerertext {
    --wdth: var(--wdth-narrow);
    font-family: var(--bold-font-family);
    font-weight: var(--text-weight-medium);
    font-size: 0.8em;
    color: white;
    padding: 0;
    margin: 0;
}

.stoerer p.stoerertext .highlight{
    background: #BA3894;
    padding-top: 0.25em;
    padding-bottom: 0.25em;
}

.stoerer p.stoerertext::before {
    content: "\A";
    white-space: pre;
}

.Overlay-buttons {
    font-size: 1em;
    position: absolute;
    bottom: -1%;
    /*max-width: 1000px;*/
    max-width:1280px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
}

.Overlay-buttons .button:hover,
.button:hover,
.overlay-solo .button:hover,
.button:hover {
    -webkit-box-shadow: 0px 10px 20px -5px rgba(0, 0, 50, .5);
    -moz-box-shadow: 0px 10px 20px -5px rgba(0, 0, 50, .5);
    -ms-box-shadow: 0px 10px 20px -5px rgba(0, 0, 50, .5);
    -o-box-shadow: 0px 10px 20px -5px rgba(0, 0, 50, .5);
    box-shadow: 0px 10px 20px -5px rgba(0, 0, 50, .5);
    -webkit-transition: all .1s ease-out;
    -moz-transition: all .1s ease-out;
    -ms-transition: all .1s ease-out;
    -o-transition: all .1s ease-out;
    transition: all .1s ease-out;
    -webkit-transform: translate(0px, -3px);
    -moz-transform: translate(0px, -3px);
    -ms-transform: translate(0px, -3px);
    -o-transform: translate(0px, -3px);
    transform: translate(0px, -3px);
}

.Overlay-buttons .button,
.overlay-solo .button {
    font-family: var(--text-font-family);
    font-size: 0.7em;
    letter-spacing: 0px;
    padding: 0.5em;
    -webkit-transition: all .4s ease-in;
    -moz-transition: all .4s ease-in;
    -ms-transition: all .4s ease-in;
    -o-transition: all .4s ease-in;
    transition: all .4s ease-in;
}

.overlay-solo {
    margin-bottom: 0;
}

p,
li {
    font-family: var(--text-font-family);
    font-size: 1em;
    line-height: 1.4em;
}

h1,
h2,
h3 {
    --wdth: var(--wdth-narrow);
    font-family: var(--bold-font-family);
    font-weight: var(--text-weight-bold);
    color: #73BF1C;
}

h1 {
    font-family: var(--h1-font-family);
    font-weight: 300;
    font-size: 2.7em;
    color: #f47216;
    margin-top: 1.3em;
    margin-bottom: 1em;
}

.balken.orange h1 {
    color: #fff;
}

h2 {
    font-size: 1.75em;
    margin-top: 1.5em;
    margin-bottom: 1em;
}

h3 {
    font-size: 1.2em;
    margin-bottom: 0.7em;
}

h4 {
    font-size: 1em;
    margin-bottom: 0.7em;
}

h4,
h5,
h6 {
    --wdth: var(--wdth-narrow);
    font-family: var(--bold-font-family);
    font-weight: var(--text-weight-bold);
    color: #73BF1C;
}

h1.centered,
h2.centered,
h3.centered,
h4.centered,
h5.centered,
h6.centered {
    text-align: center;
}

footer h1 {
    font-family: var(--text-font-family);
    font-size: 0.8em;
    color: #E7EEE6;
    border-bottom: 1px solid #4E5454;
    padding-bottom: 0.5em;
    margin-bottom: 0.5em;
    text-transform: uppercase;
    letter-spacing: 1.5px
}

.Termin-Item h1 {
    --wdth: var(--wdth-narrow);
    font-family: var(--bold-font-family);
    font-weight: var(--text-weight-medium);
    font-size: 1.3em;
    margin-top: -4px;
    line-height: 1.2em;
}

.Termin-Item h2 {
    font-size: 1.1em;
    margin-top: -0.6em;
}

.cancelled {
    text-decoration: line-through;
}

.cancel {
    --wdth: var(--wdth-narrow);
    display: inline-block;
    font-family: var(--bold-font-family);
    font-weight: var(--text-weight-bold);
    color: #BA3894!important;
    background-color: #fff;
    border: .2em solid currentcolor;
    padding: 0.1em 1em;
    box-shadow: 0 0.2em 0.6em rgba(0, 0, 0, .5);
    transform: rotate(-3deg) translate(3em, -0.6em);
}

.ausverkauft,
.extra,
.restkarten {
    --wdth: var(--wdth-narrow);
    display: inline-block;
    font-family: var(--bold-font-family);
    font-weight: var(--text-weight-bold);
    color: #BA3894!important;
    text-transform: uppercase;
}

.restkarten {
    text-transform: none;
}

.outofthebox .ausverkauft,
.outofthebox .restkarten,
.outofthebox .extra {
    color: #FFFFBF!important;
}

#main .Termin-Item h3 {
    font-size: 0.9em;
    margin-top: -5px;
    color: #BA3894;
}

#main .Termin-Item img {
    margin-bottom: 1em;
}

.Termin-Item.small {
    margin-bottom: 1em;
}

.Termin-Item .infobox p {
    --wdth: var(--wdth-narrow);
    margin-bottom: 0;
    font-family: var(--bold-font-family);
    font-weight: var(--text-weight-medium);
    padding-left: 7px;
    line-height: 1.6em;
    color: #fff;
}

.Termin-Item .infobox p.Wochentag {
    --wdth: var(--wdth-narrow);
    font-family: var(--bold-font-family);
    font-weight: var(--text-weight-bold);
    font-size: 2em;
    margin-bottom: -0.3em;
    padding-top: 0;
}

.Termin-Item .infobox p.Datum {
    font-size: 1.3em;
    margin-top: -0.7em;
}

.Termin-Item .infobox p.Zeit {
    font-weight: var(--text-weight-medium);
    line-height: 1.2em;
    margin-bottom: 1em;
    margin-top: -0.3em;
}

.Kinderprogramm .infobox,
.colorblock.Kinderprogramm,
.Kinderprogramm .colorcolumn {
    background-color: #eee;
}

.Kinderprogramm.WE .infobox,
.Kinderprogramm.WE .colorcolumn {
    background-color: #ccc;
}

.colorblock.alles {
background: rgb(238,238,238);
background: linear-gradient(135deg, 
  rgba(238,238,238,1) 0%, 
  rgba(238,238,238,1) 25%, 
  rgba(204,204,204,1) 25%, 
  rgba(204,204,204,1) 50%, 
  #FFE835 50%, 
  #FFE835 75%, 
  #BA3894 75%, 
  #BA3894 100%);
}

.colorblock.Kinderprogramm {
background: rgb(238,238,238);
background: linear-gradient(135deg, rgba(238,238,238,1) 0%, rgba(238,238,238,1) 50%, rgba(204,204,204,1) 50%, rgba(204,204,204,1) 100%);}

.Erwachsenenprogramm .infobox,
.colorblock.Erwachsenenprogramm,
.Erwachsenenprogramm .colorcolumn {
    background-color: #FFE835;
}

.Familienprogramm .infobox,
.colorblock.Familienprogramm,
.Familienprogramm .colorcolumn {
    background-color: #73BF1C;
}

.Zu_Gast .infobox,
.colorblock.Zu_Gast,
.Zu_Gast .colorcolumn {
    background-color: #e49acf;
}

.outofthebox .infobox,
.colorblock.outofthebox,
.outofthebox .colorcolumn {
    background-color: #BA3894;
}

.Zu_Gast .infobox * {
    color: #535400!important;
}
.Sommerbuehne .infobox * {
    color: #000000!important
}

article.Repertoire-Item h3 {
    --wdth: var(--wdth-narrow);
    font-family: var(--bold-font-family);
    font-weight: var(--text-weight-medium);
    color: #BA3894;
}

article.Repertoire-Item a.www-link {
    text-decoration: none;
    font-family: inherit;
    color: inherit;
    color: #BA3894;
}

article.Repertoire-Item h1 {
    font-family: "claire_handregular", sans-serif!important;
    margin-top: -.25em;
    margin-bottom: 0.5em;
}

article.Repertoire-Item h1 a {
    font-family: "claire_handregular", sans-serif!important;
    color: #f47216!important;
}

article.Repertoire-Item h2 {
    margin-top: -.5em;
}

footer {
    margin-top: 3em;
    padding-top: 3em;
    padding-bottom: 3em;
}

footer p,
footer li {
    color: #C1C1C1;
    font-size: 0.9em;
}

.social {
    margin: 1em 0;
}

.button {
    margin-right: 1em;
    border: none;
    text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
}

.header-wrapper .row {
    color: #fff;
}

footer {
    background-color: #323838;
    color: #fff;
}

footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6,
footer p,
footer li,
footer dt,
footer dd {
    color: #fff;
}

button.small,
.button.small {
    padding: 0.7rem 1.0em;
    margin-bottom: 0;
}

#main img {
    margin-bottom: 2em;
}

.logo-background {
    background-color: #fff;
    border-radius: 2em;
    width: 4em;
    height: 4em;
    margin-top: 2em;
    box-shadow: 0px 3px 20px rgba(0, 0, 0, .5);
}

.Aktuelles-Liste.kurz h3 {
    margin-top: 0.3em;
}

.Aktuelles-Liste.kurz {
    border-top: 1px solid #ddd;
    margin-bottom: 2em;
}

.Aktuelles-Item.kurzversion {
    border-bottom: 1px solid #ddd;
}

.Aktuelles-Item.kurzversion p.info {
    margin-bottom: 0.2em;
}

.Aktuelles-Item.kurzversion p.introtext {
    font-weight: var(--text-weight-normal);
    font-size: 0.9em;
    color: #333;
    margin-bottom: 0.3em;
}

.Aktuelles-Item.kurzversion p.mehr {
    margin-bottom: 0.8em;
}

.Aktuelles-Listestartseite {
    margin-top: 1.1em;
}

.Aktuelles-Listelang .Aktuelles-Item {
    border-bottom: 1px solid #ddd;
    padding-bottom: 2em;
    margin-bottom: 2em;
}

p.info {
    margin-top: 0.7em;
    color: #99938B;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.8em;
}

hr {
    margin-top: 0;
}

hr.trenner.abstand {
    margin: 2em 0;
}

.trennerzeile hr {
    margin-top: 3.8em;
    height: 1px;
    border: none;
    background-color: #ddd;
}

p.introtext {
    --wdth: var(--wdth-narrow);
    font-size: 1.1em;
    color: #555;
    font-family: var(--bold-font-family);
    font-weight: var(--text-weight-medium);
}

.einzelbild img {
    margin-bottom: 2em;
}

.Adresse a {
    color: #fff;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.Adresse p a:hover {
    color: #A8EBFF;
    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    -ms-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
}

.Stueckkarte {
    display: flex;
    flex-direction: column;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, .4);
    margin-bottom: 2em;
}

a .Stueckkarte {
    transition: transform .1s ease-out;
}

a:hover .Stueckkarte {
    transform: scale(1.02);
}

.Stueckkarte-info {
    background-color: #BA3894;
    padding: 1em;
    color: white;
}

.Stueckkarte img {
    margin-bottom: 0!important;
}

.Stueckkarte-info h3 {
    color: white;
    margin: 0;
    padding: 0;
    margin-bottom: 0.5em;
}

.Stueckkarte-info p {
    --wdth: var(--wdth-narrow);
    color: black;
    margin-bottom: 0;
    font-family: var(--bold-font-family);
    font-weight: var(--text-weight-medium);
}

footer a {
    color: #A1AEAE;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

footer a:hover {
    color: #fff;
    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    -ms-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
}

.einzelbild p.caption {
    margin-top: -1.8em;
    font-style: italic;
    color: #777;
    font-family: var(--text-font-family);
    font-size: 0.8em;
    text-align: right;
    margin-bottom: .6em;
}

.fotorama__caption {
    text-align: center;
}

.fotorama__caption__wrap {
    background-color: transparent;
}

.fotorama-caption {
    margin-top: 2em;
    text-align: center;
}

.colorblock {
    display: inline-block;
    width: 1.6em;
    height: 1.6em;
    margin-right: 0.5em;
    margin-bottom: -0.4em;
    margin-left: 3em;
}

.legende {
    border-top: 1px solid #ddd;
    padding-top: 1em;
    border-bottom: 1px solid #ddd;
    padding-bottom: 1em;
    margin-bottom: 2em;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}

.legende .colorblock:first-of-type {
    margin-left: 0;
}

#main table {
    border: none;
}

#main table td {
    vertical-align: top;
    background-color: #fff;
    margin: 0;
    padding: .25em 0;
}

.vert-abstand { height: 1em; }
.vert-abstand.doppelt { height: 2em; }
.vert-abstand.vierfach { height: 4em; }


.startlogo {
    padding-left: 0;
    margin-left: 1em;
    margin-top: 0.1em;
    padding-top: 0.1em;
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -ms-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;
    width: 12em;
}

.Workshopliste.lang article {
    margin: 1em 0;
}

.Workshopliste.lang p.zeit,
.Workshopliste.lang div.leitung p {
    --wdth: var(--wdth-narrow);
    font-family: var(--bold-font-family);
    font-weight: var(--text-weight-medium);
    color: #BA3894;
    font-size: 1.3em;
    margin-top: -.5em;
    text-decoration: none;
    margin-bottom: .3em;
}

#main .Workshopliste.lang div.leitung a {
    --wdth: var(--wdth-narrow);
    font-family: var(--bold-font-family);
    font-weight: var(--text-weight-medium);
    color: #BA3894;
    font-size: inherit;
    text-decoration: none;
}

.Workshopliste.lang p.gebuehr {
    --wdth: var(--wdth-narrow);
    font-family: var(--bold-font-family);
    font-weight: var(--text-weight-medium);
    color: #f47216;
    margin-top: -.5em;
}

.Workshopliste.lang p.datum {
    --wdth: var(--wdth-narrow);
    font-family: var(--bold-font-family);
    font-weight: var(--text-weight-medium);
    color: #73BF1C;
    font-size: 1.3em;
    margin-top: 0em;
    margin-bottom: 0.5em;
}

.Workshopliste article {
    border-bottom: 1px solid #ddd;
    padding-bottom: 1em;
}

.beschreibung p.description-header {
    color: #BA3894;
}

img.schatten {
    box-shadow: 0px 1px 5px rgba(0, 0, 0, .4);
}

#map-canvas {
    width: 100%;
    margin: 0;
    padding: 0;
    height: 30em;
    margin-bottom: 2em;
}

.overlay-solo {
    padding-top: 1em;
}

ul.files li {
    --wdth: var(--wdth-narrow);
    color: #BA3894;
    font-family: var(--bold-font-family);
    font-weight: var(--text-weight-medium);
}

#main ul.files li a {
    --wdth: var(--wdth-narrow);
    font-family: var(--bold-font-family);
    font-weight: var(--text-weight-medium);
    color: #BA3894;
}

.top-bar-section ul li > a {
    --wdth: var(--wdth-narrow);
    font-family: var(--bold-font-family);
    font-weight: var(--text-weight-medium)!important;
}
#main {
    margin-top: 2.8em;
}

.overlay-solo {
    margin-top: -1em;
}

:target:before {
    content: "";
    display: block;
    height: 90px;
    /* fixed header height*/
    margin: -90px 0 0;
    /* negative fixed header height */
}

.top-bar-section .has-dropdown > a:after {
    border-color: #666 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}

.Termin-Item.farbbalken .row {
    margin-bottom: 2px;
    padding-bottom: 0;
}

.Termin-Item.farbbalken p {
    margin-bottom: 0;
}

.Termin-Item.startseite p {
    margin-bottom: 0.2em;
}

.Termin-Item.farbbalken p.gross,
.Termin-Item.startseite p.gross {
    --wdth: var(--wdth-narrow);
    font-family: var(--bold-font-family);
    font-weight: var(--text-weight-bold);
    font-size: 1.3em;
    line-height: 1.1em;
}

.Termin-Item.farbbalken p.gross a {
    font-weight: var(--text-weight-bold);

}


.Termin-Item.startseite img {
    /*margin-top: .5em;*/
    margin-bottom: 1em;
}

.Termin-Item.startseite {
    margin-bottom: 2em;
}

.Termin-Item.farbbalken p.klein,
.Termin-Item.startseite p.klein {
    --wdth: var(--wdth-narrow);
    font-family: var(--bold-font-family);
    font-weight: var(--text-weight-medium);
}

.Termin-Item.farbbalken .polster {
    padding: 0.6em;
}


/*.Termin-Item.farbbalken.Familienprogramm p.klein,
.Termin-Item.farbbalken.Familienprogramm p.gross,
.Termin-Item.farbbalken.Familienprogramm a,
*/

.Termin-Item.farbbalken.Erwachsenenprogramm p.klein,
.Termin-Item.farbbalken.Erwachsenenprogramm p.gross,
.Termin-Item.farbbalken.Erwachsenenprogramm a {
    color: #000;
}
.Termin-Item.farbbalken.outofthebox p.klein,
.Termin-Item.farbbalken.outofthebox p.gross,
.Termin-Item.farbbalken.outofthebox a {
    color: #fff;
}


.Termin-Item.farbbalken.Kinderprogramm p.klein,
.Termin-Item.farbbalken.Kinderprogramm p.gross,
.Termin-Item.farbbalken.Kinderprogramm a,
.Termin-Item.farbbalken.Zu_Gast p.klein,
.Termin-Item.farbbalken.Zu_Gast p.gross,
.Termin-Item.farbbalken.Zu_Gast a {
    color: #333;
}
.Termin-Item.farbbalken.Sommerbuehne p.klein,
.Termin-Item.farbbalken.Sommerbuehne p.gross,
.Termin-Item.farbbalken.Sommerbuehne a {
    color: #333;
}
.Termin-Item.farbbalken.Sommerbuehne a:hover p,
.Termin-Item.farbbalken.Sommerbuehne a:hover {
    color: #000;
}
.Termin-Item.farbbalken.Sommerbuehne a:hover p,
.Termin-Item.farbbalken.Sommerbuehne a:hover {
    color: #000;
}


.Termin-Item.farbbalken.Kinderprogramm a:hover p,
.Termin-Item.farbbalken.Zu_Gast a:hover p,
.Termin-Item.farbbalken.Zu_Gast a:hover {
    color: #BA3894;
}

.Termin-Item.farbbalken.Erwachsenenprogramm a:hover p,
.Termin-Item.farbbalken.Familienprogramm a:hover,
.Termin-Item.farbbalken.Erwachsenenprogramm a:hover {
    color: #333;
}
.Termin-Item.farbbalken.outofthebox a:hover p,
.Termin-Item.farbbalken.outofthebox a:hover {
    color: rgba(255,255,255,.7);
}

.Stueck-Termin {
    --wdth: var(--wdth-narrow);
    color: #BA3894;
    font-family: var(--bold-font-family);
    font-weight: var(--text-weight-medium);
}

.flex-video {
    margin-top: 1em;
    margin-bottom: 1em;
}

.spacer-2em {
    height: 2em;
    width: 100%;
}

.unscrolled .startlogomann {
    width: 0;
    height: 0;
}

.scrolled .startlogomann {
    height: 40px;
    width: auto;
}

.filter {
    border: 1px solid transparent;
    border-radius: 3px;
    padding: 0.9em 0.7em 0.7em 0.6em;
}

.filter.aktiv {
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 0.9em 0.7em 0.7em 0.6em;
}


.spalten {
    margin-left: -1em;
    margin-right: -1em;
}

.spalte {
    margin: 1em;
    padding: 1em 1em .01em 1em;
}

.spalte hr {
    padding: 0;
    margin: 1em 0;
    border-top: 2px solid rgba(255,255,255,.25);
}

.spalte h2 {
    font-size: 1.25em;
    margin-top: 0.2em;
    color: white;
    padding-bottom: 1em;
    margin-bottom: 1em;
    border-bottom: 2px solid rgba(255,255,255,.25);
}

.spalte h3, .spalte h4 {
    font-size: 1.15em;
    margin-top: 0.2em;
    color: white;
}

.spalte h4 {
    font-size: 1em;
    margin-top: 0.2em;
    color: white;
}

.spalte__grey h2, 
.spalte__standardtext h2, 
.spalte__yellow h2 {
    color: #333;
    border-bottom: 2px solid rgba(0,0,0,.15);
} 


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



// Download-Galerie

.download-item {
}

.download-gallery {
    display: grid!important;
    grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
    gap: 1em;
    grid-auto-flow: row;
}

#main .download-gallery img {
    max-width: 100%;
    transition: transform .2s ease-out, box-shadow .2s ease-out;
    box-shadow: 0 0 0 hsla(0, 0%, 0%, 0.5);
    margin-bottom: .5em;
}
.download-gallery img:hover {
    transform: scale(1.05);
    box-shadow: 0.2rem 0.4rem 0.8rem -.2em hsla(0, 0%, 0%, 0.3);
}
#main .download-gallery p.caption {
    margin-bottom: .5em;
}

@media screen and (min-width: 40em) {
    .download-gallery {
        grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
        gap: 2em;
    }
}






/* min-width 641px, medium screens */
@media only screen and (min-width: 40.063em) {
    .Overlay-buttons .button,
    .overlay-solo .button {
        text-transform: uppercase;
        font-size: clamp(.4em, 2vw, 0.7em);
        letter-spacing: 1px;
        padding: 0.5em;
        -webkit-box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, .3);
        -moz-box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, .3);
        -ms-box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, .3);
        -o-box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, .3);
        box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, .3);
    }
    button.small,
    .button.small {
        padding: 0.875em 1.75em;
    }
    .top-bar-section li:not(.has-form) a:not(.button) {
        background-color: #eee;
        color: #333;
        font-size: 0.9em;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    .top-bar-section li.has-dropdown ul.dropdown {
        -webkit-box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, .3);
        -moz-box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, .3);
        -ms-box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, .3);
        -o-box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, .3);
        box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, .3);
    }
    .contain-to-grid {
        background-color: #fff;
    }
    .top-bar {
        background-color: #fff;
    }
    .top-bar-section ul li,
    .top-bar-section ul li:hover:not(.has-form) > a {
        background-color: #f47216;
        color: #fff;
    }
    .top-bar-section li.active:not(.has-form) a:not(.button) {
        background-color: #73BF1C;
        color: #000;
    }
    .top-bar-section li.active:not(.has-form) a:not(.button):hover {
        background-color: #73BF1C;
        color: #000;
    }
    .top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button) {
        background-color: #eee;
        color: #333;
    }
    .top-bar-section .dropdown li:not(.has-form):not(.active):hover > a:not(.button) {
        color: #fff;
        background-color: #f47216;
    }
    .top-bar-section .dropdown li:not(.has-form):not(.active):hover > a:not(.button) {}
    .top-bar-section li:not(.has-form) a:not(.button):hover {
        background-color: #f47216;
    }
    #main {
        margin-top: 0;
    }
    .Termin-Item .infobox p.Wochentag {
        font-size: 2.8em;
        margin-bottom: -0.3em;
        padding-top: 0;
    }
    .Termin-Item .infobox p {
        padding-left: 16px;
    }
    .Termin-Item .infobox p.Datum {
        font-size: 1.6em;
        margin-top: -0.8em;
    }
    .Termin-Item h1 {
        font-size: 1.7em;
        margin-top: -2px;
    }
    .Termin-Item .infobox p.Zeit {
        line-height: 1.2em;
        margin-bottom: 0;
        margin-top: -0.3em;
    }
    .Termin-Item.small {
        margin-bottom: 2em;
    }
    .Termin-Item.small h1 a {
    --wdth: var(--wdth-narrow);
        font-family: var(--bold-font-family);
        font-weight: var(--text-weight-medium);
        font-size: 0.8em;
        margin-top: 0px;
        color: #BA3894;
    }
    .Termin-Item.small p.alter a {}
    .Termin-Item.small .infobox p.Datum {
        margin-top: 0;
    }
    .Termin-Item.small h3 {
    --wdth: var(--wdth-narrow);
        font-family: var(--bold-font-family);
        font-weight: var(--text-weight-medium);
        font-size: 1em;
    }
    .Termin-Item.small h3 a {
    --wdth: var(--wdth-narrow);
        font-family: var(--bold-font-family);
        font-weight: var(--text-weight-medium);
        color: #BA3894;
    }
    article.Termin-Item.small {
        margin-bottom: 2px;
    }
    .Termin-Item.small h1 {
        margin-bottom: -0.2em;
        line-height: 0.9em;
    }
    .banner-spacer {
        height: 2em;
    }
    .Terminliste.kurz {
        margin-top: 2em;
    }
    .mediumstartlogo {
        width: 25em;
        height: auto;
        padding-top: 4.2em;
        padding-bottom: 1.6em;
        -webkit-transition: all .25s ease-in-out;
        -moz-transition: all .25s ease-in-out;
        -ms-transition: all .25s ease-in-out;
        -o-transition: all .25s ease-in-out;
        transition: all .25s ease-in-out;
    }
    .scrolled .mediumstartlogo {
        width: 0;
        height: 0;
    }
    .spalten {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .Terminliste.startseitenblocks article {
        margin-right: 2em;
    }
    .Terminliste.startseitenblocks article:nth-of-type(2) {
        display:  block;
    }
}


/* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
@media only screen and (min-width: 40.063em) and (max-width: 64em) {
    .top-bar,
    .contain-to-grid {
        background-color: #eee;
    }
    .startlogomann {
        padding-top: 0.1em;
        -webkit-transition: all .25s ease-in-out;
        -moz-transition: all .25s ease-in-out;
        -ms-transition: all .25s ease-in-out;
        -o-transition: all .25s ease-in-out;
        transition: all .25s ease-in-out;
    }
}

@media only screen and (min-width: 64.063em) {
    .mediumstartlogo {
        display: none;
    }
    .Overlay-buttons {
        /*max-width: 1000px;*/
        max-width:1280px;
    }
    .Overlay-buttons .button {
        font-size: clamp(.4em, 2vw, 0.7em);
    }
    .overlay-solo .button {
        font-size: clamp(.5em, 2vw, 1em);
    }
    .startlogo,
    .top-bar,
    header,
    .contain-to-grid {
        -webkit-transition: all .5s ease-in-out;
        -moz-transition: all .5s ease-in-out;
        -ms-transition: all .5s ease-in-out;
        -o-transition: all .5s ease-in-out;
        transition: all .5s ease-in-out;
    }
    .unscrolled .top-bar {
        height: 10em;
    }
    .scrolled .contain-to-grid {
        -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .5);
        -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .5);
        -ms-box-shadow: 0 0 20px rgba(0, 0, 0, .5);
        -o-box-shadow: 0 0 20px rgba(0, 0, 0, .5);
        box-shadow: 0 0 20px rgba(0, 0, 0, .5);
    }
    .scrolled .startlogo {
        /*height: 2.5em;*/
        /*width: auto;*/
        height: 40px;
        width: 194px;
    }
    .unscrolled .startlogo {
        height: 88px;
        width: 444px;
        /*height: 5.6em;*/
        /*width: auto;*/
        margin-top: 2em;
    }
    .unscrolled header {
        margin-bottom: 10em;
    }
    .overlay-solo {
        margin-top: -0.7em;
    }
}


/*magnific popup*/

.mfp-with-fade .mfp-content,
.mfp-with-fade .mfp-arrow,
.mfp-with-fade.mfp-bg {
    opacity: 0;
    -webkit-backface-visibility: hidden;
    -webkit-transition: opacity 0.3s ease-out;
    -moz-transition: opacity 0.3s ease-out;
    -o-transition: opacity 0.3s ease-out;
    transition: opacity 0.3s ease-out;
}

.mfp-with-fade.mfp-ready .mfp-content,
.mfp-with-fade.mfp-ready .mfp-arrow {
    opacity: 1;
}

.mfp-with-fade.mfp-ready.mfp-bg {
    opacity: 0.8;
}

.mfp-with-fade.mfp-removing .mfp-content,
.mfp-with-fade.mfp-removing .mfp-arrow,
.mfp-with-fade.mfp-removing.mfp-bg {
    opacity: 0;
}

.test {
    background-color: #99C1E2;
    padding: 1em 0 0em 0;
    margin-top: -2em;
}