/*
Theme Name: dtk
Theme URI: https://www.rising-systems.de/
Author: rising systems AG
Author URI: https://www.rising-systems.de/
Description: Custom theme created for DTK 1888 e.v. (Deutscher Teckelklub 1888 e.V.)
Version: 1.6.10
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dtk
Tags: club, association
*/

/*********************************************************/
/*----------DTK font imports ----------------------------*/
/*****************- Authors: Calvin Wiegandt -************/

@import url("../dtk/fonts/bootstrap-icons/bootstrap-icons.css");


/*********************************************************/
/*----------DTK font imports ----------------------------*/
/*****************- Authors: Calvin Wiegandt -************/

/*********************************************************/
/*---------DTK css variables ----------------------------*/
/*******************- Authors: Markus Ruchter -***********/

:root {
  /* Development Switch: SET TO 0px FOR PROD!!!!  container borders - set this to 0px to switch off the borders arround div containers, they have only been set to facilitate the layout process*/
  --dev-container-border-size: 0px;

  /*Font variables*/

  /* Font Style general - Defining theme standard Font*/
  --dtk_theme__standardFont--sans-serif: "Montserrat", sans-serif;
  /* Font Style general - Defining theme standard Font for headlines*/
  --dtk_theme__standardFont--headlines: "Playfair Display", serif;
  /* Font Style general - Font weight light*/
  --dtk_theme__fontWeight--light: 400;
  /* Font Style general - Font weight medium*/
  --dtk_theme__fontWeight--medium: 600;
  /* Font Style general - Font weight bold*/
  --dtk_theme__fontWeight--bold: 800;
  /* Font Style general - Font size 14pt*/
  --dtk_theme__fontSize--xsmall: 0.75em;
  /* Font Style general - Font size 14pt*/
  --dtk_theme__fontSize--small: 0.875em;
  /* Font Style general - Font size 18pt*/
  --dtk_theme__fontSize--medium: 1.125em;
  /* Font Style general - Font sizes */
  /*  Font Style general - Font size 12pt  */
  --dtk_theme__fontSize--s: 0.75em;
  /*  Font Style general - Font size 14pt  */
  --dtk_theme__fontSize--m: 0.875em;
  /*  Font Style general - Font size 16pt  */
  --dtk_theme__fontSize--l: 1em;
  /*  Font Style general - Font size 30pt  */
  --dtk_theme__fontSize--xl: 1.875em;
  /*  Font Style general - Font size 51pt  */
  --dtk_theme__fontSize--xxl: 3.1875em;

  /*Color variables--------------------*/
  /*DTK color - dark color text*/
  --dtk-color-text-dark: rgb(53, 64, 82);

  /*DTK color - medium color text (original value rgb(132, 140, 152))*/
  --dtk-color-text-medium: rgb(98, 104, 114);

  /*DTK color - light color text*/
  --dtk-color-text-light: rgb(255, 255, 255);

  /*DTK color - green text elements*/
  --dtk-color-text-headline-highlighted: rgb(106, 164, 79);

  /*DTK color - light green text elements for dard backgrounds*/
  --dtk-color-text-section-light: rgb(188, 218, 174);

  /*DTK color - brown text elements for highlighting hits and filter elements in */
  --dtk-color-text-hits-highlighted: rgb(136, 85, 52);

  /*DTK color background shade light*/
  --dtk-color-background-content: rgb(239, 243, 246);

  /*DTK color background shade medium*/
  --dtk-color-background-content-shaded: rgb(230, 230, 230);

  /*DTK color background shade medium*/
  --dtk-color-background-content-shaded-dark: rgb(170, 170, 170);

  /*DTK color background of content header including headline */
  --dtk-color-background-header: rgb(255, 255, 255);

  --dtk-color-tableBackground: #f9f9f9;

  /*DTK color for footer background */
  --dtk-color-background-footer: rgb(48, 53, 49);

  /*DTK color for filter panel header background */
  --dtk-color-background-filter-header: rgb(35, 39, 36);

  /*DTK color for filled buttons - default */
  --dtk-color-button-filled: rgb(215, 116, 0);

  /*DTK color for filled buttons - hover state */
  --dtk-color-button-filled-hover: rgb(202, 108, 0);

  /*DTK color for primary action items - default */
  --dtk-color-primary-action: rgb(215, 116, 0);

  /*DTK color for primary action items - visited */
  --dtk-color-primary-visited: rgb(224, 149, 62);

  --dtk-color-link: #ed9536;

  /*DTK color for primary action items - hover */
  --dtk-color-primary-filter-hover: rgb(75, 117, 56);

  /*DTK IK textcolor */
  --dtk-color-green-box-text: rgba(25, 89, 53, 1);

  /* DTK dachshund Magazine light-green*/

  --dtk-color-lightgreen-magazine: rgba(116, 178, 87, 1);

  --dtk-color-darkgreen-magazine: rgba(74, 93, 61, 1);

  --dtk-color-red-box-text: rgb(119, 3, 17);

  --dtk-color-ikMother-background: rgba(255, 231, 103, 1);

  --dtk-color-ikFather-background: rgba(182, 220, 255, 1);
}

/*********************************************************/
/*---------DTK css general utility classes --------------*/
/*******************- Authors: Markus Ruchter -***********/

/* dtk - color - background color dark*/
.body {
  overflow: auto;
}

/* dtk - color - background color dark*/
.dtk_background-dark {
  background-color: var(--dtk-color-background-footer);
}

/* dtk - color - background color dark*/
.dtk_background-light {
  background-color: var(--dtk-color-background-header);
}

/* dtk - color - background color dark*/
.dtk_background-dark-plus {
  background-color: var(--dtk-color-background-filter-header);
}

/* dtk - color - background color shaded*/
.dtk_background-shaded {
  background-color: var(--dtk-color-background-content-shaded);
}

/* dtk - color - background color shaded-dark*/
.dtk_background-shaded--dark {
  background-color: var(--dtk-color-background-content-shaded-dark);
}

/* dtk - color - background color primary element highlighted*/
.dtk_background-primary {
  background-color: var(--dtk-color-primary-action);
}

/* dtk - color - text -- light content text on dark background*/
.dtk_text-light--onDark {
  color: var(--dtk-color-text-light);
}

/* dtk - color - text -- light green highlighted text*/
.dtk-text_color--highlighted {
  color: var(--dtk-color-text-headline-highlighted);
}

/* dtk - color - text -- light green highlighted text*/
.dtk-text_color--dark {
  color: var(--dtk-color-text-dark);
}

.dtk-color-lightgreen-magazine {
  color: var(--dtk-color-lightgreen-magazine);
}
.dtk-color-darkgreen-magazine {
  color: var(--dtk-color-darkgreen-magazine);
}

.dtk-link-color {
  color: var(--dtk-color-link);
}
.dtk-link-color:hover {
  color: var(--dtk-color-link);
}

.dtk-ik-text-color--green {
  color: var(--dtk-color-green-box-text);
}
/* dtk - color - text -- dark gray text*/
.dtk-text_color--medium {
  color: var(--dtk-color-text-medium);
}

/* dtk - color - text -- primary link*/
.dtk-text_color--primary {
  color: var(--dtk-color-primary-action);
}

.dtk-ik-text-color--green {
  color: var(--dtk-color-green-box-text);
}
.dtk-ik-text-color--red {
  color: var(--dtk-color-red-box-text);
}

.dtk-color-ikMother-background {
  background-color: var(--dtk-color-ikMother-background);
}
.dtk-color-ikFather-background {
  background-color: var(--dtk-color-ikFather-background);
}
/* dtk - font - text -- standard font sans serif for body text*/
.dtk-text_font--headline {
  font-family: var(--dtk_theme__standardFont--headlines);
}

/* dtk - font - text -- standard font sans serif for body text*/
.dtk-text_font--body-standard {
  font-family: var(--dtk_theme__standardFont--sans-serif);
}

/* dtk - text - font size calculation of responsive text size based on view port */
.dtk-text_responsive {
  font-size: calc(100% + 1vw + 1vh);
}

/* dtk - text - font size small */
.dtk-text_font--size_s {
  font-size: var(--dtk_theme__fontSize--s);
}

/* dtk - text - font size medium */
.dtk-text_font--size_m {
  font-size: var(--dtk_theme__fontSize--m);
}

/* dtk - text - font size large */
.dtk-text_font--size_l {
  font-size: var(--dtk_theme__fontSize--l);
}

/* dtk - text - font size extra large */
.dtk-text_font--size_xl {
  font-size: var(--dtk_theme__fontSize--xl);
}

/* dtk - text - font size xxlarge */
.dtk-text_font--size_xxl {
  font-size: var(--dtk_theme__fontSize--xxl);
}

/* dtk - text - font weight light*/
.dtk-text_font--weight_light {
  font-weight: var(--dtk_theme__fontWeight--light);
}

/* dtk - text - font weight medium*/
.dtk-text_font--weight_medium {
  font-weight: var(--dtk_theme__fontWeight--medium);
}

/* dtk - text - font weight bold*/
.dtk-text_font--weight_bold {
  font-weight: var(--dtk_theme__fontWeight--bold);
}

.dtk-color-tableBackground {
  background-color: var(--dtk-color-tableBackground) !important;
}

/* dtk - utility - margin removal*/
.dtk_no-margin {
  margin: 0;
}

/* dtk - utility - offset setting for sticky page header to account for navbar height, so that the header stays fixed below the navbar*/
.sticky-offset {
  top: 100px;
}

/*********************************************************/
/*---------DTK Slideshow - Controlling Slider module-----*/
/*******************- Authors: Mathias -******************/
/* Definition der Animationen */
/* 1. Bewegung des Sliders */
@keyframes slidesStart01 {
  0%,
  15% {
    left: 0;
  }
  25%,
  40% {
    left: -100%;
  }
  50%,
  65% {
    left: -200%;
  }
  75%,
  90% {
    left: -300%;
  }
  100% {
    left: -400%;
  }
}

@-webkit-keyframes slidesStart01 {
  0%,
  15% {
    left: 0;
  }
  25%,
  40% {
    left: -100%;
  }
  50%,
  65% {
    left: -200%;
  }
  75%,
  90% {
    left: -300%;
  }
  100% {
    left: -400%;
  }
}

@keyframes slidesStart101 {
  0%,
  15% {
    left: 0;
  }
  25%,
  40% {
    left: -100%;
  }
  50%,
  65% {
    left: -200%;
  }
  75%,
  90% {
    left: -300%;
  }
  100% {
    left: -400%;
  }
}

@-webkit-keyframes slidesStart101 {
  0%,
  15% {
    left: 0;
  }
  25%,
  40% {
    left: -100%;
  }
  50%,
  65% {
    left: -200%;
  }
  75%,
  90% {
    left: -300%;
  }
  100% {
    left: -400%;
  }
}

@keyframes slidesStart02 {
  90.01% {
    left: 0;
  }
  0%,
  15%,
  100% {
    left: -100%;
  }
  25%,
  40% {
    left: -200%;
  }
  50%,
  65% {
    left: -300%;
  }
  75%,
  90% {
    left: -400%;
  }
}

@-webkit-keyframes slidesStart02 {
  90.01% {
    left: 0;
  }
  0%,
  15%,
  100% {
    left: -100%;
  }
  25%,
  40% {
    left: -200%;
  }
  50%,
  65% {
    left: -300%;
  }
  75%,
  90% {
    left: -400%;
  }
}

@keyframes slidesStart102 {
  90.01% {
    left: 0;
  }
  0%,
  15%,
  100% {
    left: -100%;
  }
  25%,
  40% {
    left: -200%;
  }
  50%,
  65% {
    left: -300%;
  }
  75%,
  90% {
    left: -400%;
  }
}

@-webkit-keyframes slidesStart102 {
  90.01% {
    left: 0;
  }
  0%,
  15%,
  100% {
    left: -100%;
  }
  25%,
  40% {
    left: -200%;
  }
  50%,
  65% {
    left: -300%;
  }
  75%,
  90% {
    left: -400%;
  }
}

@keyframes slidesStart03 {
  65.01% {
    left: 0;
  }
  0%,
  15%,
  100% {
    left: -200%;
  }
  25%,
  40% {
    left: -300%;
  }
  50%,
  65% {
    left: -400%;
  }
  75%,
  90% {
    left: -100%;
  }
}

@-webkit-keyframes slidesStart03 {
  65.01% {
    left: 0;
  }
  0%,
  15%,
  100% {
    left: -200%;
  }
  25%,
  40% {
    left: -300%;
  }
  50%,
  65% {
    left: -400%;
  }
  75%,
  90% {
    left: -100%;
  }
}

@keyframes slidesStart103 {
  65.01% {
    left: 0;
  }
  0%,
  15%,
  100% {
    left: -200%;
  }
  25%,
  40% {
    left: -300%;
  }
  50%,
  65% {
    left: -400%;
  }
  75%,
  90% {
    left: -100%;
  }
}

@-webkit-keyframes slidesStart103 {
  65.01% {
    left: 0;
  }
  0%,
  15%,
  100% {
    left: -200%;
  }
  25%,
  40% {
    left: -300%;
  }
  50%,
  65% {
    left: -400%;
  }
  75%,
  90% {
    left: -100%;
  }
}

@keyframes slidesStart04 {
  40.01% {
    left: 0;
  }
  0%,
  15%,
  100% {
    left: -300%;
  }
  25%,
  40% {
    left: -400%;
  }
  50%,
  65% {
    left: -100%;
  }
  75%,
  90% {
    left: -200%;
  }
}

@-webkit-keyframes slidesStart04 {
  40.01% {
    left: 0;
  }
  0%,
  15%,
  100% {
    left: -300%;
  }
  25%,
  40% {
    left: -400%;
  }
  50%,
  65% {
    left: -100%;
  }
  75%,
  90% {
    left: -200%;
  }
}

@keyframes slidesStart104 {
  40.01% {
    left: 0;
  }
  0%,
  15%,
  100% {
    left: -300%;
  }
  25%,
  40% {
    left: -400%;
  }
  50%,
  65% {
    left: -100%;
  }
  75%,
  90% {
    left: -200%;
  }
}

@-webkit-keyframes slidesStart104 {
  40.01% {
    left: 0;
  }
  0%,
  15%,
  100% {
    left: -300%;
  }
  25%,
  40% {
    left: -400%;
  }
  50%,
  65% {
    left: -100%;
  }
  75%,
  90% {
    left: -200%;
  }
}

/* 2. Wechsel des ersten Slides ans Ende und zurück */
@keyframes slide01ToEndStart01 {
  89.99% {
    left: 0;
  }
  90%,
  100% {
    left: 100%;
  }
}

@-webkit-keyframes slide01ToEndStart01 {
  89.99% {
    left: 0;
  }
  90%,
  100% {
    left: 100%;
  }
}

@keyframes slide01ToEndStart101 {
  89.99% {
    left: 0;
  }
  90%,
  100% {
    left: 100%;
  }
}

@-webkit-keyframes slide01ToEndStart101 {
  89.99% {
    left: 0;
  }
  90%,
  100% {
    left: 100%;
  }
}

@keyframes slide01ToEndStart02 {
  49.99%,
  90.01% {
    left: 0;
  }
  50%,
  90% {
    left: 100%;
  }
}

@-webkit-keyframes slide01ToEndStart02 {
  49.99%,
  90.01% {
    left: 0;
  }
  50%,
  90% {
    left: 100%;
  }
}

@keyframes slide01ToEndStart102 {
  49.99%,
  90.01% {
    left: 0;
  }
  50%,
  90% {
    left: 100%;
  }
}

@-webkit-keyframes slide01ToEndStart102 {
  49.99%,
  90.01% {
    left: 0;
  }
  50%,
  90% {
    left: 100%;
  }
}

@keyframes slide01ToEndStart03 {
  24.99%,
  65.01% {
    left: 0;
  }
  25%,
  65% {
    left: 100%;
  }
}

@-webkit-keyframes slide01ToEndStart03 {
  24.99%,
  65.01% {
    left: 0;
  }
  25%,
  65% {
    left: 100%;
  }
}

@keyframes slide01ToEndStart103 {
  24.99%,
  65.01% {
    left: 0;
  }
  25%,
  65% {
    left: 100%;
  }
}

@-webkit-keyframes slide01ToEndStart103 {
  24.99%,
  65.01% {
    left: 0;
  }
  25%,
  65% {
    left: 100%;
  }
}

@keyframes slide01ToEndStart04 {
  40.01% {
    left: 0;
  }
  0%,
  40% {
    left: 100%;
  }
}

@-webkit-keyframes slide01ToEndStart04 {
  40.01% {
    left: 0;
  }
  0%,
  40% {
    left: 100%;
  }
}

@keyframes slide01ToEndStart104 {
  40.01% {
    left: 0;
  }
  0%,
  40% {
    left: 100%;
  }
}

@-webkit-keyframes slide01ToEndStart104 {
  40.01% {
    left: 0;
  }
  0%,
  40% {
    left: 100%;
  }
}

/* 3. Animationen für den Farbwechsel in den Controls */
@keyframes slideControl01 {
  24.99% {
    background: #68b022;
  }
  25%,
  100% {
    background: none;
  }
}

@-webkit-keyframes slideControl01 {
  24.99% {
    background: #68b022;
  }
  25%,
  100% {
    background: none;
  }
}

@keyframes slideControl101 {
  24.99% {
    background: #68b022;
  }
  25%,
  100% {
    background: none;
  }
}

@-webkit-keyframes slideControl101 {
  24.99% {
    background: #68b022;
  }
  25%,
  100% {
    background: none;
  }
}

@keyframes slideControl02 {
  24.99%,
  50% {
    background: none;
  }
  25%,
  49.99% {
    background: #68b022;
  }
}

@-webkit-keyframes slideControl02 {
  24.99%,
  50% {
    background: none;
  }
  25%,
  49.99% {
    background: #68b022;
  }
}

@keyframes slideControl102 {
  24.99%,
  50% {
    background: none;
  }
  25%,
  49.99% {
    background: #68b022;
  }
}

@-webkit-keyframes slideControl102 {
  24.99%,
  50% {
    background: none;
  }
  25%,
  49.99% {
    background: #68b022;
  }
}

@keyframes slideControl03 {
  49.99%,
  75% {
    background: none;
  }
  50%,
  74.99% {
    background: #68b022;
  }
}

@-webkit-keyframes slideControl03 {
  49.99%,
  75% {
    background: none;
  }
  50%,
  74.99% {
    background: #68b022;
  }
}

@keyframes slideControl103 {
  49.99%,
  75% {
    background: none;
  }
  50%,
  74.99% {
    background: #68b022;
  }
}

@-webkit-keyframes slideControl103 {
  49.99%,
  75% {
    background: none;
  }
  50%,
  74.99% {
    background: #68b022;
  }
}

@keyframes slideControl04 {
  74.99% {
    background: none;
  }
  75%,
  100% {
    background: #68b022;
  }
}

@-webkit-keyframes slideControl04 {
  74.99% {
    background: none;
  }
  75%,
  100% {
    background: #68b022;
  }
}

@keyframes slideControl104 {
  74.99% {
    background: none;
  }
  75%,
  100% {
    background: #68b022;
  }
}

@-webkit-keyframes slideControl104 {
  74.99% {
    background: none;
  }
  75%,
  100% {
    background: #68b022;
  }
}

/* Basisfunktionalität des Sliders */
.slider {
  overflow: hidden;
}

.slider input {
  position: absolute;
  left: -10000px;
  top: 0;
}

.slideList {
  width: 400%; /* Anzahl der Slides mal 100 */
  position: relative; /* über die relative Positionierung wird der Slider durchs Sichtfenster geschoben */
  -webkit-transition: left 500s;
  -moz-transition: left 500s;
  -o-transition: left 500s;
  transition: left 500s; /* für den fließenden Schub */
  margin: 0;
  padding: 0;
  height: auto;
}

.slideList:after {
  content: ".";
  display: block;
  height: 0.1px;
  clear: both;
  visibility: hidden;
  font-size: 0;
  overflow: hidden;
}

.slide {
  list-style: none;
  /*width: 25%; */ /* Breite gleich 100 / Anzahl Slides */
  float: left;
  position: relative;
  left: 0;
  -webkit-transition: left 0s 0.5s;
  -moz-transition: left 0s 0.5s;
  -o-transition: left 0s 0.5s;
  transition: left 0s 0.5s; /*bei Klick auf ein Control werden alle Slides wieder auf Original-Position geschoben, hier für den ersten relevant. Damit die Aktion erst nach der slides-Verschiebung beginnt, kommt ein delay hinzu*/
}

.sliderElements,
.sliderElements figure,
.sliderControls {
  margin: 0;
  height: 750px;
}

.sliderElements:after {
  content: ".";
  display: block;
  height: 0.1px;
  clear: both;
  visibility: hidden;
  font-size: 0;
  overflow: hidden;
}

.cssSlider {
  overflow-x: hidden;
}

.sliderElements {
  list-style: none;
  position: relative;
  left: 0;
  width: 400%;
  margin-bottom: 0.8em;
  padding: 0;
  -webkit-transition: left 0.8s ease-in-out;
  -moz-transition: left 0.8s ease-in-out;
  -o-transition: left 0.8s ease-in-out;
  transition: left 0.8s ease-in-out;
}

.sliderElements > li {
  float: left;
  width: 25%;
  position: relative;
}

/* Layout of textbox for Slider caption*/
/* .sliderElements figcaption {
  display: block;
  position: absolute;
  left: 2em;
  top: 2em;
  padding: .4em;
  background: rgba(0,0,0,.5);
  float: left;
  width: 50%;
  height: auto;
} */

/* Backup of initial settings by Mathias
.sliderElements figcaption {
    display: block;
    color: #fff;
    position: absolute;
    left: 0;
    bottom: 1em;
    padding: .4em;
    background: rgba(0,0,0,.5);
    float: left;
    width: 50%;
    height: auto;
}
*/

/*
.sliderElements div {
margin-bottom: 100px;
width: 100%;
height: auto;

}
*/
/* Bilder responsive */
.sliderElements img {
  width: 100%;
  height: 750px;
  vertical-align: bottom;
}

#slide04:checked ~ .slideList .slide,
#slide104:checked ~ .slideList .slide {
  -webkit-transition-delay: 500s;
  -moz-transition-delay: 500s;
  -o-transition-delay: 500s;
  transition-delay: 500s; /* damit er nicht zu früh zurückrutscht */
}
.slideList img {
  width: 100%;
  height: 750px;
  vertical-align: bottom;
}

/* Zuweisung der Keyframe-Animationen */
.slideList,
.slide,
.slideControl label {
  -webkit-animation: 60s 0.5s infinite;
  animation: 50s 500s infinite; /* allgemeingültige Werte für die Keyframe-Animation */
}

/* Positionierung und Aufruf der passenden Animation in Abhängigkeit des Status der Radiobuttons */
#slide01:checked ~ .slideList {
  -webkit-animation-name: slidesStart01;
  animation-name: slidesStart01;
  left: 0;
}

#slide02:checked ~ .slideList {
  -webkit-animation-name: slidesStart02;
  animation-name: slidesStart02;
  left: -100%;
}

#slide03:checked ~ .slideList {
  -webkit-animation-name: slidesStart03;
  animation-name: slidesStart03;
  left: -200%;
}

#slide04:checked ~ .slideList {
  -webkit-animation-name: slidesStart04;
  animation-name: slidesStart04;
  left: -300%;
}

/* Damit der Wechsel von 01 zu 101, 02 zu 102 usw. klappt, muss jeweils eine andere Animation aufgerufen werden*/
#slide101:checked ~ .slideList {
  -webkit-animation-name: slidesStart101;
  animation-name: slidesStart101;
  left: 0;
}

#slide102:checked ~ .slideList {
  -webkit-animation-name: slidesStart102;
  animation-name: slidesStart102;
  left: -100%;
}

#slide103:checked ~ .slideList {
  -webkit-animation-name: slidesStart103;
  animation-name: slidesStart103;
  left: -200%;
}

#slide104:checked ~ .slideList {
  -webkit-animation-name: slidesStart104;
  animation-name: slidesStart104;
  left: -300%;
}

/* Der erste Slide wird jeweils zur rechten Zeit an den Anfang oder das Ende gestellt */
#slide01:checked ~ .slideList .slide01 {
  -webkit-animation-name: slide01ToEndStart01;
  animation-name: slide01ToEndStart01;
}

#slide02:checked ~ .slideList .slide01 {
  -webkit-animation-name: slide01ToEndStart02;
  animation-name: slide01ToEndStart02;
}

#slide03:checked ~ .slideList .slide01 {
  -webkit-animation-name: slide01ToEndStart03;
  animation-name: slide01ToEndStart03;
}

#slide04:checked ~ .slideList .slide01 {
  -webkit-animation-name: slide01ToEndStart04;
  animation-name: slide01ToEndStart04;
}

/* Separate Animations-Namen für die zweite Steuerung */
#slide101:checked ~ .slideList .slide01 {
  -webkit-animation-name: slide01ToEndStart101;
  animation-name: slide01ToEndStart101;
}

#slide102:checked ~ .slideList .slide01 {
  -webkit-animation-name: slide01ToEndStart102;
  animation-name: slide01ToEndStart102;
}

#slide103:checked ~ .slideList .slide01 {
  -webkit-animation-name: slide01ToEndStart103;
  animation-name: slide01ToEndStart103;
}

#slide104:checked ~ .slideList .slide01 {
  -webkit-animation-name: slide01ToEndStart104;
  animation-name: slide01ToEndStart104;
}

/* nur zur Deko */
.sliderWrapper {
  position: relative;
  border: 1px solid #ddd;
  margin-bottom: 40px;
}
/*
.slide p {
    position: absolute;
    bottom: 1em;
    left: 0;
    background: rgba(0, 0, 0, .6);
    color: #ddd;
    padding: .4em 1em;
}
*/
/* Steuerung durch den Benutzer mit Radio buttons / Dots*/
.slideControl {
  width: 80px;
  position: absolute;
  /*bottom: -40px;*/
  left: 50%;
  margin-left: -40px;
  margin-top: -5em;
}

.control01:checked ~ .slideControl01,
.control02:checked ~ .slideControl02 {
  left: -5000px; /* Blendet die nicht benötigten Labels aus */
}

.slideControl li {
  float: left;
  margin: 0 1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: relative;
  text-indent: -10000px;
  border: 1px solid #ccc;
  box-shadow: 0 0 2px 2px #ccc;
  list-style: none;
}

.slideControl label {
  display: block;
  cursor: pointer;
  background: none;
  width: 100%;
  height: 100%;
  border-radius: 10%;
  /*box-sizing: border-box;*/
  border: 2px solid #fff;
}

.slideControl label:hover {
  background: #68b022 !important;
}

#slide01:checked ~ .slideControl label[for="slide101"],
#slide02:checked ~ .slideControl label[for="slide102"],
#slide03:checked ~ .slideControl label[for="slide103"],
#slide04:checked ~ .slideControl label[for="slide104"] {
  -webkit-animation-name: slideControl01;
  animation-name: slideControl01;
  background: #68b022;
}

#slide101:checked ~ .slideControl label[for="slide01"],
#slide102:checked ~ .slideControl label[for="slide02"],
#slide103:checked ~ .slideControl label[for="slide03"],
#slide104:checked ~ .slideControl label[for="slide04"] {
  -webkit-animation-name: slideControl101;
  animation-name: slideControl101;
  background: #68b022;
}

#slide01:checked ~ .slideControl label[for="slide102"],
#slide02:checked ~ .slideControl label[for="slide103"],
#slide03:checked ~ .slideControl label[for="slide104"],
#slide04:checked ~ .slideControl label[for="slide101"] {
  -webkit-animation-name: slideControl02;
  animation-name: slideControl02;
}

#slide101:checked ~ .slideControl label[for="slide02"],
#slide102:checked ~ .slideControl label[for="slide03"],
#slide103:checked ~ .slideControl label[for="slide04"],
#slide104:checked ~ .slideControl label[for="slide01"] {
  -webkit-animation-name: slideControl102;
  animation-name: slideControl102;
}

#slide01:checked ~ .slideControl label[for="slide103"],
#slide02:checked ~ .slideControl label[for="slide104"],
#slide03:checked ~ .slideControl label[for="slide101"],
#slide04:checked ~ .slideControl label[for="slide102"] {
  -webkit-animation-name: slideControl03;
  animation-name: slideControl03;
}

#slide101:checked ~ .slideControl label[for="slide03"],
#slide102:checked ~ .slideControl label[for="slide04"],
#slide103:checked ~ .slideControl label[for="slide01"],
#slide104:checked ~ .slideControl label[for="slide02"] {
  -webkit-animation-name: slideControl103;
  animation-name: slideControl103;
}

#slide01:checked ~ .slideControl label[for="slide104"],
#slide02:checked ~ .slideControl label[for="slide101"],
#slide03:checked ~ .slideControl label[for="slide102"],
#slide04:checked ~ .slideControl label[for="slide103"] {
  -webkit-animation-name: slideControl04;
  animation-name: slideControl04;
}

#slide101:checked ~ .slideControl label[for="slide04"],
#slide102:checked ~ .slideControl label[for="slide01"],
#slide103:checked ~ .slideControl label[for="slide02"],
#slide104:checked ~ .slideControl label[for="slide03"] {
  -webkit-animation-name: slideControl104;
  animation-name: slideControl104;
}

/************************************************************************/
/*---------DTK Styleguide helper css not needed for actual web page-----*/
/*******************- Authors: Markus -*********************************/
/* Stylesheet table styles*/
.dtk-row {
  border: 1px solid rgb(85, 85, 85);
}

.dtk-column {
  border: 1px solid rgb(85, 85, 85);
}

.tableStyle-header {
  background: rgb(216, 216, 216);
}

/*|| Test container*/
/* Container - Slide Show*/
.dtk_spacer__container {
  height: 200px;
}

/* Container - Slide Show*/
.dtk_slideShow__container--sample {
  background-color: rgb(90, 118, 60);
  margin: 2px;
}

.dtk_blog__container--sample {
  background-color: rgb(255, 255, 255);
  margin: 2px;
}

/* Search-Box-over-slider-Container */
.dtk_searchBox__container--sample {
  background-color: rgb(106, 164, 79);
  border-radius: 4px;
  margin: 2px;
  padding: 2em;
  margin-left: -8em;
}

/* Entry-Card-Container Sample*/
.dtk_entryCard__background--sample {
  background-color: rgb(245, 245, 245);
  margin: 2px;
  padding: 2em;
}

/* Magazine-Container Sample*/
.dtk_magazine__background--sample {
  background-image: url(picture/Magazine-Section-Wood-Background.jpg);
  margin: 2px;
  padding: 2em;
}

/* Magazine-Container Sample*/
.dtk_teckeldatenbank__background--sample {
  background-image: url(picture/Teckeldatenbank-Dogs-Background.jpg);
  margin: 2px;
  padding: 2em;
}

/* Magazine-Container Sample*/
.dtk_teckeldatenbank__background {
  background-repeat: no-repeat;
  margin: 2px;
}

/* Vereinssuche-Container */
.dtk_vereinssuche_background_card {
  background-color: rgb(245, 245, 245);
  margin-right: -1.5em;
  padding: 2em;
  box-shadow: 2px 1px 5px #757575;
  z-index: 1;
}

.dtk_map_container {
  z-index: -1;
}

/* Footer-Container Sample*/
.dtk_footer__container--sample {
  background-color: rgb(48, 53, 49);
  /* margin: 2px; */
  padding: 2em;
}

/* DTK Layout container additions to bootstrap classes */

/* Footer-Container Sample*/
[class^="container"] {
  border: var(--dev-container-border-size) solid rgb(231, 64, 64);
}

.row {
  border: var(--dev-container-border-size) solid rgb(64, 81, 231);
}

[class^="col"] {
  border: var(--dev-container-border-size) solid rgb(131, 231, 64);
}

/*-----------Slideshow-test------------*/
/*-----Ignore this for now it has been created by Markus to test out the positioning of the slide controls*/
/*Container - slideshow container -container size is based on calculated aspect ratio*/
/*.mr_slideshow__container {
  padding-top: calc(862 / 1920 * 100%);
  background-color: rgb(211, 211, 211);
  display: flex;
}*/

/*Container - slideshow container -container size is based on calculated aspect ratio*/
/*.mr_slideshow__slide {
  background-color: rgb(238, 248, 90);
  width: 90%;
  height: 90%;
  margin: 0.5em 0.5em 0.5em 0.5em;
}*/

/*Container - slideshow container -container size is based on calculated aspect ratio*/
/*.mr_slideshow__control {
  background-color: rgb(125, 243, 252);
  width: 80%;
  margin: 0.5em 0.5em 0.5em 0.5em;
}*/

/************************************************************************/
/*---------DTK Global CSS settings-------------------------------------*/
/*******************- Authors: Markus -*********************************/

/*||| Global Color settings for containers*/
/*Grey background*/
.dtk_background {
  background-color: rgb(245, 245, 245);
}

/*||| Global Font settings*/

/* Container Style button - general*/
/*|| Utilities */

/* DTK Text decoration removal utility class */
.dtk_text--no-decoration {
  text-decoration: none;
}

/* DTK Text decoration removal utility class */
.dtk_text--dark {
  color: var(--dtk-color-text-dark);
}

/*Reset of button element*/
.dtk_button {
  /* reset */
  background-color: transparent;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: inherit;
  appearance: none;

  /* make sure properties affecting height have same value*/
  font-size: 1em;
  line-height: 1.2;
  padding: 1.2em var(--padding-x);
  border-width: 2px;
  border-style: solid;
}

/*General setting for button element including vertical and horizontal alignment*/
.dtk_button {
  border-radius: 5px;
  background-color: rgb(215, 116, 0);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  --padding-x: 1.2em;
  border-color: transparent;
  box-shadow: 0 1px 4px rgb(215, 116, 0);
  margin-top: 3em;
}

.dtk-btn-background {
  background-color: var(--dtk-color-button-filled);
  color: #fff;
}

/* button - left and right space between label and button border*/
.dtk_button--width-padding {
  padding-left: 3em;
  padding-right: 3em;
}

/* button - top and button space between label and button border*/
.dtk_button--height-padding {
  padding-top: 1em;
  padding-bottom: 1em;
}

/* button - hover state*/
.dtk_button:hover {
  background-color: rgb(202, 108, 0);
}

/* button - focus state*/
.dtk_button:focus {
  box-shadow: 0px 0px 0px 3px rgba(255, 169, 0, 0.6);
}

/* button - focus state*/
.dtk_button:active {
  transform: translateY(2px);
}

/*container for slideshow arrows*/
.dtk_container_button--slidernav-left {
  margin-left: -100%;
}

.dtk_container_button--slidernav-right {
  margin-right: -100%;
  padding-left: 85%;
}

/* button - Slideshow - navigation left and right arrow*/
.dtk_button--slidernav {
  background-color: rgb(70, 70, 70);
  opacity: 0.4;
}

/* button - Slideshow - navigation left and right arrow*/
.dtk_button--slidernav:hover {
  background-color: rgb(10, 10, 10);
}

.dtk_button--primary {
  color: var(--dtk-color-button-filled);
}

/*---Outlined Link-based button-----*/
/* button - outlined version for dog search etc.*/
.dtk_button--outlined {
  background-color: transparent;
  border-color: rgb(215, 116, 0);
  border-width: 0.2em;
  box-shadow: none;
  margin: 1.5em 0 1.5em 0;
}

/* button - clickable container - hover state*/
.dtk_button--outlined:hover {
  background-color: rgba(215, 116, 0, 0.9);
}

/* button - clickable container - focus state*/
.dtk_button--outlined:focus {
  box-shadow: 0px 0px 0px 3px rgba(255, 169, 0, 0.6);
}

/* button - clickable container - focus state*/
.dtk_button--outlined:active {
  transform: translateY(2px);
}

/*----clickable Container - container button for clickable card elements-----*/
/* button - clickable container like card element*/
.dtk_container-button {
  background-color: transparent;
  padding: 0;
  border: 0;
  border-radius: 0;
  text-decoration: none;
  color: black;
  margin-bottom: 2em;
  margin-top: 4em;
  margin-left: 1em;
  margin-right: 1em;
}

/* button - clickable container - hover state*/
.dtk_container-button:hover {
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.08);
}

/* button - clickable container - focus state*/
.dtk_container-button:focus {
  box-shadow: 0px 0px 0px 3px rgba(255, 169, 0, 0.6);
}

/* button - clickable container - focus state*/
.dtk_container-button:active {
  transform: translateY(2px);
}

/* DTK BUTTON - Adapted Bootstrap standard buttons recolored */
.dtk_btn-filled {
  background-color: var(--dtk-color-button-filled);
  color: var(--dtk-color-text-light);
}

/* DTK BUTTON - Adapted Bootstrap standard button - hover state */
.dtk_btn-filled:hover {
  background-color: var(--dtk-color-button-filled-hover);
  color: var(--dtk-color-text-light);
}

/* DTK BUTTON outlined - Adapted Bootstrap standard buttons recolored */
.dtk_btn-outlined {
  border-color: var(--dtk-color-button-filled);
  color: var(--dtk-color-button-filled);
}

/* DTK BUTTON outlined - Adapted Bootstrap standard button - hover state */
.dtk_btn-outlined:hover {
  background-color: var(--dtk-color-button-filled-hover);
  color: var(--dtk-color-text-light);
}

/* DTK BUTTON outlined - Adapted Bootstrap standard button*/
.dtk_btn-primary .btn {
  font-family: var(--dtk_theme__standardFont--sans-serif);
  background-color: var(--dtk-color-button-filled);
  color: var(--dtk-color-text-light);
  font-size: var(--dtk_theme__fontSize--small);
  font-weight: var(--dtk_theme__fontWeight--medium);
}

/* DTK BUTTON outlined - Adapted Bootstrap standard button - hover state */
.dtk_btn-primary .btn:hover {
  background-color: var(--dtk-color-button-filled-hover);
}

/* DTK BUTTON - Link style - overwrite Bootstrap standard*/
.dtk_btn-primary-link--filter .btn {
  font-family: var(--dtk_theme__standardFont--sans-serif);
  color: var(--dtk-color-text-dark);
  font-size: var(--dtk_theme__fontSize--s);
  font-weight: var(--dtk_theme__fontWeight--medium);
  text-decoration: underline;
}

/* DTK BUTTON outlined - Adapted Bootstrap standard button - hover state */
.dtk_btn-primary-link--filter .btn:hover {
  border-color: var(--dtk-color-text-dark);
}

/* DTK BUTTON outlined - Adapted Bootstrap standard button*/
.dtk_btn-secondary .btn {
  font-family: var(--dtk_theme__standardFont--sans-serif);
  color: var(--dtk-color-text-light);
  border-color: var(--dtk-color-text-light);
  font-size: 0.75em;
  font-weight: var(--dtk_theme__fontWeight--medium);
}

/* DTK BUTTON outlined - Adapted Bootstrap standard button - hover state */
.dtk_btn-secondary .btn:hover {
  background-color: var(--dtk-color-button-filled-hover);
  border-color: var(--dtk-color-button-filled-hover);
}

/* SVG Icon display settings*/
.dtk_icon {
  display: inline-block;
  color: inherit;
  fill: currentColor;
  height: 2em;
  width: 2em;
  line-height: 1;
  flex-shrink: 0;
  max-width: initial;
}

/* SVG Icon color settings*/
.dtk_icon__color {
  fill: rgb(0, 0, 0);
}

/* SVG Icon color settings*/
.dtk_icon__color--light {
  fill: rgb(255, 255, 255);
}

/* SVG Icon color settings*/
.dtk_icon__color--dark {
  fill: rgb(102, 102, 102);
}

/* SVG Image Icon color setting*/
.dtk_icon__img-color {
  filter: invert(0);
}

/*||| Global Font settings*/

/* Font-style - Section headline - main: Biggest headeline at top of section/module*/
.dtk_sectionHeadline__main {
  font-size: 3.1875em;
  font-family: "Playfair Display", serif;
  color: rgb(51, 51, 51);
  font-weight: bold;
  line-height: 1.196;
  margin-bottom: 0.8em;
}

/* Font-style - Section headline - subheadline : headline below main headline of section*/
.dtk_sectionHeadline__sub {
  font-size: 1.125em;
  font-family: "Montserrat", sans-serif;
  line-height: 1.2;
}

/* Font-style - input field - label and sample text*/
.dtk_inputTextField {
  font-size: 0.875em;
  font-family: "Montserrat", sans-serif;
  color: rgb(119, 119, 119);
  line-height: 1.286;
}

/* Font-style - button - label*/
.dtk_button__label {
  font-size: 0.75em;
  font-family: var(--dtk_theme__standardFont--sans-serif);
  font-weight: 600;
  text-decoration: none;
}

/* Font-style - button - color of label for outlined button*/
.dtk_button__label--outlined {
  color: rgb(215, 116, 0);
}

/* Font-style - button - change label color on hover*/
.dtk_button__label--outlined:hover {
  color: rgb(255, 255, 255);
}

.dtk_button__label--filled {
  color: rgb(255, 255, 255);
}

/* Font-style - button - change label color on hover*/
.dtk_button__label--filled:hover {
  color: rgb(255, 255, 255);
  font-weight: bold;
}

/* Font-style - card item - headline*/
.dtk_entryCard__headline {
  font-size: 1.3125em;
  font-family: "Montserrat", sans-serif;
  color: rgb(51, 51, 51);
  line-height: 1.524;
  text-align: center;
}

/* Font-style - body text*/
.dtk_bodyText {
  font-size: 1em;
  font-family: var(--dtk_theme__standardFont--sans-serif);
  line-height: 1.625;
  margin-top: 1.5em;
}

/* Font-style - card item - body text - search card*/
.dtk_bodyText__card--searchCard {
  color: rgb(153, 153, 153);
}

/* Font-style - Section headline - overline: small headline above main headline*/
.dtk_sectionHeadline__overline {
  font-size: 0.875em;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  color: rgb(106, 164, 79);
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0.25em;
  margin-bottom: 0.5em;
  margin-top: 0.7em;
}

/* Font-style - input field - label and sample text*/
.dtk_inputTextField__label {
  font-weight: bold;
}

/* Font-style - button - color of label for filled button*/
.dtk_button__label--filled {
  color: rgb(255, 255, 255);
  text-decoration: none;
}

/* Font-style - body text - card item*/
.dtk_bodyText__card {
  text-align: center;
}

/* Font-style - blog item - body text */
.dtk_bodyText__blog {
  color: rgb(102, 102, 102);
  text-align: left;
}
/* Offcanvas    */
#offcanvasExample {
  height: 95vh;
  margin-top: 100px;
  padding-bottom: 4%;
}
.offcanvas-start {
  width: 420px !important;
}

/*||| Header with Top Navigation bar*/

/* Container - Header - Top Navbar*/

.navbar {
  padding-top: unset;
}

.dtk_header__container {
  background-color: rgb(74, 92, 59);
  width: 100%;
  height: 100px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 0.5em;
  z-index: 3000;
}

/* Container - header - branding*/
.dtk_header-container__branding {
  border: solid var(--dev-container-border-size) rgb(112, 112, 111);
  display: flex;
  flex-flow: row;
  align-items: center;
  flex: 1.5;
  overflow: hidden;
  padding: 1em 0 1em 0;
  height: inherit;
}

/* Container - header - logo*/
.dtk_header-container__logo {
  border: solid var(--dev-container-border-size) rgb(231, 219, 52);
  display: flex;
  flex-grow: 1 1 0;
  align-items: center;
  height: inherit;
  padding: 0 0.5em 0 0.5em;
}

/* Container - header - sitename*/
.dtk_header-container__sitename {
  border: solid var(--dev-container-border-size) rgb(231, 159, 52);
}

/* Container - header - navigation*/
.dtk_header-container__navigation {
  border: solid var(--dev-container-border-size) rgb(167, 233, 92);
  flex: 4;
  margin: 0 1em 0 2em;
}

/* Container - header - search*/
.dtk_header-container__search {
  border: solid var(--dev-container-border-size) rgb(222, 117, 236);
  flex: 1;
}

/* Container - header - search*/
.dtk_header-container__login {
  border: solid var(--dev-container-border-size) rgb(167, 233, 92);
  flex: 0.5;
  margin-right: 0.5rem;
}

.dtk_header-container__login i {
  margin: 0.5em 0.5em 0 0.5em;
  position: relative;
  top: 0.2em;
  font-size: 25px;
  color: rgb(215, 116, 0);
}

#userIcon {
  cursor: pointer;
  display: contents;
}
.dtk_header-container__login li a {
  text-decoration: none;
  color: #000;
  display: block;
}
.dtk_header-container__login li a:hover {
  cursor: pointer;
  color: rgb(215, 116, 0);
  text-decoration: underline;
}
/*  user Icon  */
.hide-userMenu {
  display: none;
}

#userMenu {
  position: absolute;
  right: 16em;
  top: 1em;
  width: 15%;

  /* display: none; */
  /* float: left; */
  min-width: 250px;
  padding: 5px 0;

  margin: 2px 0 0;
  font-size: 14px;
  text-align: center;
  list-style: none;
  background-color: #fff;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;

  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}

/* Font-style Logo - Placeholder version*/
.dtk_logo__textBox {
  font-size: 1.5vw;
  font-family: "Abril Fatface", cursive;
  line-height: 1.2;
  text-align: left;
  color: rgb(255, 255, 255);
}

/* Logo image - Style*/
.dtk_menu_logo {
  max-height: 90%;
}

/*-------------------------------------------------------*/

/*------Settings for DTK Navbar -- NOTE: This part is currently not used since the Max Mega Menu plug in is used with a DTK-Specific menu theme, that includes custom CSS Classes - by MR 20210830*/
/* Navigation bar - general*/
.dtk_navbar__mainItem > li {
  list-style: none;
  margin-left: 1em;
  margin-top: -3.5em;
}

.dtk_navbar__mainItem > li > a {
  font-size: 0.875em;
  font-family: "Montserrat";
  text-transform: uppercase;
  line-height: 1.286;
  text-decoration: none;
}

/* Navigation bar - state: selected */
.dtk_navbar__mainItem--selected {
  color: rgb(255, 255, 255);
  font-weight: bold;
}

/* Navigation bar - state: unselected*/
.dtk_navbar__mainItem--unselected > li > a {
  color: rgb(180, 194, 161);
  font-weight: normal;
}

/* Navigation bar - state: hover*/
.dtk_navbar__mainItem--unselected:hover {
  color: rgb(255, 255, 255);
  font-weight: bold;
}

.dtk_navbar_title {
  font-size: 0.9em;
  font-family: "Montserrat";
  text-transform: uppercase;
  line-height: 1.286;
  text-decoration: none;
  color: rgb(255, 255, 255);
}

/*||| Search fields*/

/* Input field - General*/
.dtk_inputField {
  border-style: solid;
  border-width: 2px;
  border-radius: 4px;
}

/* Input field - Global Search field */
.dtk_inputField__globalSearch {
  border-color: rgb(56, 70, 46);
  background-color: rgb(255, 255, 255);
  opacity: 0.4;
  width: 90%;
  height: 2em;
  border-style: solid;
  border-width: 2px;
  border-radius: 4px;
}

/* Input field - Searchbox below slider*/
.dtk_inputField__searchBox--textInput {
  border-color: rgb(239, 239, 239);
  background-color: rgb(255, 255, 255);
  border-radius: 4px 0px 0px 4px;
  border-right: 2px solid rgb(153, 153, 153);
  width: 100%;
  height: 49px;
}

.dtk_inputField__searchBox--container {
  margin-right: -5%;
  padding-top: 1.5em;
}

.dtk_button.dtk_button--width-padding.dtk_button--height-padding.dtk_button__label.dtk_button__label--filled.col-md-2 {
  margin-left: 2.8em;
  margin-top: 2em;
  height: 49px;
}

/*||| Padding between modules*/
/* adding between modules */
.dtk_general_padding {
  margin-top: 1.7em;
}

/*||| Slideshow */

/* Container - Slide Show - original dimensions in design width: 1956px; and height: 866px;*/
/* .dtk_slideShow__container { */
/*width: 100%;
  height: 750px;
  /*padding-top: calc(862 / 1920 * 100%);*/
/* } */

/* Container - slide frame incl. Positioning*/
.dtk_slideShow__slide {
  display: flex;
  position: relative;
  align-items: center;
  width: 100%;
  height: 750px;
}

/* Container - slide frame incl. Positioning*/
.dtk_slideShow__slide-control {
  display: inline;
  position: absolute;
}

/* Font-style - Slideshow text general */
.dtk_slideShow__textBox {
  display: block;
  position: absolute;
  left: 8em;
  width: 35%;
  height: 60%;
  color: rgb(255, 255, 255);
  text-align: left;
  overflow: hidden;
}

/* Font-style - Slideshow text - overline */
.dtk_slideShow__textBox--overline {
  font-size: 0.9vw;
  font-family: "Titillium Web", sans-serif;
  font-weight: 200;
  text-transform: uppercase;
}

/* Font-style - Slideshow text - Headline */
.dtk_slideShow__textBox--headline {
  font-size: 2.625vw;
  font-family: "Abril Fatface", cursive;
  line-height: 1.2;
  width: 30vmax;
}

/* Font-style - Slideshow text - body text */
.dtk_slideShow__textBox--bodyText {
  font-size: 2.5vmin;
  font-family: "Titillium Web", sans-serif;
  font-weight: 300;
  width: 30vmax;
}

/*||| Searchbox at bottom of slider*/
/* Search-Box-over-slider-Container */
.dtk_searchBox__container {
  background-color: rgb(106, 164, 79);
  border-radius: 4px;
  width: 970px;
  height: 122px;
  margin-top: -7em;
  padding-top: 0.7em;
  z-index: 2;
}

/*||| Entry Card Section*/
/* Container - Entry Card - background*/
.dtk_entryCard__background {
  background-color: rgb(245, 245, 245);
  width: 1920px;
  height: 778px;
}

/* Global Search field*/
/* Global Search field - Searchbox*/
.dtk_globalSearch__inputField {
  border-style: solid;
  border-width: 2px;
  border-color: rgb(56, 70, 46);
  border-radius: 4px;
  background-color: rgb(255, 255, 255);
  opacity: 0.4;
  width: 317px;
  height: 50px;
}

/* Container - CardItem - General */
.dtk_cardItem__Container {
  background-color: rgb(255, 255, 255);
  border-radius: 4px;
}
/* Container - Entry Card Item */
.dtk_cardItem__Container--entryCard {
  width: 370px;
  height: 350px;
}

/* DTK - Adding drop shadow to bootstrap card components */
.card .dtk-quickstart:hover {
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.08);
}

/* Container - Entry Card Item */
.dtk_cardItem__Container--dogSearch {
  width: 366px;
  height: 569px;
}

/* Container - Entry Card Item - icon Circle*/
.dtk_cardItem__Circle {
  border-radius: 50%;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.08);
  position: relative;
  bottom: 45px;
  margin: 0 auto;
  width: 96px;
  height: 96px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

/* button - clickable container - hover state for icon cirlce*/
.card .dtk-quickstart:hover .dtk_cardItem__Circle {
  background-color: rgb(106, 164, 79);
  box-shadow: 0px 8px 16px 0px rgba(36, 95, 8, 0.2);
}

/* icon - color change - hover state for icon cirlce*/
.card .dtk-quickstart .bi {
  color: rgb(106, 164, 79);
  font-size: 2em;
}

/* icon - color change - hover state for icon cirlce*/
.card .dtk-quickstart:hover .bi {
  color: rgb(255, 255, 255);
}

/* icon - section icon - color and size*/
.dtk-icon_index-section {
  padding-bottom: 0.5em;
  color: var(--dtk-color-text-headline-highlighted);
  font-size: 2em;
}

/* icon - section icon - color and size*/
.dtk-icon_startpage--large > i {
  color: var(--dtk-color-text-headline-highlighted);
  font-size: 4em;
}

/* icon -- clickable container - hover state color change of icon*/
.dtk_container-button:hover .dtk_icon__color {
  fill: rgb(255, 255, 255);
}

/* icon -- clickable container - hover state color change of icon*/
.dtk_container-button:hover .dtk_icon__img-color {
  filter: brightness(0) invert(1);
}

/* font style - card Item - general*/
.dtk_cardItem__text {
  text-align: center;
}

/* font style - card Item - headline*/
.dtk_cardItem__headline {
  font-family: var(--dtk_theme__standardFont--sans-serif);
  font-size: 1.3125em;
  font-weight: var(--dtk_theme__fontWeight--medium);
  color: rgb(51, 51, 51);
  line-height: 1.524;
}

/* Font-style - card item - body text - entry card*/
.dtk_bodyText__card--entryCard {
  color: var(--dtk-color-text-medium);
  margin: 1.5em 3em 0 3em;
}

/*||| Blog-Info Section*/
/* Container - Blog/Info Section*/
.dtk_blog__background-container {
  background-color: rgb(255, 255, 255);
  width: 1920px;
  height: 1056px;
}

/* Font style - Blog/info - Subheadline */
.dtk_sectionHeadline__sub--blog {
  color: rgb(106, 164, 79);
  font-style: italic;
  font-weight: 600;
}

/*||| Module header - section applies to "Search a dog", "Events" and "News*/
/* Font-style - Module Header - general*/
.dtk_moduleHeader__text {
  text-align: center;
}

/* Font-style - Module Header - Paragraph style reset to have no additional margin*/
.dtk_moduleHeader__text p {
  margin: 0em;
}

/* Icons - module header - settings */
.dtk_icon__moduleHeader {
  /*height: 4em; - in case of varying icon sizes, activate standard height*/
  filter: invert(0.5) sepia(0.5) saturate(3) hue-rotate(65deg);
  margin: 2em 0 2em 0;
}

/*||| Module "Dog Search" - Hundesuche - Homepage */
/* dog search card item - Image container */
.dtk_cardItem__dogSearch-img {
  position: relative;
  margin: 0 0 2em 0;
  display: inline-flex;
  justify-content: center;
  width: 100%;
}

.dtk_cardItem__dogSearch-headline {
  font-size: 1.75em;
  font-family: "Playfair Display", serif;
  color: rgb(51, 51, 51);
  font-weight: bold;
  line-height: 1.071;
}

/* Error Page */
.error-template {
  font-size: 3em;
  margin-top: 10%;
  text-align: center;
}

.error-code {
  font-size: 2em;
  text-align: center;
}

.error-message {
  font-size: 1em;
  text-align: center;
}

/* Desktop*/
@media screen and (min-width: 993px) {
  .slideControl {
    display: none;
  }
}

@media screen and (max-width: 1024px) {
  .dtk_searchBox__container {
    width: 100%;
    margin-left: 0em;
  }
}

/* tablets */
@media screen and (max-width: 992px) {
  .dtk_cardItem__Container--entryCard {
    width: 333px;
    height: 360px;
  }
  .dtk_slideShow__slide {
    width: 100%;
    height: 350px;
    /*padding-top: calc(862 / 1920 * 100%);*/
  }

  .sliderElements,
  .sliderElements figure,
  .sliderControls {
    margin: 0;
    height: 350px;
  }

  .slideControl {
    display: block;
  }

  .dtk_searchBox__container {
    width: 100%;
  }

  .slideList img {
    height: 350px;
  }

  .mega-menu-toggle.mega-menu-open {
    margin-top: 5em;
  }

  .dtk_inputField__globalSearch {
    background: rgb(255, 255, 255)
      url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat
      9px center;
  }

  .dtk_inputField__globalSearch:focus {
    width: 130px;
    padding-left: 32px;
    color: #000;
    background-color: #fff;
    cursor: auto;
  }

  .dtk_inputField__globalSearch:-moz-placeholder {
    color: transparent;
  }

  .dtk_inputField__globalSearch::-webkit-input-placeholder {
    color: transparent;
  }
}

/* smartphones */
@media screen and (max-width: 600px) {
  .dtk_cardItem__Container--entryCard {
    width: 280px;
    height: 380px;
  }
  .dtk_slideShow__slide {
    width: 100%;
    height: 250px;
    /*padding-top: calc(862 / 1920 * 100%);*/
  }
  .dtk_container_button--slidernav-left {
    display: none;
  }

  .dtk_container_button--slidernav-right {
    display: none;
  }

  .sliderElements,
  .sliderElements figure,
  .sliderControls {
    margin: 0;
    height: 250px;
  }
  .slideControl {
    display: block;
  }

  .slideList img {
    height: 250px;
  }

  .dtk_searchBox__container {
    width: 100%;
  }

  #searchCategorie {
    display: none;
  }

  .dtk_button.dtk_button--width-padding.dtk_button--height-padding.dtk_button__label.dtk_button__label--filled.col-md-2 {
    margin-left: 0px;
    height: unset;
  }

  .mega-menu-toggle.mega-menu-open {
    margin-top: 5em;
  }

  .dtk_inputField__globalSearch {
    background: rgb(255, 255, 255)
      url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat
      9px center;
  }

  .dtk_inputField__globalSearch:focus {
    width: 130px;
    padding-left: 32px;
    color: #000;
    background-color: #fff;
    cursor: auto;
  }

  .dtk_inputField__globalSearch:-moz-placeholder {
    color: transparent;
  }

  .dtk_inputField__globalSearch::-webkit-input-placeholder {
    color: transparent;
  }

  .offcanvas-body {
    padding-bottom: 5em !important;
  }
}

/*||| Module - Magazine ------------*/
/*----Specification of styles for Magazine title image and text block --------------*/

/* Container - image container */
.dtk_magazine-container {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding: 5em;
}

/* Container - image container */
.dtk_magazine-container__image {
  display: flex;
  flex-flow: row nowrap;
  flex: auto;
  margin-right: 2em;
}

/* Image - Magazine title image - general*/
.dtk_image__magazine {
  max-height: 20vmax;
  filter: drop-shadow(0.3em 0.3em 1em rgb(0, 0, 0));
}

/* Image - Magazine title image - top*/
.dtk_image__magazine--top {
  position: relative;
  top: -2.5em;
  left: -4em;
  filter: drop-shadow(1.5em 0.3em 1.5em rgb(0, 0, 0));
  transform: rotate(25deg);
}

.dtk_magazine__text {
  text-align: left;
}

/* DTK Image caption */
.dtk_image-caption {
  font-family: var(--dtk_theme__standardFont--sans-serif);
  color: var(--dtk-color-text-medium);
  font-size: 0.85em;
}

/* Font-style - body text - magazine module*/
.dtk_bodyText__magazine {
  color: rgb(59, 59, 59);
}

/*||| Module - Teckeldatenbank ------------*/
/*----Specification of styles for Teckeldatenbank intro --------------*/

/* Container - Teckeldatenbank general */
.dtk_teckeldatenbank-container {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding: 5em;
}

.dtk_teckeldatenbank__text {
  text-align: center;
}

.dtk_teckeldatenbank__text--light {
  color: rgb(255, 255, 255);
}

.dtk_teckeldatenbank__text--signature {
  font-weight: 600;
}

/*||| Module - Events-Calendar ------------*/
/*----Specification of styles for Events calendar / Veranstaltungskalender incl. header, categories, event cards --------------*/

/* Container - module container for events */
.dtk_events-container {
  display: flex;
  flex-flow: column;
  align-items: center;
}

/*---Navigation - Event category -----*/
/* Navigation - Event Category - container providing line below tabs*/
.dtk_events__category-container {
  margin-top: 2em;
  /*border: 0.025em solid transparent;
  border-bottom-color: rgb(180, 180, 180);*/
}

/* Font-style - Event article - date in header*/
.dtk-headline_sub--medium {
  font-size: var(--dtk_theme__fontSize--medium);
  font-family: var(--dtk_theme__standardFont--sans-serif);
  line-height: 1.2;
  color: var(--dtk-color-text-headline-highlighted);
  font-weight: var(--dtk_theme__fontWeight--medium);
}

/* Font-style - Event article - content*/
.dtk-text_infofield {
  font-size: var(--dtk_theme__fontSize--small);
  font-family: var(--dtk_theme__standardFont--sans-serif);
  color: var(--dtk-color-text-medium);
  font-weight: var(--dtk_theme__fontWeight--medium);
}

/* Font-style - Event article - content*/
.dtk-text_infofield--label {
  font-size: var(--dtk_theme__fontSize--xsmall);
  font-weight: var(--dtk_theme__fontWeight--medium);
  color: var(--dtk-color-text-dark);
}

/* Font-style - Event article - content*/
.dtk-infofield > p {
  font-size: var(--dtk_theme__fontSize--small);
  font-family: var(--dtk_theme__standardFont--sans-serif);
  color: var(--dtk-color-text-medium);
  font-weight: var(--dtk_theme__fontWeight--medium);
}

/* Navigation - Event category - general tab settings */
.dtk_events__category-tabs ul {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  list-style-type: none;
  padding: 0em;
  border: 0.025em solid transparent;
  border-bottom-color: rgb(180, 180, 180);
}

/* Navigation - Event category - list item */
.dtk_events__category-tabs ul li {
  font-size: 0.875em;
  font-family: "Montserrat", sans-serif;
  color: rgb(119, 119, 119);
  line-height: 1.286;
  text-align: center;
  padding: 0 0.5em 0 0.5em;
}

/* Navigation - Event category - link element */
.dtk_events__category-tabs ul li a {
  text-decoration: none;
  color: rgb(119, 119, 119);
  background-color: rgb(255, 255, 255);
  display: inline-flex;
  justify-content: center;
  white-space: nowrap;
}

/* Navigation - Event category - link item div frame */
.dtk_events__category-items {
  border: 0.2em solid transparent;
  padding-bottom: 1.5em;
}

/* Navigation - Event category - link item - hover:state */
.dtk_events__category-items:hover {
  border-bottom-color: rgb(119, 119, 119);
}

/* Navigation - Event category - link item - state:hover */
.dtk_events__category-items:focus {
  border-color: rgb(119, 119, 119);
}

/* Navigation - Event category - link item - state:focus */
.dtk_events__category-items:focus {
  border-color: rgb(119, 119, 119);
}

/* Navigation - Event category - link item - state:active */
.dtk_events__category-items:focus {
  border-bottom-color: rgb(215, 116, 0);
}

/* Navigation - Event category - link item - state:active */
.dtk_events__category-items--selected {
  border-bottom-color: rgb(215, 116, 0);
  font-weight: 600;
  color: rgb(51, 51, 51);
}

/* Container - CardItem - General */
.dtk_cardItem__Container--eventCard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Font style - Event card element */
.dtk_events__card-text {
  text-align: left;
}

/* Font-style - card item - body text - event card*/
.dtk_bodyText__card--eventCard {
  color: rgb(102, 102, 102);
  margin: 1em 0 0 0;
}

/* Font-style - event card - badge*/
.dtk_badgeLabel__date {
  color: rgb(255, 255, 255);
  text-align: center;
}

/* Font-style - event card - badge month*/
.dtk_badgeLabel__date--month {
  font-size: 0.875em;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  line-height: 1.2em;
  background-color: rgb(70, 92, 61);
  margin: 0em;
  padding: 0.4rem;
}

/* Font-style - event card - badge day*/
.dtk_badgeLabel__date--day {
  font-size: 1.875em;
  font-family: "Playfair Display", serif;
  font-weight: bold;
  line-height: 1.071;
  background-color: rgb(116, 178, 87);
  margin: 0em;
  padding: 0.55rem;
}

/* news card - badge styling*/
.badge.dtk-custom-badge {
  background-color: var(--dtk-color-text-headline-highlighted);
}

/* news card - featured badge position*/
.badge.dtk-custom-badge-featured {
  font-size: 1.2em;
  margin-left: 0.7em;
}

/* Font-style - event card - badge month*/
.dtk_badgeLabel__featured {
  font-size: 0.875em;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  line-height: 1.2em;
  background-color: rgb(116, 178, 87);
  margin: 0em;
  padding: 0.4rem;
}

/* Image container - card item - event card */
.dtk_cardItem__image-container {
  position: relative;
  margin: 0 0 2em 0;
  display: inline-flex;
  justify-content: center;
  width: 100%;
}

/* Image - card item - event card */
.dtk_event-cardItem__image {
  width: 100%;
}

/* Badge container - card item - event card */
.dtk_cardItem__badge-container {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: auto;
}

/* Badge container - card item - event card */
.dtk_cardItem__badge-container--featured {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex: auto;
}

/*----Specification of styles for Footer --------------*/
/*||| Module - Footer ------------*/

/* Container - module container for footer */
.dtk_footer-container {
  background-color: var(--dtk-color-background-footer);
}

/* Container - module container for footer */
.dtk_footer-container__main {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 1em;
}

/* Container - module container for footer */
.dtk_footer-container__main--info {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  flex: 1;
}

/* Container - module container for footer */
.dtk_footer-container__main--socialMedia {
  display: flex;
  flex-flow: row;
  justify-content: flex-start;
  margin-top: 1.5em;
}

/* Container - icon for social media in footer */
.dtk_footer__icon {
  height: 16px;
  margin-right: 1.5em;
}

/* Container - footer - site map */
.dtk_footer-container__main-sitemap {
  display: flex;
  flex-flow: column;
  flex: 2;
}

/* Container - module container for footer */
.dtk_footer-container__main-sitemap--header {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 10px;
}

/* Container - footer Pages headline text */
/* .dtk_footer-container__main-sitemap--header-text {
  /* flex: 1; */
/*} */

/* Container - footer Horizontal line */
.dtk_footer-container__main-sitemap--header-line {
  flex: 2;
}

.dtk_footer-container__main-sitemap--item {
  display: flex;
  flex-flow: column wrap;
  align-items: flex-start;
  justify-content: space-between;
  margin: 0 0 1em 0;
}

.dtk_footer-container__main-sitemap--item > li > a {
  list-style: none;
  text-decoration: none;
  color: rgb(255, 255, 255);
  font-size: 0.875em;
  text-transform: uppercase;
  line-height: 1.2;
  font-weight: 400;
  margin-right: 1em;
}

.dtk_footer-container__main-sitemap--item > li > a:hover {
  text-decoration: underline;
}

.dtk_footer-container__main-sitemap--item > li {
  list-style: none;
}

/* Container - footer - sub part */
.dtk_footer-container__sub {
  display: flex;
  flex-flow: row;
  margin-top: 1.5em;
}

/* Container - footer - speparator*/
.dtk_footer__separator {
  margin-top: 1em;
}

/* Separator - footer - sub part */
.dtk_footer__line {
  border: 0.05px solid rgb(255, 255, 255);
  width: 100%;
}

/* Separator - Search page - Filters */
.dtk_separator-line--content {
  border: 0.05px solid var(--dtk-color-text-headline-highlighted);
  width: 100%;
}

/* Linklist - footer - legal */
.dtk_footer__link--legal {
  display: flex;
  list-style-type: none;
  padding: 0em;
}

/* Linklist - footer - legal items */
.dtk_footer__link--legal li {
  margin: 0 15px;
}

/* Linklist - footer - legal items - link */
.dtk_footer__link li a {
  text-decoration: none;
  color: rgb(255, 255, 255);
}

/* Linklist - footer - legal items - state:hover */
.dtk_footer__link li a:hover {
  text-decoration: underline;
}

/* Linklist - footer - legal items - state:focus */
.dtk_footer__link li a:focus {
  font-weight: 600;
}

/* Linklist - footer - legal items - state:focus */
.dtk_footer__link li a:active {
  font-weight: 600;
}

/* Linklist - footer - legal items */
.dtk_footer__link--legal-pushed {
  margin-left: auto;
}

/* Font style - dtk footer */
.dtk_footer__text {
  font-family: var(--dtk_theme__standardFont--sans-serif);
  color: var(--dtk-color-text-light);
  text-align: left;
}

/* Font style - dtk main info*/
.dtk_footer__text--info {
  font-size: 0.875em;
  line-height: 1.286;
}

.dtk_footer__link.dtk_footer__link--legal > li > a {
  font-size: 0.875em;
  text-transform: uppercase;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.15em;
}

.dtk_footer__link.dtk_footer__link--legal > div > li {
  display: inline;
  float: right;
}

/* Font style - dtk main info*/
.dtk_footer__text--logo {
  font-size: 1.875em;
  line-height: 1.286;
  font-weight: 600;
}

/* Font style - footer main info*/
.dtk_footer__text--stats {
  font-size: 0.875em;
  line-height: 1;
}

/* Font style - footer - legal */
.dtk_footer__text--legal {
  font-size: 0.875em;
  text-transform: uppercase;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.15em;
}

/* Font style - footer - legal */
.dtk_footer__text--items {
  font-size: 0.875em;
  text-transform: uppercase;
  line-height: 1.2;
  font-weight: 400;
  margin-right: 1em;
}

/*----Specification of styles for News Module --------------*/
/*||| Module - News ------------*/

/* Badge container - card item - event card */
.dtk_cardItem__badge-container--news {
  position: absolute;
  top: 5;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex: auto;
  background-color: grey;
}

/* Badge container - card item - event card */
.dtk_cardItem__container-news-clicker {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: auto;
  background-color: rgba(255, 136, 0, 0.9);
}

/* Image container - card item - event card */
.dtk_cardItem__image-container--news {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  margin: 0 0 2em 0;
  width: 100%;
}

/* Container - Alignment for badge container - top right */
.dtk_container__flex-align--top-right {
  justify-content: flex-end;
}

/* Container - Alignment for badge container  or button - center */
.dtk_container__flex-align--center-button {
  align-self: center;
  justify-self: center;
}

/* Font-style - news card - general*/
.dtk_news__text {
  font-family: var(--dtk_theme__standardFont--sans-serif);
  font-size: 0.875em;
}

/* Font-style - news card - general*/
.dtk_news__text--dateline {
  font-family: var(--dtk_theme__standardFont--sans-serif);
  font-size: 0.875em;
  color: var(--dtk-color-text-medium);
}

/* card image - Responsive embedding */
.dtk_object-fit--cover {
  object-fit: cover;
}

/* card image - fit entire image in available space */
.dtk_object-fit--contain {
  object-fit: contain;
}

/*DTK RESPONSIVE IMAGE Scaling based on MEDIA QUERIES*/

/* Image scaling for Viewports xs - larger 0px */
@media only screen and (min-device-width: 0px) {
  .dtk_card-img {
    width: 100%;
    height: 70vw;
  }
}

/* Image scaling for Viewports sm - larger 576px */
@media only screen and (min-device-width: 576px) {
  .dtk_card-img {
    width: 100%;
    height: 50vw;
  }
}

/* Image scaling for Viewports md - larger 768px */
@media only screen and (min-device-width: 768px) {
  .dtk_card-img {
    width: 100%;
    height: 15vw;
  }
}

/* Image scaling for Viewports lg - larger 992px */
@media only screen and (min-device-width: 992px) {
  .dtk_card-img {
    width: 100%;
    height: 15vw;
  }
}

/* News card image - Responsive embedding */
.dtk_card-img-top {
  max-height: 40vh;
  min-height: 300px;
}

/* News card feature image - Responsive embedding */
.card-img-top--featured {
  width: 100%;
  height: 25vw;
  object-fit: cover;
}

/* News card feature image - Responsive embedding */
.dtk_card-img-300px {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

/* News card feature image - Responsive embedding */
.dtk_card-img-magazine {
  width: 100%;
  max-width: 30vw;
  height: auto;
  object-fit: fill;
}

/* Container - News - Date Badge*/
.dtk_news__dateBadge {
  background-color: var(--dtk-color-text-headline-highlighted);
  margin-left: 0.5em;
}

/* Font-style - news card - badge for date*/
.dtk_badgeLabel__news-date {
  font-size: 0.875em;
  text-align: center;
  color: rgb(255, 255, 255);
}

/* News - card - custom footer*/
.card-footer.dtk_news__cardFooter {
  background-color: var(--dtk-color-background-header);
}

/* Font-style - news card - badge month*/
.dtk_badgeLabel__news-date--month {
  font-family: var(--dtk_theme__standardFont--sans-serif);
  text-transform: uppercase;
  line-height: 1.2em;
  font-weight: var(--dtk_theme__fontWeight--medium);
  margin: 0em;
}

/* Font-style - news card - badge day*/
.dtk_badgeLabel__news-date--day {
  font-size: 1.875em;
  line-height: 1.071;
  margin: 0em;
}

/* Font-style - news card - overline info text reading time*/
.dtk_news__text-overline {
  font-family: var(--dtk_theme__standardFont--sans-serif);
  font-size: 0.875em;
  text-transform: uppercase;
  line-height: 1.071;
  letter-spacing: 0.1em;
  color: var(--dtk-color-text-medium);
  margin: 0em;
}

/* Font-style - news card - headline news item default*/
.dtk_news__text-headline--default {
  font-size: 1.5em;
  font-family: var(--dtk_theme__standardFont--headlines);
  color: var(--dtk-color-text-dark);
  font-weight: bold;
  line-height: 1.071;
  margin-top: 0.3em;
}

/* Font-style - news card - headline news item default*/
.dtk_news__text-headline--featured {
  font-size: 1.75em;
}

/* Container - badge text - news item*/
.dtk_badgeLabel__news {
  position: absolute;
  word-break: break-word;
  background-color: rgba(255, 255, 255, 0.4);
  padding: 0.4em;
  margin: 1em;
}

/* Container - news - text box frame */
.dtk_news-container__text {
  display: flex;
  flex-flow: column nowrap;
  align-content: center;
  width: 100%;
}

/* Container - news - text box frame */
.dtk_news-container__text-overline {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
}

/* Container - news - text pushed right */
.dtk_container__flex-align-pushed--right {
  margin-left: auto;
}

/* Icon - news - reading time clock icon*/
.dtk_news__icon {
  height: 14px;
  margin-right: 0.1em;
}

/* container - news - horizontal divider line*/
.dtk_news__separator {
  border-bottom: 2px solid rgb(116, 178, 87);
  width: 15%;
  margin: 0.2em 0 0.8em 0;
}

/*---------------------------------------------------------------------*/
/*----# Style settings for DTK Teckelsuche - Search Page #-------------*/
/*---------------------------------------------------------------------*/

/*---------------------------------------------------------------------*/
.modal-paragraph {
  margin-bottom: 0;
  line-height: 1.5rem;
}

.modal-header-text {
  margin-bottom: 0.6rem;
}

.modal-body-box {
  width: auto;
}

.modal-body {
  padding-left: 40px;
  padding-right: 40px;
}

/*------Container Settings for DTK Teckelsuche - Dog Search page-------*/

/* container - teckelsuche - dog search wrapper container*/
.dtk_dogsearch-container__wrapper {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: stretch;
  border: var(--dev-container-border-size) solid rgb(231, 64, 64);
}

/* container - teckelsuche - dog search FILTER-Panel container*/
.dtk_dogsearch-container__filterpanel {
  display: flex;
  flex: 1 0 20%;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  border: var(--dev-container-border-size) solid rgb(241, 238, 30);
}

/* container - teckelsuche - dog search Detail-Panel container*/
.dtk_dogsearch-container__detailpanel {
  display: flex;
  flex: 1 0 60%;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  border: var(--dev-container-border-size) solid rgb(241, 238, 30);
}

/* container - teckelsuche - dog search RESULT-Column container*/
.dtk_dogsearch-container__resultpanel {
  display: flex;
  flex: 0 1 80%;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  padding: 0em;
  border: var(--dev-container-border-size) solid rgb(120, 202, 240);
}

/* container - teckelsuche - dog search RESULT-header container*/
.dtk_dogsearch-container__resultheader {
  display: flex;
  flex: 0 1 content;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  background-color: rgb(255, 255, 255);
  border: var(--dev-container-border-size) rgb(142, 245, 128);
  padding: 1em;
  border-bottom: 1px solid rgb(196, 196, 196);
  top: 100px;
  z-index: 20;
}

/* container - teckelsuche - offer details RESULT-header container*/
.dtk_dogdetails-container__resultheader {
  border-bottom: 1px solid rgb(196, 196, 196);
  top: 100px;
  z-index: 20;
}

/* container - search forms - filter header*/
.dtk_container__filterHeader {
  top: 100px;
  z-index: 20;
}

/* container - teckelsuche - offer details RESULT-body container*/
.dtk_dogdetails-container__resultbody {
  z-index: 10;
}

/* container - teckelsuche - dog search RESULT-details container*/
.dtk_dogsearch-container__resultdetails {
  display: flex;
  flex: 1 0 80%;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  border: var(--dev-container-border-size) solid rgb(23, 141, 8);
}

/* container - teckelsuche - dog search RESULT_LIST container*/
.dtk_dogsearch-container__resultlist--background {
  display: flex;
  flex: 1 1 70%;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  height: 100%;
  background-color: rgb(230, 230, 230);
  box-shadow: 3px 0px 10px rgba(0, 0, 0, 0.4);
  border: var(--dev-container-border-size) solid rgb(39, 17, 235);
}

/* container - teckelsuche - dog search RESULT_LIST container*/
.dtk_dogsearch-container__resultlist {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  height: 100%;
  padding: 2em 0.1em 0 0.1em;
  border: var(--dev-container-border-size) solid rgb(17, 235, 162);
}

/* container - teckelsuche - dog search RESULT_MAP container*/
.dtk_dogsearch-container__resultmap {
  display: flex;
  flex: 1 0 content;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  height: 100%;
  border: var(--dev-container-border-size) solid rgb(39, 17, 235);
}

/* container -  RESULT_LIST_ITEM container*/
.dtk-resultlist__item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  border: var(--dev-container-border-size) solid rgb(17, 111, 235);
}

/* container -  RESULT_LIST_ITEM container*/
.dtk-resultlist__item--header {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: stretch;
  padding: 0.5em 0.5em 0.5em 1em;
  border-radius: 4px 4px 0px 0px;
}

.sitzung-abgelaufen {
  text-decoration: underline;
  cursor: pointer;
  font-weight: bold;
}

/* container -  RESULT_LIST_ITEM container*/
.dtk-resultlist__item--tools {
  /* display: flex; */
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: stretch;
  padding: 0.5em 0.5em 0.5em 0.5em;
  border-radius: 0px 0px 4px 4px;
}

/* container - RESULT_LIST_EDIT & DELETE BUTTON -  container*/
.edit-button-box {
  display: flex;
  /* justify-content: space-between; */
  /* width: 100%; */
}

/* container -  RESULT_LIST_ITEM container*/
.dtk-resultlist__item--titleBox {
  display: flex;
  flex: 1 1;
}

/* container -  RESULT_LIST_ITEM container*/
.dtk-resultlist__item--metadataBox {
  display: flex;
  flex: 0 1 50;
  justify-content: flex-end;
  gap: 0.3em;
}

/* container -  RESULT_LIST_ITEM_CONTENT container*/
.dtk-resultlist__item--content {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 1em;
  border: var(--dev-container-border-size) solid rgb(106, 164, 79);
  text-decoration: none;
}

/* container -  RESULT_LIST_ITEM_CONTENT_IMAGE container*/
.dtk-resultlist__item--content-img {
  display: flex;
  flex: 0 1 15%;
}

/* container -  RESULT_LIST_ITEM_CONTENT_IMAGE container*/
.dtk-resultlist__item--content-text {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.5em;
  flex: 1 1 content;
}

/* container -  RESULT_LIST_ITEM_CONTENT_IMAGE container*/
.dtk-img_resultlist-item {
  width: 180px;
  border-radius: 4px;
  height: 180px;
  object-fit: cover;
  object-position: top center;
}

/* container -  RESULT_LIST_ITEM_CONTENT_IMAGE container*/
.dtk-img_resultlist-item_detail {
  width: 550px;
  border-radius: 4px;
  height: 450px;
  object-fit: cover;
  object-position: top center;
}

/* container -  RESULT_LIST_ITEM_CONTENT_IMAGE container*/
.dtk-resultlist__item--content-row {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  gap: 1em;
}

/* container - teckelsuche - dog search FILTER-header container*/
.dtk_dogsearch-container__filterheader {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  background-color: var(--dtk-color-background-filter-header);
  padding: 1em 0 1em 1em;
  border: var(--dev-container-border-size) solid rgb(243, 78, 127);
}

/* container - teckelsuche - dog search FIlTER-form container*/
.dtk_dogsearch-container__filterform {
  display: flex;
  flex: 1 0 80%;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  background-color: rgb(48, 53, 46);
  padding: 0 1em 0 1em;
  border: var(--dev-container-border-size) solid rgb(141, 28, 8);
}

/* container - teckelsuche - dog search FIlTER-form container*/
.dtk_dogsearch-container__buttons {
  display: flex;
  justify-content: start;
  flex-flow: column wrap;
  align-items: stretch;
  border: var(--dev-container-border-size) solid rgb(216, 219, 25);
}

/* container - teckelsuche - dog search FIlTER-form subsection*/
.dtk_dogsearch-container__filterform--subsection {
  display: flex;
  justify-content: start;
  flex-flow: column nowrap;
  align-items: flex-start;
  width: 100%;
  margin-top: 0.8em;
  border: var(--dev-container-border-size) solid rgb(216, 219, 25);
}

/* container - teckelsuche - dog search FIlTER-form subsection*/
.dtk_dogsearch-container__filterform--subsection-row {
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
  align-items: stretch;
  margin-top: 0.8em;
  gap: 0.5em;
  width: 100%;
  border: var(--dev-container-border-size) solid rgb(216, 219, 25);
}

/* container - teckelsuche - dog search FIlTER-form subsection*/
.dtk_dogsearch-container__filterform--subsection-rowGroup {
  margin-top: 0em;
}

/* container - teckelsuche - dog search FIlTER-form subsection group*/
.dtk_dogsearch-container__filterform--subsectionGroup {
  display: flex;
  justify-content: space-between;
  flex-flow: row nowrap;
  align-items: stretch;
  gap: 1em;
  width: 100%;
  border: var(--dev-container-border-size) solid rgb(25, 219, 41);
}

/* container - teckelsuche - dog search FIlTER-form subsection with specified height for "FARBE/Color" Section*/
.dtk_dogsearch-container__filterform--subsection-fixedheight {
  display: flex;
  flex-flow: column wrap;
  align-items: stretch;
  height: 180px;
}

/* container - teckelsuche - dog search Detail-form subsection with specified height for Section*/
.dtk_dogsearch-container__detailform--subsection-fixedheight2 {
  display: flex;
  flex-flow: column wrap;
  align-items: stretch;
  height: 120px;
  margin-right: 0.5em;
}

/* container - teckelsuche - dog searchDetail-form subsection with specified height Section total*/
.dtk_dogsearch-container__detailform--subsection-fixedheight {
  display: flex;
  flex-flow: column wrap;
  align-items: stretch;
  height: 500px;
}

/* container - teckelsuche - dog search FIlTER-form subsection 100% width extension*/
.dtk_dogsearch-container__filterform--subsection-maxwidth {
  width: 100%;
}

/* container - teckelsuche - dog search FIlTER-form subsection group*/
.dtk_dogsearch-container__filterform--subsectionGroup-divider {
  margin-top: 1.5em;
}

/* button - teckelsuche - dog search first button - search button*/
.dtk_dogsearch__button--first {
  margin-top: 1em;
  width: 35%;
  max-width: 300px;
  /* margin: auto; */
}

/* button teckelsuche - delete btn */

.welpensuche-delete-btn {
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

/* button - teckelsuche - dog search first button - search button*/
.dtk_button__color-bs-blue {
  color: var(--bs-blue);
}

/* button - rounding button for elyptic shape - e.g. set filters*/
.dtk_button__shape-bs-rounded {
  border-radius: 30px;
}

/* button - teckelsuche - dog search first button - search button*/
.dtk-container__settingsBox {
  width: 100%;
}

/* button - teckelsuche - dog search first button - search button*/
.dtk_button__container--filterSetting {
  margin: 0.2em 0.4em 0.2em 0;
}

/* container - set filter buttons*/
.dtk-container_filterSetting {
  display: flex;
  flex-flow: row wrap;
  flex: 1 0 30%;
}
.usermenu-box {
  display: flex;
  text-decoration: none;
  color: green;

  cursor: pointer;
}
.usermenu-box:hover {
  text-decoration: underline;

  color: rgb(215, 116, 0);
}

.usermenu-box > h6 {
  padding-left: 7%;
}

.popover {
  z-index: 3001;
}
.anmeldebox {
  display: flex;
  text-decoration: none;
  color: green;

  cursor: pointer;
}
.anmeldebox:hover {
  text-decoration: underline;

  color: rgb(215, 116, 0);
}

.anmeldebox > h6 {
  padding-left: 7%;
}

/*-Color style of light grey elements in teckelsuche-*/
.dtk_color__light-grey {
  color: rgb(132, 140, 152);
}

/*-Color style of light grey elements in teckelsuche-*/
.dtk_color__light-green {
  color: rgb(106, 164, 79);
}

/*-Color style of light grey elements in teckelsuche-*/
.dtk_color__dark-green {
  color: rgb(45, 78, 59);
}

/*-Color style of light green elements in teckelsuche-*/
.dtk_background-color__light-green {
  background-color: rgb(106, 164, 79);
}

/*-Color style of bright orange elements in teckelsuche-*/
.dtk_background-color__light-orange {
  background-color: rgb(215, 116, 0);
}

/*-Color style of bright orange elements in teckelsuche-*/
.dtk_background-color__grey {
  background-color: rgb(199, 199, 199);
}

/* container - teckelsuche - dog search FIlTER-form subsection group*/
.dtk_dogsearch-container__rowLeft {
  display: flex;
  justify-content: flex-start;
  flex-flow: row wrap;
  align-items: center;
  gap: 1em;
  width: 100%;
  border: var(--dev-container-border-size) solid rgb(66, 110, 70);
}

/*------Font Settings for DTK Teckelsuche - Dog Search page-------*/
/* Font Style - DTK dog search - Filter Panel - light text color*/
.dtk_dogsearch__lightText {
  color: var(--dtk-color-text-light);
}

/* Font Style Ggeneral - Dark colored text (dark grey) */
.dtk_dogsearch__darkText {
  color: var(--dtk-color-text-dark);
}

/* Font Style Ggeneral - Medium colored text (medium grey) */
.dtk_textColor__medium {
  color: var(--dtk-color-text-medium);
}

/* Font Style general - Defining theme standard Font*/
.dtk_theme__standardFont--sans-serif {
  font-family: var(--dtk_theme__standardFont--sans-serif);
}

/* Font Style general - Defining theme standard Font for headlines*/
.dtk_theme__standardFont--headlines {
  font-family: var(--dtk_theme__standardFont--headlines);
}

/* Font Style - DTK dog search - Filter Panel - Section Headline*/
.dtk_dogsearch__filter--sectionHeadline {
  font-family: var(--dtk_theme__standardFont--sans-serif);
  text-transform: uppercase;
  font-size: 0.875em;
  line-height: 2.143;
  color: var(--dtk-color-text-section-light);
  font-weight: var(--dtk_theme__fontWeight--medium);
}

/* Font Style - DTK details page - Section Headline - content*/
.dtk_sectionHeadline__details-content {
  font-family: var(--dtk_theme__standardFont--sans-serif);
  text-transform: uppercase;
  font-size: 0.875em;
  line-height: 2.143;
  font-weight: 600;
  color: var(--dtk-color-text-headline-highlighted);
}

/* Font Style - DTK dog search - Filter Panel - SubSection group Headline*/
.dtk_dogsearch__filter--sectionGroupHeadline {
  font-size: 1.125em;
  font-weight: 600;
}

/* Font Style - DTK dog search - Filter Panel - SubSection group subheadline*/
.dtk_dogsearch__filter--sectionGroupSubHeadline {
  font-size: 1em;
  font-weight: 600;
  margin: 0.5em 0 0 0;
}

/* Font Style - DTK dog search - Filter Panel - Filter Panel headline*/
.dtk_dogsearch__result--headline {
  font-size: 1.875em;
  font-weight: bold;
  line-height: 1;
  color: rgb(35, 39, 36);
  margin-bottom: 0.2em;
}

/* Font Style - DTK dog search - Filter Panel - Filter Panel headline*/
.dtk_dogsearch__result--subHeadline {
  font-size: 1em;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 0.5em;
}

/* Font Style - DTK dog search - Filter Panel - Filter Panel headline*/
.dtk_dogsearch__result--hits {
  font-size: 0.75em;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1;
  color: rgb(136, 85, 52);
}

/* Font Style - DTK dog search - Result Panel - top headline*/
.dtk_dogsearch__filter--headline {
  font-size: 1.312em;
  font-weight: bold;
  line-height: 1.196;
  margin-bottom: 0.8em;
}

/* Font Style - DTK dog search - Filter Panel - Filter Panel headline*/
.dtk_dogsearch__filter--itemLabel {
  font-family: "Montserrat";
  font-size: 0.875em;
  line-height: 2.143;
}

/* Font Style - DTK dog search - Filter Panel - Filter Panel headline*/
.dtk-resultlist__headline {
  font-size: 1.125em;
}

/* Font Style - DTK dog search - Result list - metadata like date*/
.dtk-resultlist__metadata {
  font-size: 0.75em;
}

/* Font Style - DTK dog search - Result list - content label headline*/
.dtk-resultlist__itemLabels {
  font-size: 0.75em;
  font-weight: 600;
}

/*------Input Elements - DTK Check boxes -------*/

/* DTK Make default checkbox invisible to replace it with custom check box */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  display: none;
  /* position: absolute;
  left: 0;
  opacity: 0.01; */
}

/* Font style and Input checkbox - label font style settings*/
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  font-family: var(--dtk_theme__standardFont--sans-serif);
  font-size: 0.875em;
  line-height: 1.2em;
  padding: 0 1em 0.9em 0;
  cursor: pointer;
}

/* checkbox preceeding label - styling aspect - position, size, color  */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
  content: "";
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.5em;
  border: 1px solid #aaa;
  background: #fff;
  border-radius: 0.2em;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 0 rgba(203, 34, 237, 0.2);
  -webkit-transition: all 0.275s;
  transition: all 0.275s;
}

/* input - check mark - CHECK-MARK styling aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
  content: "\2714";
  position: absolute;
  left: 0.18em;
  order: -1;
  font-size: 1 em;
  color: rgb(255, 255, 255);
  line-height: 0;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

/* input checkbox - CHECKED State background of checked checkbox */
[type="checkbox"]:checked + label:before {
  box-shadow: none;
  border-color: #bbb;
  background-color: rgb(106, 164, 79);
}

/* input checkbox - HOVER state - background of hover checkbox */
[type="checkbox"]:hover + label:before {
  box-shadow: none;
  border-color: #bbb;
  background-color: rgba(106, 164, 79, 0.75);
}

/* checked mark aspect changes - not checked */
[type="checkbox"]:not(:checked) + label:after {
  opacity: 0;
  -webkit-transform: scale(0) rotate(45deg);
  transform: scale(0) rotate(45deg);
}

/* checked mark aspect changes - checked */
[type="checkbox"]:checked + label:after {
  opacity: 1;
  -webkit-transform: scale(1) rotate(0);
  transform: scale(1) rotate(0);
}

/* Disabled checkbox - checkbox*/
[type="checkbox"]:disabled:not(:checked) + label:before,
[type="checkbox"]:disabled:checked + label:before {
  box-shadow: none;
  border-color: #bbb;
  background-color: #e9e9e9;
}
/* Disabled checkbox - checkmark*/
[type="checkbox"]:disabled:checked + label:after {
  color: #777;
}
/* Disabled checkbox - label*/
[type="checkbox"]:disabled + label {
  color: #aaa;
}

/* Accessibility settings Check box FOCUS state*/
[type="checkbox"]:checked:focus + label:before,
[type="checkbox"]:not(:checked):focus + label:before {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1),
    0 0 0 6px rgba(203, 34, 237, 0.2);
}

/* Font style and Input radio - label font style settings*/
[type="radio"]:not(:checked) + label,
[type="radio"]:checked + label {
  display: flex;
  align-items: center;
  font-family: var(--dtk_theme__standardFont--sans-serif);
  font-size: 0.875em;
  line-height: 1.2em;
  padding-top: 0.28em;
  cursor: pointer;
}

/* input radio - Selected State background of radio */
[type="radio"]:checked {
  background: rgb(106, 164, 79);
}

/*--------------------------------------*/
/*------Input Elements - DTK Text/Number input field --------*/

/* Input field + label container */
.dtk_inputFieldWithLabel__container {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: stretch;
  border: var(--dev-container-border-size) solid rgb(30, 241, 40);
}

.dtk_inputFieldWithLabel__container--row {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: baseline;
  gap: 0.3em;
  border: var(--dev-container-border-size) solid rgb(30, 241, 40);
}

/* Input field container */
.dtk_inputField__container {
  display: inline-flex;
  flex: 1 1 30%;
  border: 0;
  border-radius: 2px;
  background-color: rgb(255, 255, 255);
  overflow: hidden;
}

/* Input field container */
.dtk_inputField__alphaNum {
  display: inline-flex;
  border: 0;
  border-radius: 2px;
  background-color: rgb(255, 255, 255);
  overflow: hidden;
  height: 2em;
}

/* Input field icon at beginning of input field general */
.dtk_inputField__icon {
  background-repeat: no-repeat;
  background-position: center;
  height: 100%;
  padding: 0.5em 0.8em 0.5em 0.5em;
  color: rgb(0, 0, 0);
}

/* Input field icon image "location pin" */
.dtk_inputField__icon--location {
  background-image: url(icon/Location-pointer.svg);
}

/* Input field icon image "location pin" */
.dtk_inputField__icon--star {
  background-image: url(icon/Clock-icon.svg);
}

/* Input box - general stlying*/
.dtk_inputField__inputBox {
  border: 0;
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
  flex: 1;
  font-size: 0.875em;
  color: rgb(117, 117, 117);
}

/* Input box - for PLZ stlying*/
.dtk_inputField__inputBox--ZIPcode {
  width: 7ch;
}

/* Input box length - for Date field */
.dtk_inputField__inputBox--Date {
  width: 20ch;
}

/* Input box length - for Number field*/
.dtk_inputField__inputBox--Number {
  width: 5.5em;
}

/* Input box length - for DTK Number*/
.dtk_inputField__inputBox--DTKnr {
  width: 20ch;
}

/* Font Style - DTK input field label*/
.dtk_inputField__labelText {
  font-size: var(--dtk_theme__fontSize--xsmall);
  font-weight: var(--dtk_theme__fontWeight--light);
  line-height: 1em;
  margin: 0 0 0.5em 0;
}

/* Font Style - DTK general - minimal lineheight*/
.dtk-text__lineheight--min {
  line-height: 1em;
}

/* Font Style - DTK general - medium lineheight*/
.dtk-text__lineheight--medium {
  line-height: 1.5em;
}

/* Font Style - DTK input field label -light color for dark background*/
.dtk_inputField__labelText--light {
  color: rgb(132, 140, 152);
}

/* Font Style - DTK input field label - now margin for centering next to field*/
.dtk_inputField__labelText--noMargin {
  margin: 0;
}

/* Font Style - DTK text general - reset margin to 0*/
.dtk-text--noMargin {
  margin: 0;
}

/*---Styling for range slider----*/

/*Setting color of slider knob*/
.dtk-inputField_RangeSlider_bar {
  border: 0px solid #68b022;
}

.dtk-inputField_RangeSlider_bar::-webkit-slider-thumb {
  background: rgb(106, 164, 79);
}

.custom-range::-moz-range-thumb {
  background: gray;
}

.custom-range::-ms-thumb {
  background: gray;
}

/*Container styling for layout of sub slider label units*/
.dtk-inputField_RangeSlider_unitLabel {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  line-height: 0em;
  padding-top: 0.2em;
}

/*-------DTK Dog offers styling -------------------*/

/*--Interactive elements--*/

/*DTK - Back button - state default*/
.dtk-btn--back {
  text-transform: uppercase;
  text-decoration: none;
  font-size: 0.75em;
  font-weight: 400;
  padding-left: 0em;
}

/*DTK - Back button - state hover*/
.dtk-btn--back:hover {
  font-weight: 600;
  text-decoration: underline;
  color: rgb(45, 78, 59);
}

/*DTK - Back button - state focus*/
.dtk-btn--back:focus {
  font-weight: 600;
  text-decoration: underline;
  color: rgb(45, 78, 59);
  border: 0.5px solid;
}

/*Container elements DTK Form*/
/* container - input form - wrapper Form sections*/
.dtk-form_container__wrapper--col {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  padding: 1em;
  gap: 1em;
  background-color: var(dtk-color-background-content);
  z-index: 10;
  border: var(--dev-container-border-size) solid rgb(146, 146, 146);
}

/* container - input form - Section*/
.dtk-form_container__section {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 1em;
  border: var(--dev-container-border-size) solid rgb(146, 146, 146);
}

/* container - input form - Section*/
.dtk-form_container__group {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 2em;
  border: var(--dev-container-border-size) solid rgb(146, 146, 146);
}

/* container - input form - field set column*/
.dtk-form_container__fieldSet--col {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1em;
  border: var(--dev-container-border-size) solid rgb(146, 146, 146);
}

/* container - input form - fieldset row*/
.dtk-form_container__fieldSet--row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  gap: 3em;
  border: var(--dev-container-border-size) solid rgb(146, 146, 146);
}

/* container - input form - field set = group of fields oriented vertically*/
.dtk-form_container__fieldSet--vertical {
  display: flex;
  flex-flow: column wrap;
  justify-content: flex-start;
  align-items: stretch;
  border: var(--dev-container-border-size) solid rgb(146, 146, 146);
}

/* container - input form - field set = group of fields oriented vertically*/
.dtk--noPaddingLeft {
  padding-left: 0em;
}

/*-------Font styles DTK Form-----------*/
/* Font Style - DTK Form Section header*/
.dtk-form_section__headline {
  font-size: 1.5em;
  gap: unset;
  font-family: var(--dtk_theme__standardFont--headlines);
  color: var(--dtk-color-text-dark);
}

/* Font Style - DTK Form field group Label*/
.dtk_text-label--formField {
  font-size: var(--dtk_theme__fontSize--small);
  font-weight: var(--dtk_theme__fontWeight--medium);
  font-family: var(--dtk_theme__standardFont--sans-serif);
}

/* Font Style - DTK Form field group Label*/
.dtk-form_fieldGroup_labelText {
  font-size: 0.875em;
  font-weight: var(--dtk_theme__fontWeight--medium);
  font-family: var(--dtk_theme__standardFont--sans-serif);
  color: var(--dtk-color-text-dark);
  margin: 0em;
}

/* Font Style - DTK Form field Label*/
.dtk-form_field_labelText {
  font-size: 0.875em;
  font-weight: 400;
  font-family: var(--dtk_theme__standardFont--sans-serif);
  color: var(--dtk-color-text-medium);
}

/* For deleting img after upload teckelentry*/
img-wraps {
  position: relative;
  display: inline-block;
  max-width: 150px;
}
.img-wraps .closes {
  cursor: pointer;
  height: 30px;
  opacity: 1;
  position: absolute;
  width: 30px;
  z-index: 999;
  color: #222;
  text-decoration: none;
  text-align: center;
  line-height: 28px;
  font-size: 22px;
  margin-left: 120px;
  border: none;
  background-color: transparent;
}
.img-wraps:hover .closes {
  opacity: 1;
}

.img-wraps img {
  max-width: 150px;
}

/* Font Style - DTK Form field Label additional padding*/
.dtk-form_field_labelText--padding {
  padding-bottom: 0.8em;
}

/* DTK - CSS Styles general container settings */

/* Container background style - defining background color for header container*/
.dtk-container_background--header {
  background-color: var(--dtk-color-background-header);
}

/* Container background style - defining background color for main content container*/
.dtk-container_background--content {
  background-color: var(--dtk-color-background-content);
}

/*----DTK Details page rules ------*/
/*----Container -----------------*/

/* container - detail page - image slider*/
.dtk-details_container--col {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1em;
  border: var(--dev-container-border-size) solid rgb(146, 146, 146);
}

/* container - Zwinger Adress infos*/
.dtk-container_details__address--col {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  border: var(--dev-container-border-size) solid rgb(141, 28, 8);
}

/* container - Info card Content sections*/
.dtk-container_details__info--col {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1em;
  margin-bottom: 0.8em;
  border: var(--dev-container-border-size) solid rgb(141, 28, 8);
}

/* container - Zwinger section Headline*/
.dtk-details_container--headline {
  padding: 1.5em 0 0 0;
  border: var(--dev-container-border-size) solid rgb(141, 28, 8);
}

/* container - detail page - slider image thumbnails*/
.dtk-details_container__thumb--row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  border: var(--dev-container-border-size) solid rgb(146, 146, 146);
}

/* Styles for images and image slider */
/* DTK image thumbnails - details page */
.dtk-img__thumb {
  border-radius: 2px;
  max-height: 100px;
  border: var(--dev-container-border-size) solid rgb(146, 146, 146);
}

/* Styles for text elements DTK Details Info Card  */
/* Font Style - DTK details - content label headline*/
.dtk-infoCard__itemLabels {
  font-size: 0.75em;
  font-weight: 600;
  margin-bottom: 0.5em;
  color: var(--dtk-color-text-dark);
}

/* Font Style - DTK details - content item text*/
.dtk_infoCard__itemText {
  font-size: var(--dtk_theme__fontSize--m);
  font-weight: var(--dtk_theme__fontWeight--light);
  line-height: 1.2em;
  margin: 0 0 0.3em 0;
  color: var(--dtk-color-text-medium);
}

/* Styles for DTK Link items in content */
/* Linklist - content - link items - link */
.dtk_content__link a {
  text-decoration: underline;
  font-family: var(--dtk_theme__standardFont--sans-serif);
  color: var(--dtk-color-primary-action);
  font-weight: var(--dtk_theme__fontWeight--medium);
}

/* Linklist - content - link items - link */
.dtk_content__link .bi {
  font-size: 1.2em;
}

/* Linklist - content - link items - state:hover */
.dtk_content__link a:hover {
  text-decoration-thickness: 0.2em;
}

/* Linklist - content - link items - state:focus */
.dtk_content__link a:focus {
  text-decoration-thickness: 0.2em;
}

/* Linklist - content - link items - state:focus */
.dtk_content__link a:active {
  font-weight: 800;
}

/* Linklist - content - link items - state:focus */
.dtk_content__link a:visited {
  font-weight: 400;
}

/*************************************************************/
/*|||*****DTK style rules for static content pages************/
/*************************************************************/

/****** Font styles headlines ************/

/* Font-style - Main headline - main: Biggest headeline at top of content page*/
.dtk_page__headline--main {
  font-size: 3.1875em;
  font-family: var(--dtk_theme__standardFont--headlines);
  color: var(--dtk-color-text-dark);
  font-weight: bold;
  line-height: 1.196;
  margin-bottom: 0.5em;
}

/* Font-style - subheadline: headline below main headline of page*/
.dtk_page__headline--sub {
  font-size: 1.125em;
  font-family: var(--dtk_theme__standardFont--sans-serif);
  line-height: 1.2;
  color: var(--dtk-color-text-headline-highlighted);
  font-style: italic;
  font-weight: 600;
}

/* Font-style - subheadline: headline below main headline of page*/
.dtk_page__paragraph {
  font-size: 1em;
  font-family: var(--dtk_theme__standardFont--sans-serif);
  line-height: 1.625;
  color: var(--dtk-color-text-dark);
  text-align: left;
}

/****** Container styles cutsom block elements ************/

/* Headline container - custom content page - spacing above*/
.dtk_page__container--headline {
  margin-top: 2.5em;
}

/* paragraph container - custom content page - spacing above*/
.dtk_page__container--paragraph {
  margin-top: 1.5em;
}

/* paragraph container - custom content page - spacing above*/
.dtk_page__container--img-banner {
  max-width: 100%;
  width: 100%;
}

.home {
  max-width: 100vw;
  overflow-x: hidden;
}

/****** Table styling for adjusting bootstrap standard table styles ************/
/* Setting general font settings for table displaying dog data */
.dtk_table > tbody {
  font-family: var(--dtk_theme__standardFont--sans-serif);
  font-size: var(--dtk_theme__fontSize--m);
}

/* Setting font weight for first column with label entries */
.dtk_table > tbody > tr > th {
  font-weight: var(--dtk_theme__fontWeight--medium);
  white-space: nowrap;
}

/* Setting column width for second column with data */
.dtk_table > tbody > tr > td {
  width: 100%;
}

/****** Carousel styling with dtk specific changes to bootstrap carousel ************/
/* Setting height and layout */
.dtk_carousel {
  height: 350px;
  padding: 5px;
  overflow: hidden;
}

/* Setting container height*/
#carouselExampleIndicators.carousel {
  height: 100%;
  border: var(--dev-container-border-size) solid rgb(141, 28, 8);
}

/* Setting carousel indicator position */
#carouselExampleIndicators .carousel-indicators {
  margin-bottom: -2px;
}

/* Setting carousel inner position and alignment of images */
#carousel-wrapper.carousel-inner {
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  margin: auto;

  border: var(--dev-container-border-size) solid rgb(141, 28, 8);
}

/* Extending img item class */
#carousel-wrapper .carousel-item {
  margin: auto;
  width: auto;
  height: 300px;
  border: var(--dev-container-border-size) solid rgb(207, 51, 155);
}

/* Extending img class of carousel */
#carousel-wrapper .carousel-item > img {
  object-fit: scale-down;
  object-position: center;
  height: 100%;
  width: auto;
  overflow: hidden;
  border: var(--dev-container-border-size) solid rgb(207, 51, 155);
}

/*-----Inzuchtkoeffizient Styles-----------*/
.ik-form-control {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 3em;
  border: var(--dev-container-border-size) solid rgb(146, 146, 146);
}
.ik-input {
  width: 40%;
}
.ik-ergebnisse-body {
  display: flex;
  flex-direction: column;
  justify-content: left;
  padding-top: 23px;
  gap: 30px;
  /* padding-left: 2%; */
}
#ik-wrapper > div {
  padding-left: 1rem;
}
.ik-parent-info-wrapper {
  display: flex;
  justify-content: space-between;
}
.ik-parent-info-wrapper > div:nth-last-of-type(2) {
  align-self: center;
}

.ik-wrapper {
  display: flex;
  justify-content: left;
  gap: 20px;
  padding-top: 30px;
}
.ik-parent-info {
  padding: 1rem;
  /* width: 43%; */
  max-width: 250px;
  /* min-height: 250px; */
}

.p-left {
  position: relative;
  left: 15px;
}
.p-left-2 {
  position: relative;
  left: 28px;
}
.p-right {
  position: relative;
  right: 14px;
}
.ik-parent-info > h5,
.ik-wrapper h5 {
  font-weight: 700;
  font-size: 1rem;
}
.ik-parent-info > p {
  margin: 0;
}
.ik-parent-info > .ik-parant-name {
  font-weight: 400;
  font-size: 1rem;
}

.table-ik {
  /* width: 50%; */
  max-width: 700px;
  padding-left: 2%;
}
.gemeinsame-ahnen-header,
.ahnen-info {
  display: flex;
  justify-content: space-around;
}
.table-ik .gemeinsame-ahnen-header,
#ik-table-body > p {
  background-color: #e6e6e6;
  font-weight: 700;

  padding-bottom: 15px;
}
#ik-table-body > p {
  margin-bottom: 0;
  padding-left: 1.5rem;
}
/* #ik-table-body > div:nth-child(odd) {
  background-color: #f1f1f1;
} */
.ik-ahnen-name {
  margin: 0;
  font-weight: 400;
}
.bg-light_green {
  background-color: #edf5e9;
}
.bg-light_grey {
  background-color: #e6e6e6;
}
.bg-light_gray {
  background-color: #f1f1f1;
}

.ahnenfolge-div {
  display: flex;
  line-height: 0.93rem;
  text-align: center;
  justify-content: space-around;
}

.ahnenfolge-div p {
  margin: 0;
}
.hierarchyMother p {
  margin-bottom: 0;
}
.hierarchyFather p {
  margin-bottom: 0;
}

.hierarchyMother {
  line-height: 14px;
}

.hierarchyFather {
  line-height: 14px;
}
.ahnenfolge-btn-div {
  padding-right: 25px;
}
#legende {
  background-color: red;
}

.magazin-card-item:hover {
  transform: scale(1.01);
  box-shadow: 0px 10px 20px 2px rgba(79, 78, 78, 0.25);
}
@media screen and (max-width: 1500px) {
  /* .hierarchyFather {
    left: 17%;
  }
  .hierarchyMother {
    right: 6.5%;
  } */
}

@media screen and (max-width: 1400px) {
  /* .hierarchyFather {
    position: relative;
    left: 18.5%;
  }
  .hierarchyMother {
    position: relative;
    right: 6%;
  } */
  .ahnenfolge-btn-div {
    padding-left: 60px;
  }
}
@media screen and (max-width: 1100px) {
  .ik-form-control {
    flex-direction: column;
  }
  .ik-input {
    width: 100%;
  }
  .ik-box {
    width: 100%;
    padding-left: 4%;
    padding-right: 4%;
  }
  .ik-ergebnisse-body {
    flex-direction: column;
    justify-content: center;
  }
  .ik-parent-info-wrapper {
    justify-content: space-between;
  }
  .table-ik {
    width: 100%;
    padding-left: 4%;
    padding-right: 4%;
  }

  /* .hierarchyFather {
    position: relative;
    left: 16.5%;
  }
  .hierarchyMother {
    position: relative;
    right: 7.5%;
  } */

  .ahnenfolge-btn-div {
    padding-left: 20px;
  }
}

@media screen and (max-width: 575px) {
  .spacer {
    display: none;
  }
  /* .hierarchyFather {
    left: 18.5%;
  }
  .hierarchyMother {
    right: 5%;
  } */
}

/*-----Startpage Slider settings------*/
/* smartphones */
/*@media screen and (max-width: 600px) {*/
.dtk_slideshow_size {
  height: 50vh;
}
/*}*/

.accordion-button.collapsed {
  color: #fff !important;
  background-color: var(--dtk-color-darkgreen-magazine);
  box-shadow: inset 0 -1px 0 rgb(0 0 0 / 13%);
}
.accordion-button:not(.collapsed) {
  color: #fff !important;
  background-color: var(--dtk-color-lightgreen-magazine);
  box-shadow: inset 0 -1px 0 rgb(0 0 0 / 13%);
}

.accordion-button.collapsed:hover {
  background-color: var(--dtk-color-lightgreen-magazine);
}

/* .accordion-button:focus {
  background-color: var(--dtk-color-lightgreen-magazine);
  color: #fff !important;
} */

.accordion-button.test-green:not(.collapsed) {
  background-color: var(--dtk-color-lightgreen-magazine) !important;
}

.accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}