:root 
{
  --first: #556B2F;
}

body
{
  background-color: #fff;
}

a
{
  color: var(--first);
}

a:hover
{
  text-decoration: none;
}

h1
{
  font-size: 38px;
}

h2
{
  color: var(--first);
}

h2 a
{
  text-decoration: none;
}

@media only screen and (min-width: 769px)
{
  .site-header 
  {
    background-color: rgba(255,255,255,1);
  }
}
@media only screen and (max-width: 768px)
{
  .site-header 
  {
    background-color: rgba(255,255,255,0.9);
  }
  .site-header .header-image
  {
    width: 250px;
    top: 8px;
  }
}

.inside-header
{
  padding: 32px 20px 16px 40px;
}

.main-navigation, .main-navigation ul ul
{
  background-color: transparent;
}

/* Passives Menü */
.main-navigation .main-nav ul li a, .main-navigation .menu-toggle, .main-navigation .menu-bar-items
{
  font-size: 21px;
  font-weight: 600;
}

/* Aktives Menü */
.main-navigation .main-nav ul li[class*="current-menu-"] > a
{
  color: var(--first);
  font-size: 21px;
  font-weight: 600;
}

/* Hover-Menü */
.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a, .main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a, .main-navigation .main-nav ul li.sfHover:not([class*="current-menu-"]) > a, .main-navigation .menu-bar-item:hover > a, .main-navigation .menu-bar-item.sfHover > a
{
  color: var(--first);
  font-size: 21px;
  font-weight: 600;
}

/* Mobimenü Button */
.mobile-menu-control-wrapper .menu-toggle, .mobile-menu-control-wrapper .menu-toggle:hover, .mobile-menu-control-wrapper .menu-toggle:focus, .has-inline-mobile-toggle #site-navigation.toggled
{
  background-color: transparent;
}

.one-container .site-content 
{
    padding: 8px 40px 40px 40px;
}

.content
{
  position: relative;
  z-index: 9999;
}

.title-img
{
  background-image: url("https://www.pension-andrea.de/wp-content/uploads/2024/08/20240607_122804.jpg");
  background-size: cover;
  background-position: center;
}

.title-text 
{
    background-color: var(--first);
    color: #fff;
    text-align: center;
    padding: 4px 0px;
    margin-bottom: 16px;
}

.title-text a
{
  color: #fff;
}

@media only screen and (max-width: 768px)
{
  .title-text 
  {
    font-size: 12px;
  }
}

@media only screen and (min-width: 769px)
{
  .title-img
    {
      width: 100%;
      height: 470px;
      margin-bottom: 164px;
    }
}

@media only screen and (max-width: 768px)
{
  .title-img
    {
      width: 100%;
      height: 275px;
      margin-bottom: 32px;
    }
}

@media only screen and (min-width: 769px)
{
  .top_body, h1
  {
    margin-top: -128px;
  }
}