:root {
    --color-almost-white: #f7f7f7;
    --color-almost-white-overlay: rgba(247, 247, 247, .8); /* #f7f7f7 */
    --color-beige: #ebe9e8;
    --color-grey: #d3cfcd;
    --color-shadow: rgba(153, 153, 153, .66); /* #999 */
    --color-text: #333;
}
@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 400;
  src: local('Crimson Text Regular'), local('CrimsonText-Regular'),
       url('/fonts/crimson-text-v8-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 600;
  src: local('Crimson Text SemiBold'), local('CrimsonText-SemiBold'),
       url('/fonts/crimson-text-v8-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'FunctionPro-Book';
  src: url('/fonts/FunctionPro-Book.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'FunctionPro-Medium';
  src: url('/fonts/FunctionPro-Medium.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'FunctionPro-MediumOblique';
  src: url('/fonts/FunctionPro-MediumOblique.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
/* begin icons */
@font-face {
    font-family: 'icons';
    src: url('/fonts/icons.woff2?1793465') format('woff2');
    font-weight: normal;
    font-style: normal;
}
[class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: "icons";
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-left: .2em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-bookmark:before { content: '\e800'; } /* '' */
.icon-tags:before { content: '\e801'; } /* '' */
.icon-search:before { content: '\e802'; } /* '' */
.icon-kiosk:before { content: '\e803'; } /* '' */
.icon-checkbox-checked:before { content: '\e804'; } /* '' */
.icon-print:before { content: '\e805'; } /* '' */
.icon-play:before { content: '\e806'; } /* '' */
.icon-pause:before { content: '\e807'; } /* '' */
.icon-checkbox:before { content: '\f096'; } /* '' */
.icon-twitter:before { content: '\f099'; } /* '' */
.icon-facebook:before { content: '\f09a'; } /* '' */
.icon-menu:before { content: '\f0c9'; } /* '' */
.icon-mail:before { content: '\f0e0'; } /* '' */
.icon-previous:before { content: '\f104'; } /* '' */
.icon-next:before { content: '\f105'; } /* '' */
.icon-top:before { content: '\f106'; } /* '' */
.icon-youtube:before { content: '\f167'; } /* '' */
.icon-flickr:before { content: '\f16e'; } /* '' */
.icon-vimeo:before { content: '\f27d'; } /* '' */
/* end icons */
audio { width: 100%; }
body, button, input, select, textarea {
    font-family: 'FunctionPro-Book';
    font-size: 18px;
}
@media (max-width: 420px) {
    body, button, input, select, textarea { font-size: 17px; }
}
@media (max-width: 360px) {
    body, button, input, select, textarea { font-size: 16px; }
}
body {
    background-color: var(--color-beige);
    color: var(--color-text);
    margin: 0;
    overflow: hidden;
}
a {
    color: var(--color-text);
    cursor: pointer;
    text-decoration-color: var(--color-grey);
}
a:hover { text-decoration-color: var(--color-text); }
.a__no-underline { text-decoration: none; }
hr {
    border: none;
    border-top: 1px solid #979797;
    height: 0;
}
.hr__light { border-top: 1px solid #d3cfcd; }
img { max-width: 100%; }
small { display: block; }
strong {
    font-family: 'FunctionPro-Medium';
    font-weight: 400;
}

.article-panel {
    background-color: var(--color-almost-white);
    display: flex;
    justify-content: space-between;
    margin-bottom: 2em;
    padding: 2em;
}
.article-panel__abstract { width: 50%; }
.article-panel__info { width: calc(50% - 2em); }
.article-panel__info-cover { width: 45%; }
.article-panel__info-details { width: 50%; }
.article-panel__info-split {
    display: flex;
    justify-content: space-between;
}
@media (max-width: 959px) {
    .feature__landscape .feature_split { flex-direction: column; }
    .feature__landscape .feature_image {
        padding-top: 64.29531981279%; /* 412.133px / 641px * 100% */
        width: 100%;
    }
    .feature__landscape .feature_text { width: 100%; }
}
@media (min-width: 680px) {
    .feature__landscape { grid-column: span 2; }
}

@media (min-width: 960px) {
    .feature__landscape {
        grid-column: span 4;
        height: 0;
        overflow: hidden;
        padding-top: 32.147659906396% ; /* 412.133px / (641px * 2) * 100% */
        position: relative;
    }
    .feature__landscape .feature_split {
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }
    .feature__landscape:nth-child(even) .feature_image { order: 1; }
}

@media (max-width: 679px) {
    .feature__portrait .feature_image {
        padding-top: 130.68071312804%; /* 403.15px / 308.5px * 100% */
        width: 100%;
    }
    .feature__portrait .feature_split { flex-direction: column; }
    .feature__portrait .feature_text { width: 100%; }
}
@media (min-width: 680px) {
    .feature__portrait {
        grid-column: span 2;
        height: 0;
        overflow: hidden;
        padding-top: 65.34035656402%; /* 403.15px / (308.5px * 2) * 100% */
        position: relative;
    }
    .feature__portrait .feature_split {
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }
}
.feature__card { grid-column: span 1; }
.feature__card .feature_split { flex-direction: column; }
.feature__card .feature_image {
    padding-top: 68.39546191248%; /* 211px / 308.5px * 100% */
    width: 100%;
}
.feature__card .feature_text { width: 100%; }
@media (min-width: 960px) and (max-width: 1199px) {
    .feature__card { grid-column: span 2; }
}
.feature_image {
    background-size: cover;
    background-position: center;
    width: 50%;
}
.feature_split { display: flex; }
.feature_text {
    box-sizing: border-box;
    overflow-y: auto;
    padding: 1.33em;
    width: 50%;
}
.features {
    display: grid;
    grid-gap: 2.66em 1.33em;
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 680px) {
    .features { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
    .features { grid-template-columns: repeat(4, 1fr); }
}
.features > * {
    background-color: var(--color-almost-white);
    min-width: 0;
}
.footer { display: flex; }
.footer__inserts { flex-grow: 1; }
.generic__featured {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2em;
}
.generic__featured_image { width: calc(33% - 2em); }
.generic__featured_image_wide {
    margin-right: 2em;
    width: calc(50% - 2em);
}
.generic__featured_text { width: 66%; }
@media (max-width: 600px) {
    .generic__featured { flex-direction: column; }
    .generic__featured_image,
    .generic__featured_image_wide {
        margin-bottom: 1.33em;
        margin-right: 0;
        width: 100%;
    }
    .generic__featured_text { width: 100%; }
}
.generic__image_restraint { max-height: 640px; }
.generic__margin_vertical { margin: 1.5em 0; }
.generic__margin_vertical_slight { margin: .5em 0; }
.generic__no_margin { margin: 0; }
.generic__center_aligned { text-align: center; }
.generic__smaller_text { font-size: .9em; }
.generic__big_heading {
    font-family: 'FunctionPro-Medium';
    font-size: 2.65em;
    margin: 1em 0;
    overflow-wrap: break-word;
}
.generic__big_heading a { text-decoration: none; }
.generic__big_heading a:hover { border-bottom: 1px solid #000; }
.generic__heading {
    font-family: 'FunctionPro-Medium';
    font-size: 1.65em;
    margin-bottom: 1em;
    overflow-wrap: break-word;
}
.generic__heading a { text-decoration: none; }
.generic__heading a:hover { border-bottom: 1px solid #000; }
.generic__serif { font-family: 'Crimson Text'; }
.generic__subheading {
    font-family: 'FunctionPro-Medium';
    font-size: 1.33em;
    margin-bottom: .75em;
    overflow-wrap: break-word;
}
.generic__subheading a { text-decoration: none; }
.generic__subheading a:hover { border-bottom: 1px solid #000; }

.header {
    background-color: var(--color-beige);
    height: 205px;
    transition: height .5s;
}
@media (max-width: 980px) {
    .header { height: 100px; }
    .header .header__elements { transform: scale(0.7); }
    .header .header__logo-link { margin-bottom: -1.5em; }
    .header .header__logo-stadtforschung {
      margin-top: -1.5em;
      opacity: 0;
    }
}
.header.compact { height: 100px; }
.header.compact .header__elements { transform: scale(0.7); }
.header.compact .header__link--active { border-bottom-width: 2px; }
.header.compact .header__logo-link { margin-bottom: -1.5em; }
.header.compact .header__logo-stadtforschung { opacity: 0; }
.header__compact-location {
    max-width: 100%;
    overflow-x: hidden;
    padding: .5em;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (min-width: 981px) {
    .header__compact-location { display: none; }
}
.header__elements {
    align-items: center;
    display: flex;
    flex-direction: column;
    font-family: 'FunctionPro-Medium';
    font-size: 1.65em;
    justify-content: space-between;
    padding: .5em 0;
    top: 0;
    transform-origin: top;
    transition: transform .5s;
}
.header__link {
    outline: none;
    text-decoration: none;
}
.header__link--active {
    border-bottom: 1px solid var(--color-text);
    transition: border .5s;
}
.header__link__padding {
    padding: .5em;
}
.header__links {
    display: flex;
    justify-content: center;
}
@media (max-width: 980px) {
    .header__links { display: none; }
}
.header__logo {
    display: block;
    height: auto;
    width: 7.5em;
}
.header__logo-link { transition: margin .5s; }
.header__logo-stadtforschung { transition: opacity .5s; }
.issue-tile {
  background-color: var(--color-almost-white);
  transition: box-shadow 0.25s;
}
.issue-tile:hover { box-shadow: 0 0 2.66em var(--color-shadow); }
.issue-tile__cover { position: relative; }
.issue-tile__cover-overlay {
    background-color: var(--color-almost-white-overlay);
    height: 100%;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transition: opacity .3s;
    width: 100%;
}
.issue-tile__cover-overlay .buy {
    bottom: 1em;
    position: absolute;
    right: 1em;
}
.issue-tile__cover-overlay .number {
    left: 1em;
    position: absolute;
    top: 1em;
}
.issue-tile__cover-overlay .quarter {
    position: absolute;
    right: 1em;
    top: 1em;
}
.issue-tile__cover-overlay .title {
    left: 50%;
    position: absolute;
    text-align: center;
    top: 3.99em;
    transform: translateX(-50%);
}
.issue-tile__cover-overlay .view {
    bottom: 1em;
    left: 1em;
    position: absolute;
}
.issue-tile__cover:hover .issue-tile__cover-overlay {
    opacity: 1;
    pointer-events: unset;
}
.issue-tile__label { padding: 1.4em; }
.layout__content {
    flex-grow: 1;
    height: 100vh;
    position: relative;
}
.layout__header {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1;
}
.layout__offset { padding: 0 1.33em; }
.layout__restraint {
    margin: 0 auto;
    max-width: 1300px;
}
.layout__scroll {
    height: 100%;
    overflow-y: auto;
    position: absolute;
    width: 100%;
    z-index: 1;
}
.layout__split { display: flex; }
.newsletter_button {
	background-color: var(--color-grey);
	border: none;
	border-radius: 3px;
	cursor: pointer;
	margin-top: 1em;
	padding: .5em;
}
.newsletter_checkbox { display: none; }
.newsletter_input {
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--color-grey);
  display: block;
  margin-bottom: 1em;
  width: 100%;
}
.newsletter_label { margin-bottom: .5em; }
.pagination {
  background-color: var(--color-almost-white);
  margin-bottom: 1.5em;
  padding: 1em;
  position: sticky;
  text-align: center;
  top: 100px;
  transition: background-color 0.5s;
  z-index: 1;
}
.pagination--active {
  font-family: 'FunctionPro-Medium';
  font-weight: 400;
}
.pagination--docked {
  background-color: var(--color-beige);
  padding: .5em;
}
.pagination.pagination--docked .search__searchform button { border: 1px solid #b7b7b7; }
.pagination.pagination--docked .search__searchform input[type="search"] { border-bottom: 1px solid #b7b7b7; }
.radio {
  background-color: var(--color-almost-white);
  border: 1px solid var(--color-grey);
  border-radius: 3px;
  display: flex;
}
.radio__button { padding: .5em; }
.radio__notice { display: none; }
.radio__notice--shown { display: block; }
.radio__playback_icon { pointer-events: none; }
.radio__seekbar {
    flex-grow: 1;
    position: relative;
}
.radio__seekbar { cursor: pointer; }
.radio__seekbar_progress {
    background-color: var(--color-beige);
    height: 100%;
    left: 0;
    position: absolute;
    width: 1px;
}
.radio__seekbar_text {
    padding: .5em;
    position: absolute;
    right: 0;
}
.search__searchform {
    align-items: center;
    display: flex;
    justify-content: space-between;
}
@media (max-width: 1120px) {
  .search__searchform { flex-direction: column; }
}
.search__searchform button {
    background-color: var(--color-beige);
    border: none;
    border-radius: 3px;
    cursor: pointer;
    padding: .5em 1em;
}
@media (min-width: 1121px) {
    .search__searchform button[data-toggle-filters] {
        display: none;
    }
}
.search__searchform input[type="checkbox"] { outline: none; }
.search__searchform input[type="search"] {
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--color-beige);
    margin: 0 .5em;
    width: 20em;
}
@media (max-width: 690px) {
  .search__searchform input[type="search"] { width: 10em; }
}
@media (max-width: 510px) {
  .search__searchform input[type="search"] { width: 6.5em; }
}
@media (max-width: 450px) {
    .search__searchform input[type="search"] {
        display: block;
        margin-bottom: 1em;
    }
}
.search__filter { padding: .25em; }
.search__filters {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
@media (max-width: 1120px) {
    .search__filters {
        display: none;
        margin-top: 1em;
    }
    .search__filters.shown { display: flex; }
}
.section-article__split {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1em;
}
.section-article__info {
    text-align: right;
    width: calc(35% - 2em);
}
.section-article__title { width: 65%; }
@media (max-width: 740px) {
    .section-article__split { flex-direction: column-reverse; }
    .section-article__info {
        text-align: left;
        width: 100%;
    }
    .section-article__title { width: 100%; }
}
.sidebar {
    background-color: var(--color-almost-white);
    box-sizing: border-box;
    height: 100vh;
    padding-top: 2em;
}
@media (max-height: 450px) {
    .sidebar { font-size: .9em; }
}
@media (max-height: 400px) {
    .sidebar { font-size: .8em; }
}
@media (max-height: 350px) {
    .sidebar { font-size: .7em; }
}
.sidebar__item { position: relative; }
.sidebar__link {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    height: 3em;
    justify-content: center;
    text-decoration: none;
    width: 3.25em;
}
.sidebar__link_disabled { display: none; }
.sidebar__link:hover {
    border-bottom: 1px solid var(--color-beige);
    border-top: 1px solid var(--color-beige);
}
.sidebar__link__edition { line-height: .9em; }
.sidebar__link__top {
    bottom: 0;
    opacity: 0;
    position: absolute;
    transition: bottom .5s, opacity .5s;
}
.sidebar__link__top.active {
    bottom: 2em;
    opacity: 1;
}
.sidebar__searchform {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
}
.sidebar__searchform > div { margin: .15em 0; }
.sidebar__searchform button {
    background-color: var(--color-beige);
    border: none;
    border-radius: 3px;
    cursor: pointer;
    margin-top: 1em;
    padding: .5em;
    width: 100%;
 }
.sidebar__searchform input[type="checkbox"] { outline: none; }
.sidebar__searchform input[type="search"] {
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--color-beige);
    margin-bottom: 1em;
    width: 100%;
}
.sidebar__widget {
    background-color: var(--color-almost-white);
    box-sizing: border-box;
    display: none;
    left: -200px;
    padding: 1em;
    position: absolute;
    top: 1px;
    width: 200px;
    z-index: 2;
}
.sidebar__link.active + .sidebar__widget { display: block; }
.tile {
    background-color: var(--color-almost-white);
    box-sizing: border-box;
    padding: 2em;
    width: calc((100% - 2.66em) / 3);
}
.tile:hover { box-shadow: 0 0 2.66em var(--color-shadow); }
.tile:nth-child(n+4) { margin-top: 1.33em; }
@media (max-width: 960px) {
    .tile { width: calc((100% - 1.33em) / 2); }
    .tile:nth-child(n+3) { margin-top: 1.33em; }
}
@media (max-width: 640px) {
    .tile { width: 100%; }
    .tile:nth-child(n+2) { margin-top: 1.33em; }
}
.tile--festival {
    padding: 0;
    transition: box-shadow 0.25s;
}
.tile--festival:hover { box-shadow: 0 0 2.66em var(--color-shadow); }
.tile--festival img { display: block; }
.tile_header {
    font-family: 'FunctionPro-Medium';
    font-size: 1.65em;
    margin-bottom: 1em;
    overflow-wrap: break-word;
}
.tile_header a { text-decoration: none; }
.tile_header a:hover { border-bottom: 1px solid #000; }
.tile_image_split {
    display: flex;
    justify-content: space-between;
}
.tile_image_split__image { width: 30%; }
.tile_image_split__meta { width: 65%; }
.tiles {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    position: relative;
}
.tiles__magazine {
    display: -ms-grid;
    display: grid;
    grid-gap: .66em;
    margin-bottom: 1.33em;
}
@media (min-width: 540px) {
    .tiles__magazine {
        -ms-grid-columns: 1fr 1.33em 1fr;
        grid-template-columns: 1fr 1fr;
    }
}
@media (min-width: 980px) {
    .tiles__magazine {
        -ms-grid-columns: 1fr 1.33em 1fr 1.33em 1fr 1.33em 1fr;
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}
.tiles__magazine:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}
.tiles__magazine:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
}
.tiles__magazine:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 5;
}
.tiles__magazine:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 7;
}