@media all {  
  body { overflow-x: hidden; overflow-y: scroll; }
  
  .viewport { max-width: 76em; margin: 0 auto; padding: 4.5em 0.5em 3em; overflow: hidden; }
  #head .viewport { padding: 0.75em 0.5em; display: box; display: flexbox; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; -moz-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-justify-content: space-between; -moz-justify-content: space-between; justify-content: space-between; align-items: flex-end; }

  .subpage .section--welcome + #main .viewport { padding: 3em 0.5em; }
  
  #mobile-box { display: block; }
  
  #head { position: fixed; top: 0; right: 0; left: 0; background: #fff; z-index: 2000; }
  #head-box { margin-right: auto; }
  #head-box:after { content: "."; display: block; clear: both; font-size: 0; height: 0; visibility: hidden; }
  
  #logo { padding: 35px 0 0; }
  #logo a { display: block; }
  #logo img { width: 382px; height: 37px; }

  #head--iconnav { margin: 0 3em; }
  #head--iconnav li { margin: 0 0.75em; }
  #head--iconnav li a { display: block; width: 1.75em; height: 1.75em; margin: 0; padding: 0.125em; }
  #head--iconnav li a img { width: 100%; height: 100%; }
  #head--phone { float: left; line-height: 1.2; padding: 0 0 0 2em; background: url(/fileadmin/gfx/phone.svg) no-repeat scroll 0 50%; background-size: 1.5em 1.5em; }
  #head--phone span { display: block; font-size: 0.85em; font-style: italic; line-height: 1.5; }
  #head--phone a { font-size: 1em; font-style: normal; line-height: 1.2; color: #006837; }
  

  /* ---------- Foot ---------- */
  #foot { background: #e6e6e6; }
  #foot .outer--flex { margin: 0 -0.75em; }
  #foot .inner--flex { padding: 0 0.75em; }
  #foot h2, #foot h3 { font-size: 1.667em; font-style: italic; margin: 0.5em 0; }
  #foot p { font-size: 1.1em; }
  #foot a { color: #1a1a1a; }


  /* ---------- Sections ---------- */
  .section--welcome { position: relative; }
  .section--welcome .viewport { padding: 0 0.5em; }
  .section--welcome .inner--flex { width: 50%; }
  .section--welcome .inner--flex.flex--left { position: relative; max-height: 56.25vw; }
  .section--welcome .inner--flex.flex--left .video-container { height: 100%; }
  .section--welcome .inner--flex.flex--left .video-container video { width: 100%; height: 100%; object-fit: cover; }
  .section--welcome .flex--right { background: #006837; padding: 4.5em; }
  .section--welcome .flex--right h2 { color: #fff; text-align: center; margin: 0 0 0.75em; }
  
  .modal-start { display: block; width: 20em; text-align: center; color: #333; background: #fff; margin: 0 auto 0.5em; padding: 0.75em 1em; box-shadow: 0 0 3px rgba(153,153,153,0.5); }
  .modal-start:last-child { margin: 0 auto; }
  
  .subpage .section--welcome .flex--right h2 { font-size: 2em; text-align: left; margin: 0 0 0.75em; }
  .subpage .section--welcome .flex--right a { font-style: italic; text-decoration: underline; color: #707070; }
  .subpage .section--welcome .flex--right a:hover, .subpage .section--welcome .flex--right a:focus { color: #006837; }
  
  .inner--flex.info--flex { width: 25%; padding: 2em 1.5em; color: #fff; }
  .inner--flex.info--flex h2 { font-size: 1.667em; color: #fff; margin: 0 0 0.25em; }
  .inner--flex.info--flex a { color: #fff !important; }
  .inner--flex.info--flex p:last-child { margin: 0; }
  .inner--flex.info--flex:nth-child(1), .inner--flex.info--flex:nth-child(3) { background-color: #006837; }
  .inner--flex.info--flex:nth-child(2), .inner--flex.info--flex:nth-child(4) { background-color: #333; }
  
  .outer--flex.outer--news { width: 75%; }
  .outer--flex.outer--news > .inner--flex { width: 50%; padding: 1.5em 2em; background: #f2f2f2; }
  .outer--flex.outer--news > .inner--flex:first-child { background: #666; }
  /*.outer--flex.outer--news > .inner--flex:nth-child(2) { background: #666; }
  .outer--flex.outer--news > * { color: #fff; text-shadow: 2px 2px 3px #000; }
  .outer--flex.outer--news a, .outer--flex.outer--news a:hover, .outer--flex.outer--news:focus { color: #fff; }*/
  .outer--flex.outer--news .inner--flex > * { color: #333; }
  .outer--flex.outer--news .inner--flex a, .outer--flex.outer--news .inner--flex a:hover, .outer--flex.outer--news .inner--flex a:focus { color: #333; }
  .outer--flex.outer--news > .inner--flex:first-child .box--date, .outer--flex.outer--news > .inner--flex:first-child .box--description, .outer--flex.outer--news > .inner--flex:first-child a, .outer--flex.outer--news > .inner--flex:first-child a:hover, .outer--flex.outer--news > .inner--flex:first-child a:focus { color: #fff; }
  .outer--flex.outer--news .internal-link-news:hover, .outer--flex.outer--news .internal-link-news:focus { text-decoration: underline; }
  .outer--flex.outer--news .news-list-view .outer--flex, .outer--flex.outer--news .news-list-view .inner--flex { margin: 0; }
  .outer--news .box--date, .outer--news .box--description, .outer--news .news-read-more { font-size: 0.9em; }
  
  #tiles--start { width: 25%; }
  #tiles--start .inner--flex { width: 100%; }
  #tiles--start a, #tiles--topics a { font-style: normal; text-decoration: none; color: #fff; }
  #tiles--start a:before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 1; background: rgba(115,115,115,0.6); -webkit-transition: opacity .3s linear; transition: opacity .3s linear; }
  #tiles--start .outer--flex:last-child a:before { display: none; }
  #tiles--start .tile--image { position: relative; }
  #tiles--start  .outer--flex, #tiles--start  .tile--image, #tiles--start  .tile--image a, #tiles--start  .tile--image img {height: 100%;}
  #tiles--start a {display: block; }
  #tiles--start .tile--text { position: absolute; left: 0; bottom: 0; top: 0; padding: 1.5em 2em; }
  #tiles--start .tile--title { font-size: 1.25em; margin: 0 0 0.25em; }
  /*#tiles--start .outer--flex:first-child .tile--title, #tiles--start .outer--flex:nth-child(2) .tile--title, #tiles--start .outer--flex:first-child .tile--subtitle, #tiles--start .outer--flex:nth-child(2) .tile--subtitle { text-shadow: 2px 2px 3px #000; }*/
  #tiles--start .tile--title, #tiles--start .tile--subtitle { display: block; line-height: 1.2; }
  
  #tiles--start li > a, #tiles--topics li > a { display: block; position: relative; width: 100%; height: 0; padding: 0 0 100%; background: none no-repeat scroll 50% 50% #f2f2f2; background-size: cover; }
  
  #tiles--start .tile--image a:hover .tile--title, #tiles--start .tile--image a:focus .tile--title { text-decoration: underline; }
  
  .section--topics { text-align: center; }
  
  .boxes--themes .outer--flex { list-style-type: none; margin: 0 -0.5em; padding: 0; }
  .boxes--themes .inner--flex { display: block; width: 25%; padding: 0 0.5em; margin: 0 0 1em; }
  .boxes--themes #topics--text { height: 100%; text-align: left; background: #f2f2f2; padding: 2em 1.5em; }
  .boxes--themes #topics--text h2 { margin-top: 0; }
  .boxes--themes .inner--flex a { display: block; position: relative; }
  .boxes--themes .inner--flex a:hover .page--title, .boxes--themes .inner--flex a:focus .page--title { text-decoration: underline; }
  .boxes--themes .page--title { position: absolute; bottom: 0; left: 0; right: 0; font-size: 1.25em; color: #1a1a1a; background: rgba(255,255,255,0.5); line-height: 1.2; height: 3em; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; padding: 0.5em 1em; }
  
  .theme-filter { margin: 3em 0 4.5em; }
  .theme-filter .filter--items { margin: 0 -0.5em; }
  .theme-filter .filter--item { display: inline-block; width: 20%; padding: 0 0.5em; }
  .theme-filter .filter--title { display: block; font-size: 1.25em; padding-left: 2.4em; }
  .theme-filter .filter--trigger.is--active .filter--title, .theme-filter .filter--item:hover .filter--title, .theme-filter .filter--item:focus .filter--title { text-decoration: underline; color: #fff; }
  .theme-filter .filter--trigger { background-size: 3em 3em !important; background: none no-repeat scroll 0 0 #f2f2f2; background-position: 1em 50%; cursor: pointer; padding: 1em; }
  .theme-filter .filter--trigger.is--active, .theme-filter .filter--item:hover .filter--trigger, .theme-filter .filter--item:focus .filter--trigger { background-color: #006837; }
  .theme-filter .filter--trigger[data-filter-id="1"] { background-image: url(/fileadmin/gfx/beratung-icon.svg); }
  .theme-filter .filter--trigger[data-filter-id="2"] { background-image: url(/fileadmin/gfx/sucht-infos-icon.svg); }
  .theme-filter .filter--trigger[data-filter-id="3"] { background-image: url(/fileadmin/gfx/praevention-icon.svg); }
  .theme-filter .filter--trigger[data-filter-id="4"] { background-image: url(/fileadmin/gfx/nachsorge-icon.svg); }
  .theme-filter .filter--trigger[data-filter-id="5"] { background-image: url(/fileadmin/gfx/anlaufstellen-icon.svg); }
  .theme-filter .filter--trigger[data-filter-id="8"] { background-image: url(/fileadmin/gfx/substanzen-icon.svg); }
  .theme-filter .filter--trigger[data-filter-id="9"] { background-image: url(/fileadmin/gfx/verhaltensbezogene-suechte-icon.svg); }
  .theme-filter .filter--trigger.is--active[data-filter-id="1"], .theme-filter .filter--item:hover .filter--trigger[data-filter-id="1"], .theme-filter .filter--item:focus .filter--trigger[data-filter-id="1"] { background-image: url(/fileadmin/gfx/beratung-icon-white.svg); }
  .theme-filter .filter--trigger.is--active[data-filter-id="2"], .theme-filter .filter--item:hover .filter--trigger[data-filter-id="2"], .theme-filter .filter--item:focus .filter--trigger[data-filter-id="2"] { background-image: url(/fileadmin/gfx/sucht-infos-icon-white.svg); }
  .theme-filter .filter--trigger.is--active[data-filter-id="3"], .theme-filter .filter--item:hover .filter--trigger[data-filter-id="3"], .theme-filter .filter--item:focus .filter--trigger[data-filter-id="3"] { background-image: url(/fileadmin/gfx/praevention-icon-white.svg); }
  .theme-filter .filter--trigger.is--active[data-filter-id="4"], .theme-filter .filter--item:hover .filter--trigger[data-filter-id="4"], .theme-filter .filter--item:focus .filter--trigger[data-filter-id="4"] { background-image: url(/fileadmin/gfx/nachsorge-icon-white.svg); }
  .theme-filter .filter--trigger.is--active[data-filter-id="5"], .theme-filter .filter--item:hover .filter--trigger[data-filter-id="5"], .theme-filter .filter--item:focus .filter--trigger[data-filter-id="5"] { background-image: url(/fileadmin/gfx/anlaufstellen-icon-white.svg); }
  .theme-filter .filter--trigger.is--active[data-filter-id="8"], .theme-filter .filter--item:hover .filter--trigger[data-filter-id="8"], .theme-filter .filter--item:focus .filter--trigger[data-filter-id="8"] { background-image: url(/fileadmin/gfx/substanzen-icon-white.svg); }
  .theme-filter .filter--trigger.is--active[data-filter-id="9"], .theme-filter .filter--item:hover .filter--trigger[data-filter-id="9"], .theme-filter .filter--item:focus .filter--trigger[data-filter-id="9"] { background-image: url(/fileadmin/gfx/verhaltensbezogene-suechte-icon-white.svg); }
  
  
  .is--theme-filterable.has--filter [data-filter-tags]:not(.is--filtered), .is--news-filterable.has--filter [data-filter-tags]:not(.is--filtered) { display: none !important; }
  
  #topics, .reset-filter { display: block; width: 12em; margin: 1em auto 0; color: #333; font-size: 1.667em; font-style: italic; text-decoration: underline; text-align: center; }
  #topics:hover, #topics:focus, .reset-filter:hover, .reset-filter:focus { color: #006837; }
  
  
  /* ---------- Self Test ---------- */
  .subpage.self-test .columns { overflow: visible; }
  .tx-self-test { position: relative; box-shadow: 0 0 3px rgba(153,153,153,0.5); padding: 0.5em 1.5em; }  
  .tx-self-test .test-title, .tx-self-test .test-result-title { font-size: 1.2em; font-weight: 500; color: #006837; }
  .tx-self-test .test-button { display: inline-block; min-width: 10em; padding: 0.5em 1em; color: #fff; font-weight: 500; line-height: 1.2; text-decoration: none; text-align: center; background: #006837; border: 1px solid transparent; outline: 0; cursor: pointer; }
  .tx-self-test .test-button:hover, .tx-self-test .test-button:focus { color: #fff; background-color: #333; }
  .tx-self-test .test-question { font-size: 1em; font-weight: 500; color: #006837; margin-bottom: 1.5em; }
  .tx-self-test .test-answer { position: relative; margin: 0 0 0.5em; }
  .tx-self-test .test-answer:last-child { margin: 0 0 1.5em; }
  .tx-self-test .test-answer input[type="checkbox"] { position: absolute; width: 22px; height: 22px; left: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); transform: translateY(-50%); }
  .tx-self-test .test-answer label { padding-left: 2em; }
  .tx-self-test .test-answer input[type="radio"] + label span:before { content: ""; display: block; position: absolute; width: 22px; height: 22px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); transform: translateY(-50%); left: 0; background-color: #f2f2f2; }
  .tx-self-test .test-answer input[type="radio"]:checked + label span:before { content: "\2715"; font-size: 1.5em; line-height: 22px; text-align: center; }
  
  .tx-fp-masterquiz h1 { margin-top: 0; }
  
  
  /* ---------- Subpage Substances ---------- */   
  .subpage.substances .column--3 { margin: 0; }
  .subpage.substances .theme-filter .filter--item { width: 50%; text-align: center; }
 
  
  /* ---------- Landing Pages ---------- */   
  .red #head .viewport, .basis #head .viewport, .balance #head .viewport, .skoll #head .viewport { align-items: center; }
  
  .bruecke #logo img { width: 158px; height: 66px; }
  .basis #logo img { width: 195px; height: 56px; }
  .balance #logo img { width: 215px; height: 68px; }
  .skoll #logo img { width: 360px; height: 43px; }
  .praevention #logo img { width: 283px; height: 32px; }
  .sb #logo img { width: 259px; height: 50px; }
  
  .red #logo, .basis #logo, .balance #logo, .skoll #logo { padding: 0 !important; }
  
  .red #head--phone { background-image: url(/fileadmin/gfx/phone-red.svg); }
  .basis #head--phone { background-image: url(/fileadmin/gfx/phone-orange.svg); }
  .balance #head--phone { background-image: url(/fileadmin/gfx/phone-blue.svg); }
  .skoll #head--phone { background-image: url(/fileadmin/gfx/phone-skoll.svg); }
  
  .red #head--phone a { color: #AE0018; }
  .basis #head--phone a { color: #F27C00; }
  .balance #head--phone a { color: #0087C0; }
  .skoll #head--phone a { color: #0085CF; }
  
  .red .socialmedia, .red .section--about .frame-type-menu_pages li a, .red .page-navigation a:hover, .red .page-navigation a:focus, .red .page-navigation .current a { background-color: #AE0018; }
  .basis .socialmedia, .basis .section--about .frame-type-menu_pages li a, .basis .page-navigation a:hover, .basis .page-navigation a:focus, .basis .page-navigation .current a{ background-color: #F27C00; }
  .balance .socialmedia, .balance .section--about .frame-type-menu_pages li a, .balance .page-navigation a:hover, .balance .page-navigation a:focus, .balance .page-navigation .current a { background-color: #0087C0; }
  .skoll .socialmedia, .skoll .section--about .frame-type-menu_pages li a, .skoll .page-navigation a:hover, .skoll .page-navigation a:focus, .skoll .page-navigation .current a { background-color: #0085CF; }
  
  .subpage .section--topics .viewport { padding: 0 0.5em; overflow: visible; }
  .tiles--landing { margin-top: -5em; }
  .tiles--landing .outer--flex { list-style-type: none; padding: 0; margin: 0 -0.5em; -webkit-justify-content: center; -moz-justify-content: center; justify-content: center; }
  .tiles--landing .inner--flex { display: block; width: 25%; padding: 0 0.5em; margin: 0 0 1em; }
  .tiles--landing #topics--text { height: 100%; text-align: left; background: #f2f2f2; padding: 2em 1.5em; }
  .tiles--landing #topics--text h2 { margin-top: 0; }
  .tiles--landing .inner--flex a { display: block; position: relative; }
  .tiles--landing .page--title { position: absolute; bottom: 0; left: 0; right: 0; font-size: 1.25em; color: #1a1a1a; background: rgba(255,255,255,0.5); line-height: 1.2; height: 3em; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; padding: 0.5em 1em; }
  .l-p #topics--text > *, .l-p #topics--text a { color: #fff !important; }
  .l-p .news-list-view .inner--flex { margin: 0; }
  .l-p .box--date, .l-p .box--description, .l-p .news-read-more { font-size: 0.9em; }
  .l-p .internal-link-news:hover, .l-p .internal-link-news:focus { text-decoration: underline; }
  .red #topics--text { background: #AE0018; }
  .basis #topics--text { background: #F27C00; }
  .balance #topics--text { background: #0087C0; }
  .skoll #topics--text { background: #0085CF; }
  
  .section--about .outer--flex { position: relative; }
  .section--about .inner--flex.flex--left { width: 44%; }
  .section--about .inner--flex.flex--right { width: 56%; position: relative; background-color: #f2f2f2; padding: 4.5em 3em; }
  .section--about .inner--flex.flex--right h1, .section--subject-area h2 { font-size: 2em; text-transform: uppercase; margin: 0 0 0.25em; }
  .section--about .inner--flex.flex--right h2, .section--subject-area h3 { margin: 0 0 1.5em; }
  .section--about .inner--flex.flex--right a { display: block; text-decoration: underline; color: #333; margin: 0 0 3em; }
  .section--about .frame-type-menu_pages { height: 3em; }
  .section--about .frame-type-menu_pages ul { list-style-type: none; margin: 0 -0.25em; }
  .section--about .frame-type-menu_pages li { float: left; width: 25%; margin: 0; text-align: center; padding: 0 0.25em; }
  .section--about .frame-type-menu_pages li a { display: block; text-transform: uppercase; color: #fff; background: #666; padding: 0.5em; line-height: 1.2; height: 3em; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
  .section--about .frame-type-menu_pages li a:hover, .section--about .frame-type-menu_pages li a:focus { color: #fff; text-decoration: underline; }
  .section--about .frame-type-menu_pages li span { display: block; margin: 0 auto; }
  
  .balance .section--about .frame-type-menu_pages li { width: 20%; }
  
  .section--subject-area .viewport { background: #f2f2f2; text-align: center; padding: 4.5em 1.5em 3em; }
  .section--subject-area .ce-row { display: box; display: flexbox; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: center; -moz-justify-content: center; justify-content: center; align-items: center; }
  .section--subject-area .ce-gallery .ce-column { margin-right: 100px; }
  .section--subject-area .ce-gallery .ce-column:last-child { margin-right: 0; }
  .section--subject-area .ce-left .ce-gallery, .section--subject-area .ce-gallery .ce-column { float: none; }
  
  .sb .tiles--landing .page--title { height: 6em; }
    
  
  /* ---------- News ---------- */
  .news-list-view .outer--flex { list-style-type: none; }
  .news-list-view .inner--flex { width: 100%; margin: 0 0 2em; }
  .box--date { display: block; }
  .box--title { font-size: 1.5em; }
  .news-read-more { margin: 0.5em 0 0; }
  .box--title { display: block; font-size: 1.25em; margin: 0 0 0.25em; }
  
  .page-navigation { margin: 3em auto 0; text-align: center; }
  .page-navigation a { display: block; color: #fff; margin: 0; padding: 0; font-weight: 400; font-size: 0.8em; line-height: 2.5; text-decoration: none; background-color: #666; border: 0; }
  .page-navigation a:hover, .page-navigation a:focus, .page-navigation .current a { color: #fff; font-weight: 400; background-color: #666; }
  .page-navigation ul { list-style-type: none; margin: 0; overflow: hidden; }
  .page-navigation li { list-style-type: none; display: inline-block; height: 2em; line-height: 2; padding: 0 !important; margin: 0 0.5em 0.5em 0 !important; min-width: 2em; text-align: center; }
  .page-navigation li:before { display: none !important; }
  .page-navigation li.last { margin-right: 0; }
  
  .article h2 { margin-top: 0; }
  
  
  /* ---------- Modal ---------- */
  .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; visibility: hidden; }
  .modal.is--initialized { display: none; visibility: visible; }
  .modal.is--initialized.is--open { display: block; }
  .modal .modal-close.is--background { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(242,242,242,0.9); z-index: 1; outline: 0; }
  .modal .modal-close.is--cross { position: absolute; top: 0.5em; right: 0.5em; width: 2em; height: 2em; cursor: pointer; -webkit-transform: rotate(45deg); transform: rotate(45deg); z-index: 1; outline: 0; }
  .modal .modal-close.is--cross:before, .modal .modal-close.is--cross:after { content: ""; position: absolute; top: 0; right: 0; display: block; background: #707070; }
  .modal .modal-close.is--cross:before { top: 50%; margin-top: -2px; width: 2em; height: 3px; }
  .modal .modal-close.is--cross:after { left: 50%; margin-left: -2px; width: 3px; height: 2em; }
  .modal .modal-wrapper { display: block; position: relative; top: 50%; max-width: 100%; width: 52em; max-height: 50%; max-height: 50vh; height: 100%; margin: 0 auto; padding: 3em 0 0; background: #fff; overflow: hidden; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 5; box-shadow: 0 0 3px rgba(153,153,153,0.5); }
  .modal .modal-content { display: block; position: relative; width: 100%; height: 100%; margin: 0; padding: 0 3em 3em; overflow-y: auto; }
  .modal .modal-content .frame:first-of-type .ce-header * { margin-top: 0; }
  .modal .modal-content h2 { font-size: 2em; font-style: normal; }
  
  .modal-services { text-decoration: underline; }
  .modal-services:hover, .modal-services:focus { text-decoration: underline; }
  
  
  /* ---------- Social Media ---------- */
  .socialmedia--links { position: fixed; top: 200px; right: 0; z-index: 90; }
  .socialmedia--links ul, .socialmedia--links li { list-style-type: none; margin: 0; }
  .socialmedia--links li { display: block; float: right; clear: both; }
  .socialmedia--links li:after { content: "."; display: block; clear: both; font-size: 0; visibility: hidden; height: 0; }
  .socialmedia--links li + li { margin: 0.25em 0 0; }
  .socialmedia { display: block; width: 2.5em; height: 2.5em; text-indent: -999999px; color: transparent; background: none no-repeat scroll 0.25em 0.25em #006837; background-size: 2em 2em; overflow: hidden; }
  .socialmedia.socialmedia--phone { background-image: url(/fileadmin/gfx/phone-white.svg); }
  .socialmedia.socialmedia--email { background-image: url(/fileadmin/gfx/mail-white.svg); }
  .socialmedia.socialmedia--news { background-image: url(/fileadmin/gfx/news-white.svg); }
  .socialmedia.socialmedia--start { background-image: url(/fileadmin/gfx/suchthilfe-home.svg); }
  #back-to-start { margin: 0 0 2.5em; }
  .socialmedia.socialmedia--trigger { width: auto; text-indent: 0; cursor: pointer; }
  .socialmedia.socialmedia--trigger a { display: block; width: 9em; margin: 0 0 0 2.5em; font-style: normal; text-align: center; line-height: 2.5; color: #fff !important; -webkit-transition: margin 0.3s linear; transition: margin 0.3s linear; }
  .socialmedia.socialmedia--trigger.is--closed a { margin-right: -9em; }
  
  
  /* -------------------- Powermail -------------------- */ 
  .powermail_form { margin: 0 0 1.5em; }
  .powermail_form > h3 { margin-top: 0; }
  .powermail_fieldwrap.nolabel .powermail_label { display: block !important; }
  .powermail_fieldwrap.layout1 .powermail_field { margin-bottom: 0 !important; }
  .powermail_fieldwrap:after { content: "."; display: block; clear: both; height: 0; font-size: 0; visibility: hidden; }
  .powermail_field { margin: 0 0 0.5em; }
  .powermail_field textarea { min-height: 14.625em; }
  .powermail_label { display: block; line-height: 1.5; } .powermail_field input, .powermail_field textarea { display: block; width: 100%; resize: none; }
  .powermail_field select { max-width: 100%; height: 1.8em; }
  .powermail_field .powermail_checkbox, .powermail_field .powermail_radio { display: inline-block; width: auto; }
  .powermail_field .powermail_file { padding: 0.25em 0; border: 0; }
  .powermail_field .powermail_submit { float: right; max-width: 10em; }
  .powermail_fieldwrap.layout1 .powermail_field, .powermail_fieldwrap.layout1 + .powermail_fieldwrap .powermail_field { line-height: 1.3; font-size: 13px; }
  .powermail_form.layout1 > h3 { display: none; }
  .powermail_form.layout1 .powermail_label { display: none; }
  .powermail_fieldwrap_hinweiszumdatenschutz { font-size: 0.8em; }
  .parsley-errors-list { list-style-type: none; margin: 0; font-size: 13px; }
  .parsley-errors-list li { margin: 0; color: #e40021; }
  .powermail_progressbar { float: right; max-width: 8em; width: 100%; height: 0.333em; margin: 0; border: none; clear: both; }
  .powermail_progressbar.disable { display: none; }
  .powermail_progressbar .powermail_progress { background: #0082ca; width: 0%; max-width: 100%; -webkit-animation: progress 5s 1 forwards; -moz-animation: progress 5s 1 forwards; -ms-animation: progress 5s 1 forwards; animation: progress 5s 1 forwards; }
  .powermail_progressbar .powermail_progress .powermail_progess_inner { width: 100%; height: 0.333em; overflow: hidden; background: url(/typo3conf/ext/powermail/Resources/Public/Image/icon_loading.gif) repeat-x; opacity: 0.45; }
  .powermail_confirmation .powermail_progressbar { width: 100%; }
  
  .powermail_confirmation b { color: #333; }
  
  .tx-powermail input.btn.btn-danger { float: left; }
  .tx-powermail input.btn.btn-primary { float: right; }
  
  
  @-webkit-keyframes progress {
    to {
      width: 100%;
    }
  }
  @-moz-keyframes progress {
    to {
      width: 100%;
    }
  }
  @-ms-keyframes progress {
    to {
      width: 100%;
    }
  }
  @keyframes progress {
    to {
      width: 100%;
    }
  }
  
  
  /* ---------- Map ---------- */
  #map { width: 100%; min-height: 400px; height: 40vh; }
  .map--no-interaction { cursor: pointer; }
  .map--no-interaction #map, .map--no-interaction #map * { pointer-events: none !important; }
  

  /* ---------- Flex ---------- */
  .outer--flex { display: box; display: flexbox; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; -moz-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; }

  .inner--flex { width: 33.333%; }


  /* ---------- Columns / Grids ---------- */
  .columns { overflow: hidden; }
  .column--1 { float: left; width: 30%; padding: 0 3em 0 1.5em; }
  .column--3 { margin: 0 0 0 30%; padding-right: 6em; }
  
  .grids { overflow: hidden; }
  .grid--left { float: left; }
  .grid--right { float: right; }
  .grid--50 { width: 50%; }
  .grid--33 { width: 33.333%; }
}