@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Emilys Candy';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/emilys-candy-v21-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@font-face {
  font-display: swap; 
  font-family: 'Henny Penny';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/henny-penny-v18-latin-regular.woff2') format('woff2'); 
}


/* 1. Globaler Block für alle H1-Überschriften auf der Webseite */
h1, 
.com-content-category-blog h1,
.page-header h1 {
  font-family: 'Emilys Candy', cursive !important;
  font-size: 1.8em !important; /* Große H1 für das Hauptthema */
  line-height: 1.4 !important;
  letter-spacing: 0.05em !important;
  font-weight: normal !important;
}
._alle h1, .com-content-category-blog h1, .page-header h1 {
    font-family: 'Emilys Candy', cursive !important;
    font-size: 1.6em !important;
    line-height: 1.4 !important;
    letter-spacing: 0.05em !important;
    font-weight: normal !important;
    padding-top: 15px;
}
/* 2. Spezifischer Block NUR für die H2-Beitragstitel im Kategorieblog */
.com-content-category-blog__items h2,
.com-content-category-blog__item-title,
.com-content-category-blog__item-title a {
  font-family: 'Emilys Candy', cursive !important;
  font-size: 1.8em !important; /* Kleinere H2 für die einzelnen Blog-Beiträge */
  line-height: 1.4 !important;
  letter-spacing: 0.05em !important;
  font-weight: normal !important;
}


body {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;

    font-size: 1.1em;}
body.wrapper-fluid .site-grid {
    grid-gap: 0 0em;
    grid-template-columns: [ full-start ] minmax(0, 1fr) [ main-start ] minmax(0, 14%) minmax(0, 36%) minmax(0, 25%) minmax(0, 25%) [ main-end ] minmax(0, 1fr) [ full-end ];
}
html {    background-color: transparent;
}
body.site {
    background-color: #7d6ca6 !important;
    background: url(/images/bg2.png);
    /*padding: 20px;*/
    width: 100%;
    /*max-width: 1600px;*/
    margin: 0 auto;
    padding-top: 0px;
    border-top: 2px solid #7d6ca6;
}
@media (min-width: 992px){
  .grid-child.container-sidebar-right {
    background: #e6dbe9;
    border-left: 37px solid #fff;
}
}
@media (max-width: 991px) {

.site-grid {

grid-template-areas:
        ".banner banner banner banner."
        ".top-a top-a top-a top-a."
        ".top-b top-b top-b top-b."
   ".side-l side-l side-l side-l."
        ".comp comp comp comp."
        ".side-r side-r side-r side-r."       
        ".bot-a bot-a bot-a bot-a."
        ".bot-b bot-b bot-b bot-b.";
  }
._start h1 {
    padding-bottom: 0;
    text-align: center;
}
  .grid-child.container-sidebar-left {
    background: transparent;
}
  main {
    padding-top: 0;
}
  .grid-child.container-sidebar-right {
    border-left: 0px solid #fff;
}
  body.site {

    background: none;
  }
  .sidebar-left.card {
    display: none;
}
}
.nav-header {
    display: block;
    padding: 5px 15px;
    font-size: 12px;
    font-weight: bold;
    line-height: 18px;
    color: #fff;
    text-shadow: 0 1px 0 rgb(255 255 255 / 50%);
    text-transform: uppercase;
}
.nav-pills li a {
    display: block;
    padding: 3px 15px;
    font-size: 12px;
    font-weight: bold;
    line-height: 18px;
    color: #fff;
    text-shadow: 0 1px 0 rgb(255 255 255 / 50%);
    text-transform: uppercase;
}



h2 {
  color: #3a3578;
}
h4 {
   font-size: 1.1rem;
    line-height: 16px;
    padding: 10px 0 10px 0;
}
b, strong {
    font-weight: bold;
}
.custom_toplogo {
padding-bottom: 25px;
}
/*.nav.menu.nav-pills {
background: rgba(80,29,123,0.6);
}*/
.container-fluid {
padding-right: 20px;
padding-left: 20px;
width: 100%;
max-width: 1250px;
margin: 0 auto;
}
.custom_empty {
  /*height: 340px;*/
  background-image: url('/images/banners/tierhilfe.webp');
 /* margin-bottom: 25px;
  border-bottom: 23px solid rgba(80,29,123,0.6);*/
}

.nav-pills > .active > a, .nav-pills > .active > a:hover, .btn-primary {
background: #fff !important;
color: #501d7b !important;
margin-left: 3px !important;
}
.navigation .nav-child li > a:hover, .navigation .nav-child li > a:focus, .navigation .nav-child:hover > a {
text-decoration: none;
color: #fff;
/* background-color: #005e8d; */
background-color: #501d7b !important;
  background-image: none;
/* background-image: -moz-linear-gradient(top,#005e8d,#004d74); */
/* background-image: -webkit-gradient(linear,0 0,0 100%,from(#005e8d),to(#004d74)); */
/* background-image: -webkit-linear-gradient(top,#005e8d,#004d74); */
/* background-image: -o-linear-gradient(top,#005e8d,#004d74); */
/* background-image: linear-gradient(to bottom,#005e8d,#004d74); */
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff005e8d', endColorstr='#ff004c73', GradientType=0);
}
#aside {
background: #e4d8e7;
opacity: 0.9;

}
.row-fluid {

display: flex;
}
.custom_rechts {
/*background: #fff;*/
padding: 10px;
}
.well {
  background-color: transparent;
  border: 0px solid #d0cdcd;
 
}
hr {

border: 1px solid purple;

}

.item {
background: #fff;
padding: 20px;
}

.footer {
background: #572480;
}
footer .container-fluid {
color: #fff!important;
}
footer hr {display: none;}

h2 {
    font-size: 18px;
    line-height: 24px;
}
.item-page {
padding-left: 0px 20px;
}
.nav > li > a:hover, .nav > li > a:focus {
text-decoration: none;
background-color: #fff;
color: #572480;
}
/*.span7 {
padding-right: 20px;
}*/
.wf-columns.wf-columns-stack-medium.wf-columns-gap-small {
/* width: 90%; */
padding-left: 20px;
}
/*anpassungen*/
.container-fluid {
    padding-right: 0;
    padding-left: 0;
    width: 96%;
    max-width: 1600px;
    margin: 0 auto;
}
.tam {
  text-align: right;
padding-left: 20px;
  max-width: 108px; 
}
.dia {

text-align: left;

}
.toplogo {
  width: 100%;
}
#content {
    padding-top: 30px;
}
@media (min-width: 535px){
._start .custom_empty {
    height: 389px;
    background-image: url('/images/banners/tierhilfe.webp') !important;
    margin-bottom: 0px;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 200px;
  background-position-x: center;
}

._spenden .custom_empty {
    height: 389px;
    background-image: url('/images/banners/spenden-header.webp') !important;
    margin-bottom: 0px;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 200px;
  background-position-x: center;
}
._alle .custom_empty {
    height: 389px;
    background-image: url('/images/banners/vermittlung-header.webp') !important;
    margin-bottom: 0px;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 200px;
  background-position-x: center;
}
  ._haftung .custom_empty {
    height: 389px;
    background-image: url('/images/banners/vermittlung-header.webp') !important;
    margin-bottom: 0px;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 200px;
  background-position-x: center;
}
._de .custom_empty {
    height: 389px;
    background-image: url('/images/banners/vermittlung-header.webp') !important;
    margin-bottom: 0px;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 200px;
  background-position-x: center;
}
._ausland .custom_empty {
    height: 389px;
    background-image: url('/images/banners/auslandshunde-banner.webp') !important;
    margin-bottom: 0px;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 200px;
  background-position-x: left;
 
}
}
@media (max-width: 767px){
    .row-fluid {

display: block;
}
}
@media (max-width: 1010px){
 

  [data-id="maximenuck105"] .mobilemenuck-bar-title {
    background: #0d113e !important;
    text-align: left !important;
}
  [data-id="maximenuck105"] .mobilemenuck-bar-button {
    background: #e6dbe9 !important;
    color: #5C2483 !important;
}
  [data-id="maximenuck105"] .mobilemenuck-title {
    background: #0d113e !Important;
}
  [data-id="maximenuck105"] .mobilemenuck-item > .level1 {
    background: #E6DBE9 !important;
}
  [data-id="maximenuck105"] .mobilemenuck-item > .level1 a {
    color: #572480 !important;   
}
  [data-id="maximenuck105"].mobilemenuck {
    background: #572480 !important;
}
  [data-id="maximenuck105"].mobilemenuck a {
    font-weight: normal !important;
}
  [data-id="maximenuck105"] .mobilemenuck-togglericon::after {
    background: #0d113e !important;
  }

}
@media (max-width: 534px){
._start .custom_empty {
    height: auto;
    background-image: url('/images/banners/tierhilfe.webp') !important;
    /*margin-bottom: 25px;*/
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 200px;
  background-position-x: center;
}

.toplogo img {
    width: 55%;
}
}
@media (max-width: 399px){
  td.tam {width: 35%;}
  td.dia {width: 50%;}
}
div#maximenuck105 ul.maximenuck {
  /*dunkelblau background: #0d113e !important;
  background: #2a309b;
background: linear-gradient(90deg,rgba(42, 48, 155, 1) 0%, rgba(87, 195, 199, 1) 50%, rgba(237, 221, 83, 1) 100%) !important;*/
 background: #8286d1 !important;
}
.navbar {
    
    margin-bottom: 0px !important;
   
}
.blog .wf-column {
  padding: 24px;
}
.akt .wf-column
{
  padding: 0;
}
.blog hr {border: none;}

.flix img {
  width: 95%;
  padding-top: 13px;
}
.well {
  -webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
div#maximenuck105 ul.maximenuck li.level1.parent > a::after, div#maximenuck105 ul.maximenuck li.level1.parent > span.separator::after {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 6px 0 6px;
  border-color: #efebf1 transparent transparent transparent !important
  top: 20px;
  right: 4px;
}
div#maximenuck105 ul.maximenuck li.maximenuck ul.maximenuck2 li > a, div#maximenuck105 ul.maximenuck2 li > a, div#maximenuck105 ul.maximenuck2 li > span.separator {
  color: #9472aa !important;
}
p {
  margin: 15px 0 15px;
  line-height: 1.4em;

}
li {

    font-size: 1.2em;
    line-height: 1.7em;

    /*text-indent: 7px;*/

}
/*main li {
    font-size: 1em;
    line-height: 1.7em;
    list-style-type: disc;
    
}*/
@media (max-width: 899px) {
.flexboxes {
display: flex;

  flex-direction: column-reverse;
}
.flexboxes .flax {
flex-basis: 60%;
}
.flexboxes .flix {
flex-basis: 40%;
}
  #sidebar .flax {display: block;}
  #sidebar {
  padding-left: 0px;
}
  .hideit {
  display: block;
}
  }
@media (min-width: 951px) {
.flexboxes {
display: flex;
}
.flexboxes .flax {
flex-basis: 60%;
}
.flexboxes .flix {
flex-basis: 40%;
}
  .hideit {
  display: none;
}

   #sidebar .flax {display: none;}
  }

.maximenuck2 {
  font-size: 0.96em !important;
}
#sidebar {
  padding-top: 23px;
  background: #e6dbe9;
  padding-left: 10px;
padding-right: 10px;
}
.pull-left.item-image {

    width: 100%;
    max-width: 200px;

}
@media (max-width: 1000px) {
  #sidebar {

    padding-top: 0px;
    display: none;

  }
  .row-fluid .span3 {

    width: 39.4%;
  }}




@media (max-width: 1000px){
.blog_start .leading-1 {
    display: blog;
  }
  .row-fluid .span3 {
    width: 44%;
  }
.flex-container {

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: normal;
    align-items: normal;
    align-content: normal;

  }
  .flex-items {
    
  }
  .wf-columns.wf-columns-stack-medium.wf-columns-gap-small {

    width: 100%;
    padding-left: 0px;

  }
}
.page-header {

    margin: 2px 0px 10px 0px;
    padding-bottom: 5px;
    clear: both;
    padding-top: 20px;
    

}
@media (max-width: 767px){

.row-fluid .span3 {

    width: 100%;

}

}

.custom_rechts h2 {

    padding-top: 4px;

}
h3 {

    color: #0d113e;

}
.custom_rechts img {

    width: 100%;
    max-width: 340px;

}
.maximenuck a:active {
color: #fff !important;
  background: #93d6f7 !important;
}
div#maximenuck105 ul.maximenuck li.maximenuck.level1.active {
    /*background: #93d6f7 !important;*/
}
#maximenuck105-mobile {

    background: #fff !important;

}
nav.navigation {
    text-align: center;
}
.akt .wf-columns .wf-column {
    max-width: 100%;
    box-sizing: border-box;
    flex: auto;
    text-align: center;
}
a#back-top {
    color: #fff;
}
main#content {
    background: rgba(255,255,255,0.2);
}
.row-fluid {
    background: transparent;
}
.toplogo tr {
  vertical-align: bottom;
 
}
.not {
 display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  padding-bottom: 12px;

  line-height: 1.3em;
 
}

.hinweis:nth-child(3) {
  

  padding: 13px;
 flex:1;
}
.hinweis:nth-child(2) {

  padding: 13px;
 flex:1;
}
.hinweis:nth-child(1) {
  
    padding-right: 38px;
    flex-shrink: 0;
    flex-basis: 270px;
}
.hinweis a {
  
  text-decoration: underline;
}


.category-desc.clearfix {
  padding-bottom: 40px;
}
._start .page-header h2 {
  text-transform: uppercase;
  font-weight: normal;
  font-size: 1.6em;
}

.pull-left.item-image {
    margin: 0 38px 18px 0;
}
.blog_start {
    background: #fff;
}
.mehr a {
    font-size: 1.2em;
    background: #e7dce9;
    display: inline-block;
    padding: 10px;
    color: #4d4985;
  margin-bottom: 30px;
}
.custom_rechts img {
    text-align: center;
}
.cafe img {
    width: 100%;
    max-width: 340px;
    clear: both;
    padding: 0 5px 20px 0;
  margin-right: 20px; margin-bottom: 5px; float: left;
}
@media (max-width: 1000px) {
  .not {
 display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  padding-bottom: 12px;

  line-height: 1.3em;}
 
    .hinweis {padding-top: 0;
  }
 .hinweis:nth-child(1) {
    padding-right: 20px;
    flex-shrink: 0;
    flex-basis: 0px;
}
.cafe img {
    width: 100%;
    max-width: 100%;
    clear: both;
    padding: 0 5px 20px 0;
    margin-right: 20px;
    margin-bottom: 5px;
    float: none;
}
}

@media (max-width: 500px) {
  .pull-left.item-image {
    margin: 0 auto;
    width: 100%;
    height: 100%;
    max-height: 300px;
    float: none;
    padding-bottom: 20px;
}
}
/*cass*/
.header.container-header.full-width
{
  background: #fff;
}
.site.com_content.wrapper-static.view-category.layout-blog.no-task.itemid-101._start.has-sidebar-right
{
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}
@media (min-width: 325px) {
   ._start #mod-custom94 {
        height: 389px;
        min-height: 200px;
        margin-bottom: 0px;
        /* Alle Hintergrundeigenschaften kompakt zusammengefasst: */
        background: #292f6f url(/images/banners/tierhilfe.webp) no-repeat center center / contain !important;
    }
     ._alle #mod-custom94 {
        height: 389px;
        min-height: 200px;
        margin-bottom: 0px;
        /* Alle Hintergrundeigenschaften kompakt zusammengefasst: */
        background: #5c4a90 url(/images/banners/vermittlung-header.webp) no-repeat center center / cover !important;
    }
       ._de #mod-custom94 {
        height: 389px;
        min-height: 200px;
        margin-bottom: 0px;
        /* Alle Hintergrundeigenschaften kompakt zusammengefasst: */
        background: #5c4a90 url(/images/banners/vermittlung-header.webp) no-repeat center center / cover !important;
    }
         ._ausland #mod-custom102 {
        height: 389px;
        min-height: 200px;
        margin-bottom: 0px;
        /* Alle Hintergrundeigenschaften kompakt zusammengefasst: */
        background: #5c4a90 url(/images/banners/auslandshunde-banner.webp) no-repeat center center / cover !important;
    }
           ._spenden #mod-custom94 {
        height: 389px;
        min-height: 200px;
        margin-bottom: 0px;
        /* Alle Hintergrundeigenschaften kompakt zusammengefasst: */
        background: #5c4a90 url(/images/banners/spenden-header.webp) no-repeat center center / cover !important;
    }
             ._verein #mod-custom94 {
        height: 389px;
        min-height: 200px;
        margin-bottom: 0px;
        /* Alle Hintergrundeigenschaften kompakt zusammengefasst: */
        background: #5c4a90 url(/images/banners/verein-header.webp) no-repeat center center / cover !important;
    }
               ._pflege #mod-custom94 {
        height: 389px;
        min-height: 200px;
        margin-bottom: 0px;
        /* Alle Hintergrundeigenschaften kompakt zusammengefasst: */
        background: #5c4a90 url(/images/banners/pflegestellen-header.webp) no-repeat center center / cover !important;
    }
                 ._wissen #mod-custom94 {
        height: 389px;
        min-height: 200px;
        margin-bottom: 0px;
        /* Alle Hintergrundeigenschaften kompakt zusammengefasst: */
        background: #5c4a90 url(/images/banners/wissenwertes-header.webp) no-repeat center center / cover !important;
    }
                   ._nachdenken #mod-custom94 {
        height: 389px;
        min-height: 200px;
        margin-bottom: 0px;
        /* Alle Hintergrundeigenschaften kompakt zusammengefasst: */
        background: #5c4a90 url(/images/banners/nachdenklich-header.webp) no-repeat center center / cover !important;
    }
                     ._kontakt #mod-custom94 {
        height: 389px;
        min-height: 200px;
        margin-bottom: 0px;
        /* Alle Hintergrundeigenschaften kompakt zusammengefasst: */
        background: #5c4a90 url(/images/banners/kontakt-header.webp) no-repeat center center / cover !important;
    }
   ._haftung #mod-custom94 {
        height: 389px;
        min-height: 200px;
        margin-bottom: 0px;
        /* Alle Hintergrundeigenschaften kompakt zusammengefasst: */
        background: #5c4a90 url(/images/banners/kontakt-header.webp) no-repeat center center / cover !important;
    }
}

.grid-child.container-top-a {
	clear: both;
	position: relative;
	z-index: 999;
	overflow: visible !important;
	display: block !important;
	float: none !important;
	visibility: visible !important;
	opacity: 1 !important;
	list-style: none;
	/* padding: 0; */
	margin: 0 auto;
	zoom: 1;
	filter: none;
	background: #3598db;
}
#maximenuck105
{
  text-align: center !important;
}
#maximenuck105-mobile
{
  text-align: center !important;
  font-size: 1.1em !important;
}
.container-topbar, main
{
  background: #fff;
}
main {padding: 30px;
    padding-left: 55px;}
.sidebar-right.card._rechts .card-body {

  background: #e6dbe9;
}
.main-top.card._both {
border: none;
}
a
{
  color: #800080;
}
.blog-item .item-image
{
  width: 100%;
  max-width: 200px;
}
.blog-item
{
  flex-direction: row;
  padding: 1.5em 1em 1em !important;
  display: flex;
  overflow: hidden;
  border-top: 1px solid #999;
}
.footer
{
  background: transparent;
}
.site.com_content.wrapper-fluid.view-category.layout-blog.no-task.itemid-101._start.has-sidebar-right
{
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}
#mod-custom93
{
  padding-bottom: 5px;
}
.bottom-b.card._people
{
  margin: 0;
}
._people .card-body
{
  background: transparent !important; padding: 0;
}

.card._people
{
  border: none;
}
footer .grid-child
{
  background: #5c4a90;;
}
.footer {margin-top: 0;}
.grid-child.container-sidebar-left
{
  background: #e6dbe9;
}
.container-banner.full-width
{
  margin: 0px;
}

.maximenuck.item101.current.active.first.mobilemenuck-hide.level2 {
text-decoration: underline !important;
}
h3 {
font-size: 18px;
line-height: 20px;
}
@media (max-width: 580px) {
  main img {
    width: 100%;
    height: auto;
}
}

@media (max-width: 700px) {
 main {
    padding: 0px; 
    padding-left: 0px; 

}
}
@media (max-width: 960px) {
.blog .wf-column {
    padding: 0;
}
}
.flix img {
    float: left;
    /* padding-top: 13px; */
    width: 100%;
    max-width: 400px;
    margin-right: 20px;
}
.clearf {
    clear: left;
}
.flax h3:first-child {
    padding-top: 10px;
  
}
.card-body a {
    text-decoration: none;
}
.container-component>:first-child, .container-sidebar-left>:first-child, .container-sidebar-right>:first-child, .container-component>*+*, .container-sidebar-left>*+*, .container-sidebar-right>*+* {
    margin-top: 2.4em;
}
@media (max-width: 1160px) {
  .flix img {
    float: none;
    /* padding-top: 13px; */
    width: 100%;
    max-width: 100%;
    margin-right: 20px;
}
}
.left.item-image {
    float: left;
    padding-right: 20px;
}
@media (max-width: 580px){
 .akt .wf-columns .wf-column:nth-child(2) {
    width: 100%;
    max-width: 250px;
    margin: 0 auto;
}
 }
.com-content-category-blog__item.blog-item .fields-container {
    display: none;
}
/* Ersetzen Sie ID durch die echte ID Ihres Feldes (z.B. field-1) */
.field-entry.field-17 .field-label {
    display: none !important;
}
.com-content-category-blog h2 {
  font-family: 'Emilys Candy' !important;
  font-size: 1.8rem !important;   /* Skaliert die verspielte Schriftgröße */
 line-height: 1.4em;
  letter-spacing: 0.05em !important;
  font-weight: normal; !important;
}
li::marker {
    content: "";
}
ul.fields-container {
    padding-left: 0;
}
span.field-label {
    font-weight: bold;
}
/* Das gesamte Feld linksbündig machen und Text fließen lassen */
.field-entry.cf-linksbuendig {
    float: left;
    margin-right: 20px;  /* Abstand zum rechts fließenden Text */
    margin-bottom: 15px; /* Abstand nach unten */
    clear: left;         /* Verhindert, dass mehrere Felder nebeneinander kleben */
}

/* Falls Label und Wert untereinander stehen, nebeneinander zwingen */
.cf-linksbuendig .field-label, 
.cf-linksbuendig .field-value {
    display: inline;
}

/* Doppelpunkt hinter das Label setzen für bessere Lesbarkeit */
.cf-linksbuendig .field-label::after {
    content: ": ";
}
p {
    margin: 15px 0 15px;
    line-height: 1.6em;
}

/* ==========================================================================
   1. DETAILANSICHT (Einzelseite des Hundes)
   ========================================================================== */
/* Wir entfernen jegliches Nebeneinander-Quetschen auf der Detailseite. 
   Alles stapelt sich nun ganz natürlich und sauber von oben nach unten. */
.com-content-article .article-body, 
.item-page,
.com-content-article [itemprop="articleBody"] {
    display: block !important; 
}

/* Falls über den "Bilder und Links"-Reiter ein Einleitungsbild geladen wird, 
   das du auf der Detailseite NICHT sehen willst (weil du dort die Slideshow hast): */
.com-content-article .article-fulltext-image {
    display: none !important;
}

/* Der Steckbrief-Kasten ganz unten (bleibt kompakt als 2-Spalten-Raster) */
.com-content-article .fields-container {
    width: 600px; 
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #ccc;
    border-radius: 6px;
    overflow: hidden;
    padding: 0;
    list-style: none;
    margin: 30px 0 0 0; /* 30px Abstand nach oben zum Text */
}

/* Jedes Feld nimmt exakt 50% Breite ein (2 Felder pro Zeile) */
.com-content-article .fields-container .field-entry {
    display: flex;
    flex-direction: row;
    width: 50%;
    box-sizing: border-box;
    padding: 12px 15px;
    border-bottom: 1px solid #e5e5e5;
    align-items: center;
}

/* Breite der Bezeichner-Spalte */
.com-content-article .fields-container .field-label {
    font-weight: bold;
    flex: 0 0 140px; 
    margin-bottom: 0;
    padding-right: 5px;
}
.com-content-article .fields-container .field-label::after {
    content: ":";
}
.com-content-article .fields-container .field-value {
    flex: 1;
}

/* Das bewährte Zebramuster für die 2er-Zeilen (Feld 1&2 grau, 3&4 weiß...) */
.com-content-article .fields-container .field-entry:nth-child(4n+1),
.com-content-article .fields-container .field-entry:nth-child(4n+2) {
    background-color: #f9f9f9;
}
.com-content-article .fields-container .field-entry:nth-child(4n+3),
.com-content-article .fields-container .field-entry:nth-child(4n+4) {
    background-color: #ffffff;
}
.com-content-article .fields-container .field-entry:nth-last-child(-n+2) {
    border-bottom: none;
}

/* ==========================================================================
   2. KATEGORIE-BLOG (Die 3-Spalten-Übersichtsseite)
   ========================================================================== */
/* 1. Den Container im Blog grundsätzlich erlauben (Hintergründe & Rahmen entfernen) */
.com-content-category-blog .fields-container {
    display: block !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 0 15px 0 !important;
    list-style: none !important;
}

/* 2. Erstmal ALLE Steckbrief-Felder (li) im Blog rigoros verstecken */
.com-content-category-blog .fields-container .field-entry {
    display: none !important;
}

/* 3. DIE RETTUNG FÜR DAS BILD: Feld 17 wird gezielt wieder eingeblendet! */
/* Dieser Befehl sucht nach jedem Feld, das die Zahl 17 im Klassennamen hat */
.com-content-category-blog .fields-container .field-entry[class*="17"] {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 0 15px 0 !important;
    background: none !important;
    border: none !important;
}

/* 4. Das Label des Bildes (z.B. das Wort "Foto:") im Blog verstecken */
.com-content-category-blog .fields-container .field-entry[class*="17"] .field-label {
    display: none !important;
}

/* 5. Das Bild selbst für die 3 Spalten im Blog optimieren */
.com-content-category-blog .fields-container .field-entry[class*="17"] img {
    width: 100% !important;
    height: 220px !important;    /* Feste Höhe für einheitliche Kacheln */
    object-fit: cover !important;  /* Verhindert, dass das Foto verzerrt wird */
    border-radius: 6px !important;
}

/* 6. Optischer Rahmen um jeden Hund im Blog (falls gewünscht) */
.com-content-category-blog__item {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    padding: 20px;
    border-radius: 8px;
    box-sizing: border-box;
    margin-bottom: 20px;
}


/* ==========================================================================
   3. SMARTPHONE-ANPASSUNG (Mobil-Ansicht)
   ========================================================================== */
@media (max-width: 768px) {
    .com-content-article .fields-container { width: 100%; }
    .com-content-article .fields-container .field-entry { width: 100%; }
    .com-content-article .fields-container .field-entry:nth-child(odd) { background-color: #f9f9f9; }
    .com-content-article .fields-container .field-entry:nth-child(even) { background-color: #ffffff; }
    .com-content-article .fields-container .field-entry { border-bottom: 1px solid #e5e5e5; }
    .com-content-article .fields-container .field-entry:last-child { border-bottom: none; }
}

.com-content-article.item-page_alle .field-value img {
    display: none;
}
.com-content-article.item-page_ausland .field-value img {
    display: none;
}
.com-content-article.item-page_de .field-value img {
    display: none;
}
/* Macht das gesamte Blog-Element zur Klick-Zone */
.com-content-category-blog__item {
    position: relative; 
}

/* Der Weiterlesen-Link wird unsichtbar über das gesamte Bild und die Kachel gelegt */
.com-content-category-blog__item .readmore a {
    /*position: absolute;*/
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*text-indent: -9999px;  Versteckt den Text "Weiterlesen", da das Bild nun der Link ist */
    z-index: 10;          /* Legt den Link über das Bild */
    background: transparent;
    border: none !important;
}

/* Optional: Ein schöner Hover-Effekt, damit der Nutzer sieht, dass das Bild anklickbar ist */
.com-content-category-blog__item:hover img {
    transform: scale(1.02);
    transition: transform 0.2s ease-in-out;
    cursor: pointer;
}
/* Entfernt das dunkle Overlay und Schatten beim Klicken auf die Kachel */
.com-content-category-blog__item .readmore a:focus,
.com-content-category-blog__item .readmore a:active,
.com-content-category-blog__item .readmore a:hover {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}
/* ==========================================================================
   4. SCHICKER ZURÜCK-BUTTON AUF DER DETAILSEITE
   ========================================================================== */
/* Den standardmäßigen, unschönen Joomla-Navigationsblock aufräumen */
 .com-content-article .pagenav {
    clear: both;
    display: flex;
    justify-content: flex-start; /* Setzt den Button nach links unten */
    margin: 40px 0 20px 0;       /* Großzügiger Abstand unter der Tabelle */
    padding: 0;
    list-style: none;
    border-top: 1px solid #e0e0e0; /* Dezente Trennlinie über dem Button */
    padding-top: 20px;
}

/* NUR den "Zurück"- bzw. "Vorherige"-Link in einen echten Button verwandeln */
._alle .com-content-article .pagenav .previous a {
    display: inline-block !important;
    background-color: #6c757d !important; /* Zeitloses Grau (kannst du anpassen) */
    color: #ffffff !important;            /* Weiße Schrift */
    padding: 10px 20px !important;
    font-weight: bold !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: background 0.2s ease-in-out;
}

/* Das Wort im Button anpassen & ein schönes Pfeil-Icon davorsetzen */
._alle .com-content-article .pagenav .previous a::before {
    content: "←  Zurück zur Übersicht"; /* Überschreibt den Beitragsnamen im Button */
    font-size: 1rem;
}

/* Versteckt den eigentlichen, von Joomla generierten Text des Beitragsnamens im Link */
.com-content-article .pagenav .previous a text,
.com-content-article .pagenav .previous a span:not(.icon-previous) {
    display: none !important;
}

/* Falls Joomla dort Text ausgibt, wird er durch die Schriftgröße 0 unsichtbar gemacht, 
   während unser "Zurück"-Text von oben sichtbar bleibt */
._alle .com-content-article .pagenav .previous a {
    font-size: 0 !important; 
}

/* Hover-Effekt: Button wird beim Drüberfahren leicht dunkler */
._alle .com-content-article .pagenav .previous a:hover {
    background-color: #495057 !important;
    cursor: pointer;
}

/* Den "Weiter"-Button auf der Detailseite verstecken, da wir nur zurück zur Übersicht wollen */
._alle .com-content-article .pagenav .next {
    display: none !important;
}
 .com-content-category-blog__items.blog-items.steckbrief.columns-3 .field-label:first-child {
    display: none;
}
._alle ._alle .container-component>:first-child, .container-sidebar-left>:first-child, .container-sidebar-right>:first-child, .container-component>*+*, .container-sidebar-left>*+*, .container-sidebar-right>*+* {
     margin-top: 0em;
}
._alle .container-component>:first-child, .container-sidebar-left>:first-child, .container-sidebar-right>:first-child, .container-component>*+*, .container-sidebar-left>*+*, .container-sidebar-right>*+* {
     margin-top: 1em; 
}
._alle .container-component>*, .container-sidebar-left>*, .container-sidebar-right>* {
    margin-bottom: 0;
}
._alle main {
     padding: 0px; 
    padding-left: 35px; padding-top: 30px;
}
a.btn.btn-secondary {
    background: #0d113e;
    color: #fff;
}
 .com-content-category-blog__item.blog-item {
    background: #8375ab2b;
}
.steckbrief-zurueck-block {
  display: none;
}
p.readmore:hover {
    background: #000;
}
.grid-child.container-component {
    background: #fff;
}
.dia img {
    width: 100%;
    max-width: 50px;
}
.dia img {
    width: 100%;
    max-width: 50px;
}
/* Haupt-Container im Header über die volle Breite */
.header-custom-wrapper {
position: relative; /* Wichtig für die absolute Positionierung im Inneren */
    display: flex;
    align-items: center;
    min-height: 180px; 
    padding: 15px;
}

/* Drittelt die Bereiche grob, damit das Logo exakt in der Mitte bleibt */
.header-left, 
.header-right {
  flex: 1;
}

.header-center {
  flex: 0 0 auto;
  text-align: center;
}

/* LINKER BUTTON STYLING */
.header-left {
  display: flex;
  justify-content: flex-end;
}

.btn-mitglied {
  background-color: #b071c1; /* Nutzt Ihre Button-Farbe */
  color: #fff !important;
  padding: 10px 20px;
  text-decoration: none;
  font-weight: 600;
  border-radius: 4px;
  text-transform: uppercase;
  font-size: 0.9rem;
  transition: background 0.2s ease;
  margin-left: 30px;
}

.btn-mitglied:hover {
  background-color: #333;
}

/* MITTLERES LOGO */
/* REPARATUR FÜR DAS SVG LOGO */
.header-logo {
  height: 120px !important;    /* Erzwingt eine feste Höhe für das SVG */
  width: 180px !important;    /* WICHTIG: Geben Sie hier die ungefähre Breite Ihres Logos in Pixeln an! */
  display: inline-block !important;
  position: absolut;
  z-index: 9999;
}
.header-logo img {
  left: 60px;
}
/* Verhindert, dass das SVG innerhalb des Links kollabiert */
.header-center a {
  display: inline-block !important;
  line-height: 0;             /* Entfernt störende unsichtbare Text-Abstände unter dem SVG */
}

/* RECHTE SOCIAL MEDIA LOGOS */
.header-right {
  display: flex;
  justify-content: flex-end; /* Schiebt die Icons ganz nach rechts oben */
  align-self: flex-start;    /* Richtet sie an der Oberkante aus */
  margin-right: 30px;
}

.social-icons {
  display: flex;
  gap: 12px; /* Abstand zwischen den Social-Media-Logos */
}

.social-icons img {
  width: 28px;  /* Macht die Logos schön klein */
  height: 28px;
  object-fit: contain;
  transition: transform 0.2s ease;
}

.social-icons a:hover img {
  transform: scale(1.1); /* Kleiner Bewegungseffekt beim Drüberfahren */
}

/* RESPONSIVE ANPASSUNG: Mobil untereinander abbrechen */
@media (max-width: 768px) {
  .header-custom-wrapper {
    flex-direction: column;
    gap: 10px;
  }
  .header-right {
    justify-content: center;
    align-self: center;
  }
}
/* Entkoppelt die Einleitung komplett vom Joomla-Beitragsraster */
.com-content .blog-einleitung,
.blog-description .blog-einleitung,
.blog-einleitung {
    display: grid !important;
    grid-template-columns: 1fr !important; /* Mobil: 1 Spalte */
    gap: 30px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 40px !important;
    clear: both !important;
    box-sizing: border-box !important;
}

/* Desktop-Ansicht: Schaltet das Layout sauber auf 2 Spalten */
@media (min-width: 992px) {
    .com-content .blog-einleitung,
    .blog-description .blog-einleitung,
    .blog-einleitung {
        grid-template-columns: repeat(2, 1fr) !important; /* Exakt 2 Spalten */
    }
}

/* Verhindert, dass umschließende Joomla-Container die Breite begrenzen */
.blog-description {
    grid-column: 1 / -1 !important; /* Zwingt Cassiopeia, die volle Breite freizugeben */
    width: 100% !important;
}
.moduletable {
    background: #6a76ff38;
}
div#maximenuck105 ul.maximenuck {

     background: transparent; 
}
.item-content .page-header {
    margin: 2px 0px 10px 0px;
    padding-bottom: 5px;
    clear: both;
    padding-top: 20px;
    display: none;
}
span.field-label {
    display: none;
}
div.jwts_toggleControlContainer a.jwts_toggleControl {

    background: #e6dbe9 !important;
   
}div#mod-custom193 {
    background: #fff;
  text-align: center;
}
._hundemenue a {
    padding: 10px;
    margin: 10px;
    border: 1px solid #8286d1;
    background: #8286d1;
    color: #fff;
    border-radius: 8px;
}
/* Aggressiverer CSS-Ansatz für MaxiMenu CK Unterpunkte
.maximenuck2 li.level2 a:hover .titreck-title,
.maximenuck2 li.level2.current a .titreck-title,
.maximenuck2 li.level2.active a .titreck-title {
    background-color: #292f6f !important;
    color: #ffffff !important;
    display: inline-block;
    width: 100%; padding: 6px !important;
  
}
 */
/* 1. Grund-Styles für ALLE Untermenüpunkte (verhindert das Springen) */
.maximenuck2 li.level2 a {
    display: block !important;
    padding: 8px 12px !important; 
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* 2. Beim Drüberfahren (Hover) - Hintergrund BLAU & Text WEISS */
.maximenuck2 li.level2 a:hover,
.maximenuck2 li.level2 a:hover .titreck,
.maximenuck2 li.level2 a:hover .titreck-text,
.maximenuck2 li.level2 a:hover .titreck-title {
    background-color: #8286d1 !important;
    color: #ffffff !important;
}

/* 3. Wenn aktiv (Current / Active) - Hintergrund BLAU & Text WEISS */
.maximenuck2 li.level2.current > a,
.maximenuck2 li.level2.active > a,
.maximenuck2 li.level2.current > a .titreck,
.maximenuck2 li.level2.active > a .titreck,
.maximenuck2 li.level2.current > a .titreck-title,
.maximenuck2 li.level2.active > a .titreck-title {
    background-color: #8286d1 !important;
    color: #ffffff !important;
}
/* Bei einem Grid-Layout (Cassiopeia-Standard) */
.blog-items, 
.com-content-category-blog__items {
    align-items: start !important;
}

/* Falls Ihr Template stattdessen Flexbox nutzt */
.blog-item, 
.com-content-category-blog__item {
    height: auto !important;
    align-self: start !important;
}
/* Erzeugt das dynamische Spalten-Layout (Masonry) */
.blog-items, 
.com-content-category-blog__items {
    display: block !important;       /* Löst das starre Raster-Grid auf */
    column-count: 3;                 /* Anzahl der Spalten auf großen Bildschirmen */
    column-gap: 24px;                /* Horizontaler Abstand zwischen den Spalten */
}

/* Verhindert das Zerreißen von Beiträgen und sorgt für den Abstand nach unten */
.blog-item, 
.com-content-category-blog__item {
    display: inline-block !important; /* Wichtig für korrekte Spalten-Berechnung */
    width: 100% !important;           /* Nutzt die volle Spaltenbreite */
    break-inside: avoid !important;   /* Verhindert, dass ein Beitrag in zwei Spalten gesplittet wird */
    margin-bottom: 24px;              /* Vertikaler Abstand zum nächsten Beitrag */
}

/* Responsive Anpassung: 2 Spalten auf Tablets */
@media (max-width: 992px) {
    .blog-items, .com-content-category-blog__items {
        column-count: 2;
    }
}

/* Responsive Anpassung: 1 Spalte auf Smartphones */
@media (max-width: 576px) {
    .blog-items, .com-content-category-blog__items {
        column-count: 1;
    }
}
.joomla-support-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    /*background: linear-gradient(135deg, #292f6f 0%, #ff4b2b 100%);*/
    color: #981616 !important;
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    padding: 12px 28px;
    border-radius: 50px;
    text-decoration: none !important;
    box-shadow: 0 4px 15px rgba(255, 75, 43, 0.3);
    transition: all 0.3s ease;
    margin-left: 10px;
}

.joomla-support-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 75, 43, 0.5);
  background: linear-gradient(135deg, #ff4b2b 0%, #ff416c 100%);
}

.joomla-support-btn:active {
  transform: translateY(1px);
}

.joomla-support-btn .icon-heart {
  font-size: 1.2rem;
  /* Nutzt Joomlas integrierte Fontawesome-Icons */
}
@media (max-width: 1010px) {
    [data-id="maximenuck105"] .mobilemenuck-bar-title {
        background: #8286d1 !important;
        text-align: left !important;
    }
  .col-md-6 {
        flex: none;
        width: 100% !important;
    }
      ._start #mod-custom94 {
        height: 297px;
        
        background: #292f6f url(/images/banners/tierhilfe.webp) no-repeat center center / contain !important;
    }
  .container-sidebar-right .sidebar-right:last-child {
    margin-bottom: 0em;
}
}
@media (max-width: 767px) {
    .responsive-slideshow-container {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin-right: 0 !important;
        margin-bottom: 20px !important;
    }
}
@media (min-width: 768px) {
    .responsive-slideshow-container {
        width: 50% !important;
        max-width: 50% !important;
    }
}
@media (max-width: 700px) {
  .whole {
    padding: 10px 20px 0 20px;
}
      ._start #mod-custom94 {
        height: 227px;
        }
}
/* Grundaufbau des Headers */
.header-custom-wrapper {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    min-height: 90px; /* Gibt dem absoluten Logo genügend Platz */
}

/* -------------------------------------------
   PC & TABLET DESIGN (Ab 768px)
------------------------------------------- */
@media (min-width: 768px) {
    /* Logo absolut über dem Banner zentrieren */
    .header-center {
        position: absolute;
        left: 0%;
        top: 10%;
        /*transform: translate(-30%, -50%);  Zentriert das Logo exakt in der Mitte */
        z-index: 10;
    }

    /* Das Logo darf hier deutlich größer werden */
    .header-logo {
        width: 274px !important; /* Hier gewünschte PC-Breite eintragen */
        height: auto !important;
        display: block;
    }

    /* Social Icons horizontal auf der rechten Seite */
    .social-icons {
        display: flex;
        gap: 10px;
    }

    .social-icons img {
        width: 35px; /* Einheitliche, saubere Größe für PC */
        height: 35px;
        object-fit: contain;
    }
}

/* -------------------------------------------
   MOBILE DESIGN (Bis 767px)
------------------------------------------- */
@media (max-width: 767px) {
    /* Ändert die Reihenfolge: Social Icons nach ganz oben, dann Logo, dann Button */
    .header-custom-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 15px;
        min-height: auto;
    }

    .header-right { order: 1; flex: 1; }  /* Ganz oben */
    .header-center { order: 2; flex: 1;} /* Mitte */
    .header-left { order: 3; flex: 1;}   /* Unten */

    /* Social Icons auf Mobile nebeneinander ganz oben */
    .social-icons {
        display: flex;
        justify-content: center;
        gap: 15px;
    }

    .social-icons img {
        width: 40px; /* Etwas größer auf Mobile, damit man sie leicht mit dem Finger trifft */
        height: 40px;
    }

    /* Logo-Größe für Smartphones */
    .header-logo {
        width: 280px !important; /* Passt das Logo an die Displaybreite an */
        height: auto !important;
    }
}