@charset "UTF-8";

/* gochi-hand-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Gochi Hand';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/gochi-hand-v23-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


html {
  padding: 0;
  margin: 0;
}

html, body, nav, main, p, li {
    font-family: "Helvetica neue", Helvetica, Arial, sans-serif;
}

body {
  padding: 0;
  text-align: center; /* Hierdurch wird der Container in IE 5*-Browsern zentriert. Dem Text wird dann im #container-Selektor die Standardausrichtung left (links) zugewiesen. */
  color: #000;
  font-size: 100%;
  background-color: #6A5D3D;
  background-image: url(bilder/back-grau.jpg);
  background-repeat: repeat-x;
  margin: 0;
  background-attachment: fixed;
  overflow-y: scroll;
}
body {
  overflow-y: auto\9
}
#container {
  position: relative;
  width: 920px; /* Durch automatische Ränder (in Verbindung mit einer Breite) wird die Seite zentriert. */
  min-height: 500px;
  height: 100%;
  border: none;
  text-align: left; /* Hierdurch wird die Einstellung text-align: center im Body-Element überschrieben. */
  background-image: url(bilder/hintergrund-leer.jpg);
  background-repeat: repeat-x;
  background-position: center 124px;
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  background-color: #c3bcac;
    box-shadow: 1px 1px 25px hsla(0, 0%, 0%, 0.5);

  background-attachment: fixed;
}
#header {
  padding: 0; /* Diese Auffüllung entspricht der linksbündigen Ausrichtung der Elemente in den divs, die darunter erscheinen. Wenn im #header anstelle von Text ein Bild eingesetzt wird, sollten Sie die Auffüllung entfernen. */
  text-align: center;
  margin: 0px;
  background-color: hsla(0, 0%, 0%, 1);
  position: fixed;
  box-shadow: 0px 1px 10px hsla(0, 0%, 0%, 0.5);
  z-index: 3;
}

#header h1 {font-size:0;}


iframe {
  box-shadow: 1px 1px 3px hsla(0, 0%, 0%, 0.5);

  z-index: -9999;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
#overlay {
  z-index: 2000;
}
#header img {
  border-top-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 0px;
  border-left-width: 0px;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none;
  margin: 0px;
  padding: 0px;
}
#header a {
  text-decoration: none;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none;
}
#navi {
  font-size: 13px;
  font-weight: normal;
  padding-top: 0px;
  padding-bottom: 0px;
  margin: 0px;
  width: 820px;
  font-style: normal;
  height: 23px;
  padding-right: 100px;
  padding-left: 0px;
  background-color: hsla(0, 0%, 0%, 1);
  background-image: url(bilder/menueback.jpg);
  background-size: cover;
}
#navi ul {
  padding: 0px;
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
}
#header h1 {
  margin: 0; /* Wenn Sie den Rand des letzten Elements im #header-div auf 0 einstellen, können Sie das Auftreten unerwarteter Abstände zwischen divs vermeiden. Wenn das div einen Rahmen hat, ist dies unnötig, weil dieser Rahmen die gleiche Wirkung hat. */
  padding: 0px; /* Durch die Verwendung der Auffüllung anstelle von Rändern lässt sich gewährleisten, dass das Element die Kanten des div nicht berührt. */
}
.startbild {
  position: absolute;
  top: 180px;
  left: 30px;
  box-shadow: 1px 1px 4px hsl(0, 0%, 60%);
  border-radius: 20px;
  max-width: 230px;
  height: auto;
}
#mainContent {
  position: relative;
  padding-top: 146px;
  padding-right: 60px;
  padding-bottom: 40px;
  padding-left: 300px;
  font-size: 16px;
  line-height: 120%;
  text-align: left;
  margin-right: auto;
  margin-left: auto;
}
#mainContent p {
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: left;
  font-size: 16px;
  line-height: 150%
}
#mainContent li {
  line-height: 150%
}
#mainContent h2 {
  font-size: 32px;
  color: #ce0000;
  margin-top: 30px;
  text-align: left;
  margin-bottom: 30px;
  letter-spacing: 1px;
  word-spacing: 1px;
  font-style: italic;
  font-weight: normal;
  line-height: 36px;
  font-family: "Gochi Hand", serif;
     letter-spacing: 0.03em;
}
#mainContent h3 {
  font-size: 22px;
  padding: 0px;
  margin-top: 36px;
  margin-right: 0px;
  margin-bottom: 12px;
  margin-left: 0px;
  text-align: left;
  line-height: 130%;
  font-weight: bold;
    font-family: "Gochi Hand", serif;
     letter-spacing: 0.03em;
}
#mainContent h4 {
  font-size: 16px;
  padding: 0px;
  margin-top: 32px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  text-align: left;
  line-height: 150%;
  font-weight: bold;
}
.start td {
  font-weight: bold;
  font-style: italic;
  font-size: 13px;
}
table tr td h2, h3 {
  margin-top: 0px;
  padding-top: 0px;
}
#footer {
  background-repeat: repeat-x;
  background-position: center bottom;
  clear: both;
  padding-top: 0;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  margin-top: 10px;
  width: 920px;
  margin-right: auto;
  margin-left: auto;
  text-align: right;
  display: inherit;
}
#footer p {
  margin: 0; /* Wenn Sie die Ränder des ersten Elements in der Fußzeile auf 0 einstellen, können Sie unerwartete Abstände zwischen divs vermeiden. */
  padding: 10px 0; /* Durch die Verwendung der Auffüllung bei diesem Element entsteht genau wie bei einem Rand ein Leerraum, aber ohne die potenziellen Abstandsprobleme. */
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: center;
  color: #FFF;
  line-height: 16px;
}
#mainContent a {
  color: #ce0000;
  border-bottom: dotted 1px grey;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  text-decoration: none;
}

#mainContent a:hover {
  color: red;
  text-decoration: none;
  border-bottom: solid 1px red;
}
#footer a {
  color: #EADEA0;
  font-size: 12px;
  text-decoration: none;
}
#footer a:visited {
  color: #EADEA0;
  font-size: 14px;
  text-decoration: none;
}
#footer a:hover {
  color: #FFF;
  text-decoration: underline;
}
#start #container a {
  color: #C00;
  text-decoration: none;
}
#start #container a:visited {
  color: #C00;
}
#start #container a:hover {
  color: #C00;
  text-decoration: underline;
}


td {
  text-align: left;
  margin-left: 0px;
  padding-right: 30px;
}
Table, tr {
  text-align: left;
  margin-left: 0px;
  padding-left: 0px;
  border-top-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 0px;
  border-left-width: 0px;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none;
}
.impressum {
  font-size: 12px;
  line-height: 120%;
  margin-top: 40px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
}
.galerie {
  display: grid;
  column-gap: 30px;
  row-gap: 30px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  margin-top: 40px;
}
.galerie img {
  width: 100%;
  margin: 0 !important;
}
.bild {
  margin-bottom: 20px;
  margin-right: 13px;
  /* border: 1px solid #979797; */
  box-shadow: 1px 1px 4px hsla(0, 0%, 0%, 0.4);
  max-width: 560px;
  height: auto;
}

figure img {box-shadow: 1px 1px 4px hsla(0, 0%, 0%, 0.4);}

.bildrechts {
  float: right;
  margin-bottom: 10px;
  margin-left: 13px;
  /* border: 1px solid #979797; */
  box-shadow: 1px 1px 4px hsla(0, 0%, 0%, 0.4);
  max-width: 250px;
  height: auto;
}
.bildlinks {
  float: left;
  margin-bottom: 10px;
  margin-right: 13px;
  /* border: 1px solid #979797; */
  box-shadow: 1px 1px 4px hsla(0, 0%, 0%, 0.4);
}
#start #container {
  background-image: url(bilder/splash.jpg);
  width: 1040px;
  margin-right: auto;
  margin-left: auto;
  height: 703px;
  padding: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  background-repeat: no-repeat;
  background-position: center top;
  background-attachment: scroll;
}
#container #mainContent .claim {
  padding: 30px 30px;
  border: 1px solid hsl(0, 0%, 50%);
  box-shadow: inset 1px 1px 2px hsla(0, 0%, 0%, 0.15);
  border-radius: 15px;
  margin: 20px 0px;
  line-height: 140%;
  background: hsla(40, 30%, 85%, 0.4);
}

#container #mainContent .claim em {font-weight: bold;}

#container #mainContent .claim p {
  text-align: center;
  font-size: 16px;
    margin:0;
}
#container #mainContent .claim h3 {
  font-family: "Gochi Hand", serif;
  font-style: normal;
  text-align: center;
  margin-top: 20px !important;
    margin-bottom:0;
    font-size: 20px;
    letter-spacing: 0.08em;;
}
#container #mainContent .claim h3::before {
  content: url("bilder/hundepfote.png");
  margin-right: 8px;
  transform: translateY(3px);
    display:inline-block;
}
#container #mainContent h3 small {
  font-size: 16px;
  line-height: 18px;
}
li {
  margin-top: 0.3em;
  margin-bottom: 0.3em;
}
#container #mainContent #vlightbox3 {
  width: 100%;
  text-align: center;
}
#huete-show #container {
  background-image: url(bilder/hintergrund8.jpg);
  background-repeat: repeat-x;
}
#kontakt #container, #referenzen #container {
  background-image: url(bilder/hintergrund4.jpg);
  background-repeat: repeat-x;
}
#beschaeftigungsprogramme #container {
  background-image: url(bilder/hintergrund7.jpg);
  background-repeat: repeat-x;
}
#basisausbildung #container {
  background-image: url(bilder/hintergrund5.jpg);
  background-repeat: repeat-x;
}
#ueber-uns #container {
  background-image: url(bilder/hintergrund3.jpg);
  background-repeat: repeat-x;
}
#hunde #container {
  background-image: url(bilder/hintergrund13.jpg);
  background-repeat: repeat-x;
}
#schafe-ziegen #container {
  background-image: url(bilder/hintergrund11.jpg);
  background-repeat: repeat-x;
}
#interaktiv #container #mainContent p a img {
  border: 1px solid #920000;
}
#interaktiv #container #mainContent p a img:hover {
  border: 1px solid red;
}
h3 {}
#mainContent ul li ul li, #mainContent ol li ul li {
  margin-top: 0em;
  margin-right: 0em;
}
small {
  font-size: 12px;
  font-style: italic;
}
#mainContent .daten {
  font-size: 13px;
  font-style: italic;
  line-height: 15px;
}
#mainContent ul {
  margin-top: 0px;
  padding-top: 0px;
}
#pedigree #container {
  background-image: none;
  background-color: transparent;
  width: 700px;
  padding: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  box-shadow: none;
  min-height: inherit !important;
}
#pedigree #container table caption {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 16px;
  color: #C30000;
  margin: 0px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: black;
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 5px;
  padding-left: 20px;
}
#pedigree #container table tr td {
  padding: 0.5em;
  text-align: center;
  vertical-align: top;
  font-size: 12px;
}
#pedigree {
  background-image: url(bilder/hintergrund-leer.jpg);
  height: auto;
  overflow-y: auto;
  overflow: auto;
}
#pedigree * {
  height: auto;
}
#ueber-uns #container #mainContent h3 {
  font-size: 20px;
  margin-top: 60px;
}
#presse #container img {
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none;
  border-top-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 0px;
  border-left-width: 0px;
}
#news #container #mainContent h3 {
  clear: both;
}
#ueber-uns #container #mainContent ul li {
  margin-top: 1em;
  margin-bottom: 1em;
}
#huete-show #container #mainContent h2 {
  margin-top: 170px;
}