:root {
  --prim:#F5F1E8;        /* Primärfarbe */
  --sec: #C86B3C;        /* Sekundärfarbe */
  --body-color: #fff;    /* Body Hintergrundfarbe */
  
  --kat1-color: #A64642;  /* Pferdecharaktere */
  --kat2-color: #5B6269;  /* Sensible-Pferde */
  --kat3-color: #A3A653;  /* Futtertrends */
  --kat4-color: #592A28;  /* Futtermittelarten */
  --kat5-color: #575924;  /* Pferdeernährung */
}
    
/*----- Content -----*/
html, body {margin:0; padding:0; line-height:1.6; background-color:var(--body-color);}
body {padding-top:110px; font-family:"Noto sans", sans-serif;}
* {box-sizing:border-box; text-size-adjust:none; -webkit-text-size-adjust:none; scroll-behavior:smooth;}
img {max-width:100%;}
ul {list-style:none; margin:0; padding:0;}
ol {margin:0; padding:0;}
a {text-decoration:none; color:inherit;}

table {width:auto; height:auto; border-color:#c2c2c2;}
table tr td {padding:3px 10px;}

h1, .h1 {font-size:30px; margin-bottom:10px; line-height:normal; font-weight:bold; hyphens:auto; word-wrap:break-word;}
.h1-site {margin-bottom:40px; width:100%; margin-top:0;}
h2, .h2 {font-size:22px; font-weight:bold; line-height:normal; margin-top:0; margin-bottom:10px;}
.article-title h2, .kat1 h2 {text-transform:none;}
h3, .h3 {font-size:18px; margin-bottom:0; font-weight:bold; line-height:normal;}
h4, .h4 {font-size:18px; margin-bottom:0; line-height:normal;}
p {margin:5px 0; font-size:16px; color:#000;}
    
/*----- Slider -----*/
.label {font-size:12px;padding:3px 10px;color:#fff;text-transform:uppercase;display:inline-block;background-color: #c86b3c;} 
 
    
/* Content Hintergrundfarben */
.c-white {}
.c-grey {background-color:#f7f7f7; border:solid 1px #ebebeb;}
.c-blue {background-color:#f0f8ff; border:solid 1px #dce8f3; border-width:1px 0;}

/* Links auf der rechten Seite */
.li-kat1 li::before {background-image: url(/assets/images/pm/autor/pferdecharaktere.svg);}
.li-kat2 li::before {background-image: url(/assets/images/pm/autor/sensible-pferde.svg);}
.li-kat3 li::before {background-image: url(/assets/images/pm/autor/futtertrends.svg);}
.li-kat4 li::before {background-image: url(/assets/images/pm/autor/futtermittelarten.svg);}
.li-kat5 li::before {background-image: url(/assets/images/pm/autor/pferdeernaehrung.svg);}

/* Navigation Desktop Farbe */
.nav-wrapper {background-color:#C86B3C;}          /* Hintergrundfarbe 1.Ebene */
#menu ul li a {color:#fff}                        /* Schriftfarbe 1.Ebene */
#menu ul ul {background-color:#C86B3C;}           /* Hintergrundfarbe 2.Ebene */
#menu ul ul li a {color:#fff;}                    /* Schriftfarbe 2.Ebene */
#menu ul ul ul {background-color:#C86B3C;}        /* Hintergrundfarbe 3.Ebene */
#menu ul ul ul li a {color:#fff;}                 /* Schriftfarbe 3.Ebene */

/* Navigation Mobil Farbe */
#nav-c {background-color:#C86B3C;}                /* Hintergrundfarbe 1.Ebene */
#nav-c #menu ul ul {background-color:#C86B3C;}    /* Hintergrundfarbe 2.Ebene */
#nav-c #menu ul ul ul {background-color:#155826;} /* Hintergrundfarbe 3.Ebene */

footer {background-color:#3a3a3a;}

/* ===== MENÜ FARBANPASSUNG ===== */
#menu ul li, #nav .level1 {
  color: #C86B3C;
}

/* ===== FOOTER FARBANPASSUNG ===== */
footer {
  color: #2D5016;
}

footer p {
  color: #F5F1E8;
}

footer a, .ft-content a {
  color: #3a3a3a;
}

/* ===== LOGO OPTIMIERUNG ===== */

/* Desktop: Logo in Originalgröße (500px) anzeigen */
@media screen and (min-width: 1200px) {
  .logo {
    flex-basis: 500px;
    max-width: 500px;
  }
  .logo img {
    width: 500px;
    max-width: 500px;
  }
}

/* Tablet: Logo responsive, aber nicht zu klein */
@media screen and (min-width: 600px) and (max-width: 1199px) {
  .logo {
    flex-basis: 350px;
    max-width: 350px;
  }
  .logo img {
    width: 100%;
    max-width: 350px;
  }
}

/* Mobile: Logo auf 80% der Breite begrenzen */
@media screen and (max-width: 599px) {
  .logo {
    flex-basis: 80%;
    max-width: 300px;
  }
  .logo img {
    width: 100%;
    max-width: 100%;
  }
}