@charset "UTF-8";
@supports (font-variation-settings: normal) {
  @font-face {
    font-family: "Roboto Flex";
    src: url("Assets/Fonts/RobotoFlex[slnt,wdth,wght,opsz].woff2") format("woff2 supports variations"), url("Assets/Fonts/RobotoFlex[slnt,wdth,wght,opsz].woff2") format("woff2-variations");
    font-weight: 100 1000;
    font-stretch: 25% 151%; } }

.font-weight-100, .text-bold-100 {
  font-weight: 100; }

.font-weight-200, .text-bold-200 {
  font-weight: 200; }

.font-weight-300, .text-bold-300 {
  font-weight: 300; }

.font-weight-400, .text-bold-400 {
  font-weight: 400; }

.font-weight-500, .text-bold-500 {
  font-weight: 500; }

.font-weight-600, .text-bold-600 {
  font-weight: 600; }

.font-weight-700, .text-bold-700 {
  font-weight: 700; }

.font-weight-800, .text-bold-800 {
  font-weight: 800; }

.font-weight-900, .text-bold-900 {
  font-weight: 900; }

.font-weight-1000, .text-bold-1000 {
  font-weight: 1000; }

.font-stretch-25 {
  font-stretch: 25%; }

.font-stretch-50 {
  font-stretch: 50%; }

.font-stretch-75 {
  font-stretch: 75%; }

.font-stretch-100 {
  font-stretch: 100%; }

.font-stretch-125 {
  font-stretch: 125%; }

.font-stretch-150 {
  font-stretch: 150%; }

a.btn:visited.btn-success {
  color: #fff; }

h1, h2, h3, h4, h5, h6 {
  font-weight: 900;
  font-family: "Roboto Flex"; }

.btn, .card, .input, .dropdown-menu, .alert {
  border-radius: 0; }

.btn, .input, input[type=text] {
  font-family: "Roboto Flex"; }

.alert {
  line-height: 1.3em; }
  .alert.alert-success {
    border-left: 7px solid #19652b; }
  .alert.alert-warning {
    border-left: 7px solid #987405; }
  .alert.alert-danger {
    border-left: 7px solid #9c2530; }

.Normal {
  font-size: 1rem;
  line-height: 1.5rem;
  font-family: 'Times New Roman', Times, serif; }
  .Normal .sans-serif {
    font-family: "Roboto Flex", Tahoma, Verdana, Arial; }

html {
  font-size: 22px;
  line-height: 1.5rem;
  cursor: default;
  scroll-behavior: smooth; }

body {
  font-family: "Roboto Flex";
  font-size: 1rem;
  font-weight: 200; }

header {
  font-size: 1rem; }

body.noscroll {
  overflow: hidden; }

#dogsSiteWrapper {
  max-width: 1950px;
  margin: auto; }

header[role="heading"] {
  /*background-color: $color-6;*/
  background-color: var(--cyan);
  color: white;
  font-size: 17px; }

footer {
  background-color: #222; }
  footer #MainFooter {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7); }
    footer #MainFooter a {
      color: rgba(255, 255, 255, 0.7);
      transition: all .3s; }
      footer #MainFooter a:hover, footer #MainFooter a:focus {
        text-decoration: none;
        color: white; }
  footer #BottomFooter {
    font-size: 14px;
    line-height: 1.4em;
    color: rgba(255, 255, 255, 0.7); }
    footer #BottomFooter .container {
      border-top: 1px solid rgba(255, 255, 255, 0.3); }
    footer #BottomFooter a {
      color: rgba(255, 255, 255, 0.7);
      transition: all .3s; }
      footer #BottomFooter a:hover, footer #BottomFooter a:focus {
        text-decoration: none;
        color: white; }

.scroll-to-top-2 {
  position: fixed;
  right: 20px;
  bottom: 30px;
  background-image: url("Images/scroll-to-top-2.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 50px;
  height: 50px;
  opacity: .2;
  transition: all .5s;
  z-index: 9999999;
  cursor: pointer; }
  .scroll-to-top-2:hover {
    opacity: 1; }

.waspo-tab .nav-tabs .nav-item {
  border-width: 0;
  border-bottom: 3px;
  border-bottom: 3px solid transparent; }

.waspo-tab .nav-tabs .nav-link {
  border-width: 0;
  border-bottom: 3px solid transparent;
  color: var(--blue); }
  .waspo-tab .nav-tabs .nav-link.active {
    border-bottom: 3px solid var(--blue);
    color: var(--black); }

.waspo-accordion .card-header, .dogs-accordion .card-header {
  font-weight: 100;
  cursor: pointer; }
  .waspo-accordion .card-header h5, .dogs-accordion .card-header h5 {
    font-weight: inherit;
    font-weight: 100; }
    .waspo-accordion .card-header h5 a, .dogs-accordion .card-header h5 a {
      color: var(--black); }
      .waspo-accordion .card-header h5 a:hover, .waspo-accordion .card-header h5 a:active, .dogs-accordion .card-header h5 a:hover, .dogs-accordion .card-header h5 a:active {
        text-decoration: none; }

.dogs {
  padding: 0 1em 1em 1em; }
  .dogs:before {
    font-family: "Roboto Flex";
    display: block;
    padding-bottom: 1em;
    font-weight: 700; }
  .dogs.dogs-translation {
    border-left: 7px solid #7f441c;
    color: #7f441c; }
    .dogs.dogs-translation:before {
      content: 'Hund - Deutsch; Deutsch - Hund';
      color: #7f441c;
      font-weight: 700; }
  .dogs.dogs-danger {
    border-left: 7px solid #9c2530; }
    .dogs.dogs-danger:before {
      content: 'Problem';
      color: #9c2530; }
  .dogs.dogs-warning {
    border-left: 7px solid #987405; }
    .dogs.dogs-warning:before {
      content: 'Vorsicht!';
      color: #987405; }
  .dogs.dogs-success {
    border-left: 7px solid #19652b; }
    .dogs.dogs-success:before {
      content: 'Lösung';
      color: #19652b; }
  .dogs.dogs-comment {
    border-left: 7px solid #ad9e95;
    color: #9c6e4c;
    font-size: .85rem; }
    .dogs.dogs-comment:before {
      content: '';
      color: #9c6e4c; }
  .dogs.dogs-right-way {
    border-left: 7px solid #19652b; }
    .dogs.dogs-right-way:before {
      content: 'So ist es richtig';
      color: #19652b; }
  .dogs.dogs-wrong-way {
    border-left: 7px solid #9c2530; }
    .dogs.dogs-wrong-way:before {
      content: 'So ist es falsch';
      color: #9c2530; }

.more-content:before {
  content: 'Mehr erfahren';
  background-color: #9c6e4c;
  color: #fff;
  padding: .3em .7em;
  display: block; }

.page-content:before {
  content: 'Auf dieser Seite';
  background-color: #9c6e4c;
  color: #fff;
  padding: .3em .7em;
  display: block; }

.pad-block, pad-b-4 {
  margin-bottom: 7em; }

.container-fluid .Normal .row {
  margin-left: .0em;
  margin-right: .0em; }

.DNNContainer_Title_h2 .heading_wrapper {
  margin-left: .0em;
  margin-right: .0em;
  padding-left: .5em; }

a.list-group-item {
  padding: .35em .7em;
  font-size: .7rem;
  line-height: 1.5em;
  transition: all .3s;
  font-family: "Roboto Flex"; }
  a.list-group-item:visited {
    color: inherit; }
  a.list-group-item:hover, a.list-group-item:focus {
    /*color:$color-3;*/ }
  a.list-group-item > span {
    display: block;
    font-size: .8em;
    font-style: italic;
    color: #555;
    opacity: .7;
    line-height: 1.3em; }

a.list-group-item, a.list-group-item:visited, a.list-group-item-action, a.list-group-item-action:visited {
  color: rgba(127, 68, 28, 0.8);
  transition: all .4s; }
  a.list-group-item:hover, a.list-group-item:focus, a.list-group-item:active, a.list-group-item:visited:hover, a.list-group-item:visited:focus, a.list-group-item:visited:active, a.list-group-item-action:hover, a.list-group-item-action:focus, a.list-group-item-action:active, a.list-group-item-action:visited:hover, a.list-group-item-action:visited:focus, a.list-group-item-action:visited:active {
    color: #7f441c; }

.img-overlay {
  position: relative;
  font-size: .6em; }
  .img-overlay > div {
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%); }
    .img-overlay > div > p.h1 {
      display: none; }
    .img-overlay > div > p.h4 {
      font-size: 1.3em;
      width: 50%; }

#message-overlay, #message-response-overlay, #message-thank-you-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.999);
  cursor: default;
  transition: all .5s;
  overflow-y: scroll; }
  #message-overlay[aria-hidden="true"], #message-response-overlay[aria-hidden="true"], #message-thank-you-overlay[aria-hidden="true"] {
    transition: opacity 1s, z-index 0s 1s;
    width: 100vw;
    z-index: -1;
    opacity: 0; }
  #message-overlay[aria-hidden="false"], #message-response-overlay[aria-hidden="false"], #message-thank-you-overlay[aria-hidden="false"] {
    transition: opacity 1s;
    width: 100%;
    z-index: 999999;
    opacity: 1; }
  #message-overlay #closeMessageOverlayTimes, #message-response-overlay #closeMessageOverlayTimes, #message-thank-you-overlay #closeMessageOverlayTimes {
    z-index: 100;
    opacity: .5;
    transition: all .4s; }
    #message-overlay #closeMessageOverlayTimes > div, #message-response-overlay #closeMessageOverlayTimes > div, #message-thank-you-overlay #closeMessageOverlayTimes > div {
      width: 40px;
      height: 40px;
      position: relative;
      display: inline-block; }
      #message-overlay #closeMessageOverlayTimes > div:before, #message-overlay #closeMessageOverlayTimes > div:after, #message-response-overlay #closeMessageOverlayTimes > div:before, #message-response-overlay #closeMessageOverlayTimes > div:after, #message-thank-you-overlay #closeMessageOverlayTimes > div:before, #message-thank-you-overlay #closeMessageOverlayTimes > div:after {
        content: '';
        position: absolute;
        width: 36px;
        height: 4px;
        background-color: #000;
        border-radius: 2px;
        top: 16px; }
      #message-overlay #closeMessageOverlayTimes > div:before, #message-response-overlay #closeMessageOverlayTimes > div:before, #message-thank-you-overlay #closeMessageOverlayTimes > div:before {
        webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        transform: rotate(45deg);
        left: 2px; }
      #message-overlay #closeMessageOverlayTimes > div:after, #message-response-overlay #closeMessageOverlayTimes > div:after, #message-thank-you-overlay #closeMessageOverlayTimes > div:after {
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        transform: rotate(-45deg);
        right: 2px; }
    #message-overlay #closeMessageOverlayTimes:hover, #message-response-overlay #closeMessageOverlayTimes:hover, #message-thank-you-overlay #closeMessageOverlayTimes:hover {
      opacity: 1; }

/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap 4 breakpoints
*/
/* 
Extra small devices (portrait phones, less than 576px) 
No media query since this is the default in Bootstrap because it is "mobile first"
*/
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .img-overlay > div > p.h1 {
    display: block;
    font-size: 2em; }
  .img-overlay > div > p.h4 {
    font-size: 1.3em;
    width: 65%; } }

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
  .img-overlay > div > p.h1 {
    display: block;
    font-size: 3em; }
  .img-overlay > div > p.h4 {
    font-size: 1.8em;
    width: 65%; } }

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .img-overlay > div > p.h1 {
    display: block;
    font-size: 4em; }
  .img-overlay > div > p.h4 {
    font-size: 2.2em;
    width: 75%; } }

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .img-overlay > div > p.h1 {
    display: block;
    font-size: 5em; }
  .img-overlay > div > p.h4 {
    font-size: 2em;
    width: 100%; }
  .container-fluid .Normal .row {
    max-width: 1580px;
    margin-left: auto;
    margin-right: auto; }
  .DNNContainer_Title_h2 .heading_wrapper {
    max-width: 1580px;
    margin-left: auto;
    margin-right: auto; } }