/* ========================================================================================
   stadtverfuehrungen.css: Stadtverführungen CSS
   ======================================================================================== */

/* Akzentfarbe Hintergruende */

#binding .header,
.accent,
.az-active:hover,
.az-choosen,
#ui-datepicker-div td .ui-state-active,
#ui-datepicker-div td .ui-state-hover {
    background: hsl(0, 0%, 56%);
}

/* Akzentfarbe Textlinks */

a,
.accent-text,
.carousel-btn:hover,
.service-login:hover,
.service-login-active,
.service-menu-link:hover,
.service-menu-link-active:hover,
.main-menu-link:hover,
.main-menu-link-active,
.main-menu-link-active:hover,
.box-linked .link,
.box-linked .headline,
.az-active,
.accordion dt,
.expand h4,
#binding .ui-widget-header a,
#binding .ui-accordion h3 {
    color: hsl(193, 100%, 32%);
}

/*
 * Stadtverfuehrungen Programm
 */

 .citytour /* Container mit Suche, Filter und Suchergebnis */ {
    font-size: .9rem;
}

/*
 * Headings
 */

.citytour__heading--h1 {
    font-size: 1.8rem;
    font-weight: normal;
    line-height: 2.5rem;
    margin-bottom: 2rem;
}

.citytour__heading--h3 {
    color: hsl(0, 0%, 0%);
    font-size: .9rem;
    font-weight: normal;
    margin-bottom: .5rem;
}

/*
 * Formular
 */

.citytour input,
.citytour select,
.citytour textarea {
    border: 2px solid hsl(0, 0%, 73%);
    border-radius: 5px;
    font-size: 16px;
    padding: .2rem;
}

.citytour input.active,
.citytour select.active,
.citytour textarea.active {
    border: 2px solid hsl(193, 100%, 37%);
}

.citytour input[type="search"] {
    box-sizing: border-box;
}

.citytour .island {
    padding: 1rem .625rem;
}

.control__label {
    display: block;
    margin-bottom: 1rem;
}

.control__input-wrapper {
    width: 100%;
}

/*
 * Icons
 */

.svg-icon {
    position: absolute;
}

.svg-icon--citytour /* customized Icons */ {
    height: 2.5rem;
    left: 0rem;
    top: -.375rem;
    width: 2.5rem;
}

.svg-icon--canceled {
    fill: hsl(0, 0%, 40%);
    height: 2.125rem;
    left: .125rem;
    top: -.25rem;
    width: 2.125rem;
}

.svg-icon--wheelchair {
    fill: hsl(0, 0%, 40%);
    height: 1.875rem;
    left: .25rem;
    top: -.125rem;
    width: 1.875rem;
}

.svg-icon--calendar-day {
    fill: hsl(0, 0%, 40%);
    height: 1.5rem;
    top: .25rem;
    width: 1.5rem;
}

.svg-icon--clock,
.svg-icon--exclamation-cirle {
    fill: hsl(0, 0%, 40%);
    height: 1.5rem;
    left: -2.5rem;
    top: .125rem;
    width: 1.5rem;
}

.svg-icon--users {
    fill: hsl(0, 0%, 40%);
    height: 1.5rem;
    left: -2.5rem;
    top: 0rem;
    width: 1.75rem;
}

.svg-icon--address {
    fill: hsl(0, 0%, 40%);
    height: 2rem;
    left: -2.5rem;
    top: .125rem;
    width: 1.5rem;
}

.svg-icon--map {
    fill: hsl(0, 0%, 40%);
    height: 1.5rem;
    left: .5rem;
    top: .25rem;
    width: 1.25rem;
}

.svg-icon--external {
    fill: hsl(193, 100%, 32%);
    height: 18px;
    left: .5rem;
    top: .5rem;
    width: 20px;
}

.svg-icon--favorite {
    height: 1.25rem;
    right: 0;
    top: .25rem;
    width: 1.375rem;
    z-index: 100;
}

.svg-icon--book {
    fill: hsl(0, 0%, 100%);
    height: 1.25rem;
    left: .5rem;
    top: .25rem;
    width: 1.5rem;
    z-index: 100;
}

.svg-icon--home {
    fill: hsl(193, 100%, 32%);
    height: 1.625rem;
    left: .25rem;
    top: .375rem;
    width: 2rem;
    z-index: 100;
}

.svg-icon--facebook {
    fill: hsl(193, 100%, 32%);
    height: 1.375rem;
    left: .6125rem;
    top: .5rem;
    width: 1rem;
    z-index: 100;
}

.svg-icon--instagram {
    fill: hsl(193, 100%, 32%);
    height: 1.75rem;
    left: .375rem;
    top: .375rem;
    width: 1.5rem;
    z-index: 100;
}

/*
 * Buttons
 */

.button {
    border-radius: 5px;
    border-style: solid;
    border-width: 1px;
    cursor: pointer;
}

.button--primary {
    background: hsl(193, 100%, 37%);
    border-color: hsl(193, 100%, 37%);
    color: #fff;
}

.button--primary:hover {
    background: hsl(193, 100%, 41%);
    border-color: hsl(193, 100%, 41%);
}

.button--secondary {
    background: hsl(0, 0%, 87%);
    border-color: hsl(0, 0%, 87%);
    color: hsl(0, 0%, 27%);
}

.button--secondary:hover {
    background: #fff;
    color: #000;
}

.button--s {
    font-size: 1rem;
    padding: .375rem;
}

.button-wrapper--s {
    display: flex;
    justify-content: flex-end;
    padding: 0 0 .5rem 0;
}

.button__text-wrapper {
    display: block;
    padding-right: 2rem;
    width: 100%;
}

/* Filter-Button */

.button-wrapper--filter {
    display: flex;
    justify-content: space-between;
    padding: .625rem .625rem 1rem .625rem;
}

.button--filter,
.button--filter-delete {
    cursor: pointer;
    font-size: 1rem;
    padding: .75rem;
    position: relative;
}

.button--filter {
    flex-grow: 2;
}

.button--filter-delete {
    margin-left: 1rem;
    width: 3rem;
}

.button--filter-delete.button--primary.inactive {
    background: hsl(0, 0%, 80%);
    border-color: hsl(0, 0%, 80%);
    cursor: default;
}

/* Icon-Button */

.button__icon {
    height: 1.375rem;
    width: 1.375rem;
}

.button__icon--control {
    display: inline-block;
    fill: white;
    position: absolute;
    right: .5rem;
    top: 30%;
}

.button__icon--delete {
    display: inline-block;
    fill: white;
    position: relative;
    top: 10%;
}

/*
 * Filter
 */

.filter__detail {
    border-top: 2px solid hsl(0, 0%, 100%);
    display: none;
    padding: 1rem .5rem;
}

.filter__group--date {
    border-bottom: 2px solid hsl(0, 0%, 100%);
    margin-bottom: 1rem;
}

.filter__group--date .control__label--switch {
    margin-bottom: 0;
}

.switch__wrapper {
    margin-top: 1.75rem;
}

/* An-Aus-Schalter */

.control__label--switch /* Label */ {
    margin-bottom: 1rem;
    min-height: 2rem;
    position: relative;
}

.switch__input /* Inputfeld */ {
    display: none;
}

.switch__slider /* Grundfläche */ {
    background-color: hsl(0, 0%, 56%); /* inaktiv */
    border-radius: .8rem;
    cursor: pointer;
    height: 1.6rem;
    left: 0;
    position: absolute;
    top: 0;
    transition: all .3s ease-in-out;
    width: 3.2rem;
}

.switch__slider:before /* verschiebbarer Button */ {
    background-color: hsl(0, 0%, 100%);
    border-radius: 50%;
    bottom: .2rem;
    content: "";
    height: 1.2rem;
    left: .2rem;
    position: absolute;
    transition: all .3s ease-in-out;
    width: 1.2rem;
}

.switch__input:checked + .switch__slider {
    background-color: hsl(193, 100%, 37%); /* aktiv */
}

.switch__input:checked + .switch__slider:before {
    transform: translateX(1.5rem);
}

.switch__label-day {
    display: inline-block;
    margin-left: 4rem;
}

.switch__label-icon {
    display: inline-block;
    margin-left: 3rem;
}

/*
 * Fuehrungen Ausgabe
 */

/* Filterergebnis, Counter, Sortieroptionen */

.result {
    border-bottom: 2px solid hsl(0, 0%, 100%);
}

.event__counter-wrapper /* Zaehlerrahmen */ {
    font-size: 1rem;
    margin-bottom: 1rem;
    padding-bottom: .375rem;
    padding-top: .375rem;
}

.event__counter /* Zaehler */ {
    font-style: normal;
    font-weight: bold;
}

.filter__group--sort .filter__group-item--2 /* Sortieroptionen */ {
    margin-bottom: 1rem;
    text-align: right;
    width: 100%;
}

.button--map /* Kartenansicht */ {
    font-size: 1rem;
    padding: .375rem .5rem .375rem 2.5rem;
    position: relative;
}

/* Content-Elemente volle Breite */

.result,
.event-list__item-heading,
.event__description-wrapper {
    padding-left: .5rem;
    padding-right: .5rem;
}

/* Fuehrung Vorschau und Detailansicht */

.event-list__item {
    margin-bottom: 2px;
    position: relative;
}

/* Fuehrung Ueberschrift */

.event-list__item-heading {
    background: hsl(193, 100%, 37%);
    color: hsl(0, 0%, 100%);
    cursor: pointer;
    font-size: 1rem;
    font-weight: normal;
    line-height: 1.8rem;
    margin-bottom: 0;
    position: relative;
}

.event-list__item-heading:hover {
    background: hsl(193, 100%, 41%);
}

.event-list__item-heading--text /* Fuehrung Titel-Text */ {
    display: block;
    padding-bottom: .375rem;
    padding-left: 3rem;
    padding-right: 3rem;
    padding-top: .375rem;
}

.event-list__item-heading--number /* Fuehrung Nummer */ {
    background: hsl(0, 0%, 100%);
    border-radius: 7px;
    box-sizing: content-box;
    color: hsl(0, 0%, 27%);
    display: block;
    font-size: 1rem;
    left: .5rem;
    line-height: 1.5rem;
    margin-top: .125rem;
    position: absolute;
    text-align: center;
    top: .375rem;
    width: 2.5rem;
}

.event-list__item-heading:hover .event-list__item-heading--number {
    color: hsl(193, 99%, 32%);
}

/* Toggle-Button */

.button__detail {
    display: block;
    padding-left: 2rem;
    position: absolute;
    right: .125rem;
    top: .375rem;
}

.button__detail--openclose {
    fill: white;
    height: 1.5rem;
    left: 0;
    top: .125rem;
    width: 1.5rem;
}

/* Detailansicht Rahmen */

.event__detail {
    border-top: 2px solid hsl(0, 0%, 100%);
    display: none;
}

/* Fuehrungstyp Icon-Rahmen */

.marker__icon-wrapper {
    display: inline-block;
    margin-bottom: .5rem;
    margin-right: .5rem;
    min-height: 2rem;
    position: relative;
    width: 2.5rem;
}

.control__label--switch .marker__icon-wrapper {
    margin-left: 4rem;
    width: calc(100% - 4rem);
}

/* Fuehrungstyp Icon-Liste */

.marker-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-bottom: 0;
    margin-right: 2.5rem;
    margin-top: 1rem;
}

/* Tooltip */

#tooltip {
    background: hsl(0, 0%, 100%);
    border-radius: 5px;
    box-shadow: 0 0 15px 10px hsla(0, 0%, 0%, .2);
    color: hsl(0, 0%, 27%);
    padding: .5rem;
    position: absolute;
    text-align: center;
    z-index: 100;
}

#tooltip:after  /*triangle decoration*/ {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid hsl(0, 0%, 100%);
    bottom: -10px;
    content: "";
    height: 0;
    left: 50%;
    margin-left: -10px;
    position: absolute;
    width: 0;
}

#tooltip.top:after {
    border-bottom: 10px solid hsl(0, 0%, 100%);
    border-top-color: transparent;
    bottom: auto;
    top: -20px;
}

#tooltip.left:after {
    left: 10px;
    margin: 0;
}

#tooltip.right:after {
    left: auto;
    margin: 0;
    right: 10px;
}

/* Ticket-Icon und Favorit-Icon Rahmen */

.favorite__icon-wrapper,
.book__icon-wrapper {
    position: relative;
}

.favorite__icon-wrapper {
    cursor: pointer;
    margin-left: .5rem;
    margin-right: 0;
    width: 2rem;
}

/* Buchen-Button */

.button--book {
    font-size: 1rem;
    padding: .25rem .25rem .25rem 3rem;
    position: relative;
}

/* Favorit Kennzeichnung */

.favorite__icon-wrapper--inactive > .svg-icon--favorite {
    fill: hsl(0, 0%, 80%);
}

.favorite__icon-wrapper--active > .svg-icon--favorite {
    fill: hsl(193, 100%, 37%);
}

.favorite__icon-wrapper:hover.favorite__icon-wrapper--inactive > .svg-icon--favorite,
.favorite__icon-wrapper:hover.favorite__icon-wrapper--active > .svg-icon--favorite {
    fill: hsl(193, 100%, 41%);
}

/* Veranstalterinfos */

.event__orga {
    align-items: flex-end;
    border-bottom: 2px solid hsl(0, 0%, 80%);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-bottom: .5rem;
}

.event__orga-heading {
    margin-right: .5rem;
}

/* Veranstaltungslinks mit Icon */

.event__link {
    display: inline-block;
    position: relative;
}

.event__link--text-with-icon {
    border-color: hsl(193, 100%, 37%);
    border-radius: 5px;
    border-style: solid;
    border-width: 2px;
    overflow: hidden;
    padding: .375rem .375rem .375rem 2.5rem;
}

.event__link--icon {
    overflow: hidden;
    padding: .375rem 0 .375rem 2.25rem;
    width: 2.25rem;
}

.event__link:hover {
    border-color: hsl(193, 100%, 41%);
    color: hsl(193, 100%, 41%);
    text-decoration: none;
}

.event__link--text-with-icon:hover > .svg-icon--external,
.event__link--icon:hover > .svg-icon--home,
.event__link--icon:hover > .svg-icon--facebook,
.event__link--icon:hover > .svg-icon--instagram {
    fill: hsl(193, 100%, 41%);
}

/* Veranstaltung Fliesstext */

.event__text {
    margin-bottom: 0;
    margin-top: 0;
    padding-bottom: 1rem;
    padding-top: 1rem;
}

/* Fuehrung Infos und Adresse */

.event__date-wrapper {
    margin-bottom: 1rem;
    margin-top: 1rem;
    padding-left: .5rem;
    padding-right: .5rem;
    position: relative;
}

/* Terminliste Zeile */

.date-list__item {
    border-bottom: 2px solid hsl(0, 0%, 80%);
    display: block;
    padding: .25rem 0 .25rem 0;
}

.date-list__item:last-child {
    border-bottom: none;
}

.date-list__item-label /* Abgesagt-Kennzeichnung */ {
    background: hsl(0, 100%, 47%);
    border-radius: 3px;
    color: hsl(0, 0%, 100%);
    display: inline-block;
    line-height: 1.2rem;
    padding-left: .5rem;
    padding-right: .5rem;
}

.date-list__text /* Terminliste Zeile Text */ {
    display: block;
    margin: .125rem 0 .5rem 0;
}

.date-list__buttons /* Terminliste Zeile Buttons */ {
    display: flex;
    hyphens: manual;
    justify-content: flex-end;
    margin-left: 1rem;
}

/* Listen: Icons Fuehrungstypen, Termine, Veranstalter-Links */

.marker-list,
.event-list,
.orga-list {
    list-style: none;
}

.date-list {
    margin-bottom: .5rem;
}

.orga-list {
    margin-bottom: .125rem;
}

.orga-list__item {
    display: inline-block;
    margin: 0 .5rem 0 0;
}

.orga-list__item:last-child {
    margin-right: 0;
}

/* Container mit vorgestelltem Icon */

.date-list /* Terminliste */,
.event__notice-wrapper /* Hinweis */,
.event__duration-wrapper /* Dauer */,
.event__participants-wrapper /* Teilnehmer */,
.event__address-wrapper /* Adressblock */ {
    margin-left: 2.5rem;
    position: relative;
}

.event__notice-wrapper {
    margin-top: 1rem;
}

.event__address-wrapper {
    margin-bottom: 1rem;
}

.event__address /* Adresse */{
    margin-bottom: .5rem;
}

/* ==========================================================================
   Media queries
   ========================================================================== */

@element ".citytour" and (min-width: 20rem) {
    .control__label-text--time {
        width: 4.5rem;
    }

    .filter__group {
        display: flex;
        position: relative;
    }

    .filter__group--date {
        align-content: flex-start;
        border-bottom: none;
        margin-bottom: 0;
    }

    .filter__group--sort {
        align-items: flex-end;
        justify-content: space-between;
    }

    .filter__group--date .filter__group-item--1 {
        flex-shrink: 0;
        margin-right: 2rem;
        width: 9rem;
    }

    .filter__group--sort .filter__group-item--1 {
        margin-right: 1rem;
        width: 60%;
    }

    .filter__group--date .filter__group-item--2 {
        width: 100%;
    }

    .filter__group--sort .filter__group-item--2 {
        flex-shrink: 0;
        width: 10.5rem;
    }

    .filter__group-item--1 .control__label {
        margin-bottom: 1rem;
    }
}

@element ".citytour" and (min-width: 22.5rem) {
    .date-list__item {
        align-items: flex-start;
        display: flex;
        justify-content: space-between;
    }

    .date-list__text {
        margin-bottom: 0;
    }
}

@element ".citytour" and (min-width: 30rem) {
    .control__label--select-time,
    .control__label--select-sort {
        display: flex;
    }

    .filter__group--sort .filter__group-item--2 {
        margin-bottom: 1.2rem;
    }

    .button-wrapper--filter {
        padding-left: 12rem;
    }
}

@media only all and (min-width: 28.125em) {
    .citytour__heading--h1 {
        font-size: 2rem;
        font-weight: normal;
        line-height: 2.5rem;
        margin-bottom: 2rem;
    }

    .button-wrapper--filter {
        display: flex;
        justify-content: space-between;
    }

    .button__text-wrapper {
        display: inline-block;
        margin-right: .5rem;
        width: auto;
    }

    .control__label--input,
    .control__label--select-cat {
        display: flex;
    }

    .control__label-text {
        flex-shrink: 0;
        padding-right: .375rem;
        padding-top: .125rem;
    }

    .control__label-text--l {
        width: 11rem;
    }

    .event-list__item-heading {
        font-size: 1.25rem;
    }
}

@media only all and (min-width: 36.875em) {
    .result,
    .event__description-wrapper,
    .event__date-wrapper {
        padding-left: 0;
    }
}

@media only all and (min-width: 55em) {
    .result,
    .event__description-wrapper,
    .event__date-wrapper {
        padding-right: 0;
    }
}