@media screen and (max-width: 1440px) {
  body { font-size: 18px; }
  
  .navigation.navigation--mobile { top: 99px; }
  
  .bruecke .navigation.navigation--mobile { top: 93px; }
  .basis .navigation.navigation--mobile { top: 83px; }
  .balance .navigation.navigation--mobile { top: 95px; }
  .skoll .navigation.navigation--mobile, .praevention .navigation.navigation--mobile { top: 70px; }
  .sb .navigation.navigation--mobile { top: 77px; }
}

@media screen and (max-width: 1280px) {
  body { font-size: 18px; }

  #logo { padding: 28px 0 0; }
  #logo img { width: 306px; height: 30px; }

  .navigation.navigation--mobile { top: 85px; }
  
  .tiles--landing { margin-top: -4em; }
  
  .section--subject-area .inner--flex { padding: 0 3em; }
}

@media screen and (max-width: 1024px) {
  body { font-size: 16px; }
  
  #logo { padding: 9px 0 0; }

  #head--phone { background-size: 2em 2em; width: 2em; height: 2em; padding: 0; background-image: url(/fileadmin/gfx/phone-gray.svg) !important; }
  #head--phone span { display: none !important; }
  #head--phone a { display: block; width: 2em; height: 2em; text-indent: -9999999px; }
  
  .navigation.navigation--mobile { top: 67px; }
  
  .section--welcome .flex--right { padding: 4.5em; }
  
  #tiles--start .outer--flex:first-child, #tiles--start .outer--flex:nth-child(2) { width: 50%; }
  #tiles--start .outer--flex:last-child { width: 100%; }
  #tiles--start .outer--flex:last-child .tile--image a img { width: 100%; height: 200px; }
  
  .theme-filter .filter--title { font-size: 1em; padding-left: 3em; }
  
  #foot h2, #sitemap h3 { font-size: 2em; }
  
  .bruecke .navigation.navigation--mobile { top: 90px; }
  .basis .navigation.navigation--mobile { top: 80px; }
  .balance .navigation.navigation--mobile { top: 92px; }
  .skoll .navigation.navigation--mobile, .praevention .navigation.navigation--mobile { top: 67px; }
  .sb .navigation.navigation--mobile { top: 74px; }
}

@media screen and (max-width: 812px) { 
  .columns.linearize-level-1 .column--1, .columns.linearize-level-1 .column--3,
  .grids.linearize-level-1 .grid--left, .grids.linearize-level-1 .grid--right { float: none; width: auto; margin: 0; padding: 0; }
  
  #main .column--1 { display: none; }
  
  #logo img { width: 268px; height: 26px; }
  
  .navigation.navigation--mobile { right: -66.666%; width: 66.666%; }

  .section--welcome .inner--flex { width: 100%; }
  .section--welcome .flex--right { padding: 4.5em 0.5em; }
  .modal-start { width: auto; }
  
  .inner--flex.info--flex { text-align: center; padding: 1em; }

  .outer--flex.outer--news, .outer--flex.outer--news > .inner--flex, #tiles--start { width: auto; }
  
  .theme-filter { margin: 3em 0; }
  .theme-filter .filter--item { width: 50%; margin: 0 0 0.5em; }
  .theme-filter .filter--item:last-child { margin-bottom: 0; }
  .theme-filter .filter--title { font-size: 1.25em; }
  .boxes--themes .inner--flex, #foot .inner--flex { width: 50%; }

  #metanav { margin: 0 0 3em; }
  
  .subpage .section--topics .viewport { padding: 4.5em 0.5em 3em; }
  .tiles--landing { margin-top: 0; }
  .tiles--landing .inner--flex { width: 50%; }
  
  .section--about .inner--flex.flex--left { position: static; width: 100%; height: 50vh; max-height: 56.25vw; }
  .section--about .inner--flex.flex--right { width: 100%; text-align: center; }
  
  .section--about .frame-type-menu_pages li, .balance .section--about .frame-type-menu_pages li { width: 50%; }
  .section--about .frame-type-menu_pages li:nth-child(3), .section--about .frame-type-menu_pages li:nth-child(4), .balance .section--about .frame-type-menu_pages li:nth-child(5) { padding: 0.25em 0.25em 0 0.25em; }

  .socialmedia--links { position: static; }
  .socialmedia--links li { float: none; clear: none; }
  .socialmedia--links li + li { margin: 0; }
  .socialmedia { background-color: transparent !important; width: 2em; height: 2em; background-position: 0 0; background-size: 2em 2em; }
  .socialmedia--phone, .socialmedia--news { display: none; }
  .socialmedia.socialmedia--email { background-image: url(/fileadmin/gfx/mail-gray.svg); }
  .socialmedia.socialmedia--trigger.is--closed a { margin-right: 0; }
  #back-to-start { display: none; }
  
  #head--info { margin-left: 1.5em; }
  
  .skoll #logo img { width: 288px; height: 34px; }
  .praevention #logo img { width: 198px; height: 22px; }
}

@media screen and (max-width: 640px) { 
  #head--info, #head--buttons { display: none; }
  
  .navigation.navigation--mobile { right: -100%; width: 100%; }
  .navigation.navigation--mobile > ul { padding: 0 0.5em 1.5em 1.5em; }
  .navigation.navigation--mobile .icon .line { width: 30px; }
  .navigation.navigation--mobile .icon .line.first { -webkit-transform: rotate(45deg) translate(0, 3px); -moz-transform: rotate(45deg) translate(0, 3px); transform: rotate(45deg) translate(0, 3px); }
  .navigation.navigation--vertical li a { margin: 0.5em 0; }
  .navigation.navigation--mobile .icon-line { margin: 2em 0 2em 1.5em; }
  .menu--back-to-start { margin: 1em 1.5em 1em 0; }
  
  .section--welcome .flex--right { padding: 1.5em 0.5em; }
  
  #tiles--start .outer--flex:first-child, #tiles--start .outer--flex:nth-child(2) { width: 100%; }
  #tiles--start .outer--flex:last-child .tile--image a img { height: 150px; }
  #tiles--start .tile--text, .outer--flex.outer--news > .inner--flex { padding: 1.25em 1em; }
  
  .theme-filter .filter--item { display: block !important; width: 100% !important; margin: 0 auto 0.5em !important; }
  .boxes--themes .inner--flex { width: 100%; }
  
  #foot .outer--flex { margin: 0; }
  #foot .inner--flex { width: 100%; padding: 0; }

  #map { height: 300px; height: 40vh; }
  
  .subpage .section--topics .viewport { padding: 0.5em 0.5em 1.5em; }
  .tiles--landing .inner--flex { width: 100%; margin: 0 0 0.5em; }
  .tiles--landing .inner--flex:last-child { margin: 0; }
  .tiles--landing .inner--flex a { background: #f2f2f2; }
  .tiles--landing .inner--flex img { display: none; }
  .tiles--landing .page--title { position: static; }
  .tiles--landing #topics--text { padding: 1em; }
  .tiles--landing #topics--text h2 { color: #fff; margin: 0; }
  .tiles--landing #topics--text span { display: none; }
  .tiles--landing #topics--text .box--date, .tiles--landing #topics--text .box--title, .tiles--landing #topics--text .box--title span { display: block; }
  .tiles--landing #topics--text .box--title a, .tiles--landing #topics--text .news-read-more a { background: none; }
  
  .red .tiles--landing #topics--text { background: #AE0018; }
  .basis .tiles--landing #topics--text { background: #F27C00; }
  .balance .tiles--landing #topics--text { background: #0087C0; }
  .skoll .tiles--landing #topics--text { background: #0085CF; }
  
  .subpage .section--about .viewport { padding: 1.5em 0.5em 3em; }
  .section--about .inner--flex.flex--right { padding: 3em 1.5em 1.5em; }
  .section--about .frame-type-menu_pages li, .balance .section--about .frame-type-menu_pages li { width: 100%; padding: 0.25em 0.25em 0 0.25em; }
  
  .section--subject-area .viewport { padding: 3em 0.5em; }
  .section--subject-area .inner--flex { width: 100%; padding: 0 1.5em; margin: 0 0 3em; }
  .section--subject-area .inner--flex:last-child { margin: 0; }
}

@media screen and (max-width: 480px) {
  h1, h2, h3, h4, h5, h6 { word-wrap: break-word; overflow-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; }
  blockquote, blockquote + p { font-size: 1.25em; }
  
  #logo img { width: 157px; height: 15px; }
  #head--iconnav { margin: 0 1.5em 0 0; }
  #head--iconnav li { margin: 0 0.25em; }
  #head--iconnav li a { width: 1.5em; height: 1.5em; }
  
  .icon-line .icon .line { width: 38px; height: 4px; }
  
  .navigation.navigation--mobile { top: 64px !important; }
  
  .section--welcome .flex--right h2 { font-size: 1.5em; }
  
  #topics { font-size: 1.25em; }
  
  .sitemap { float: none; width: auto; padding-right: 0; }
  
  .bruecke #logo img { width: 95px; height: 40px; }
  .basis #logo img { width: 117px; height: 34px; }
  .balance #logo img { width: 129px; height: 36px; }
  .skoll #logo img { width: 173px; height: 20px; }
  .praevention #logo img { width: 138px; height: 31px; }
  .sb #logo img { width: 155px; height: 30px; }
  
  .socialmedia--links { margin-right: 1.5em; }
  
  .section--subject-area .ce-gallery .ce-column { margin-right: 30px; margin-bottom: 30px; }
}

@media screen and (max-width: 320px) {

}